last day (15 days later) » 

9:28 AM
0
A: jQuery autocomplete (remote datasource) with dynamic textboxes / rows

itachitry the following. add class="" attribute in the inputs. let's say you are using class="someclass" attribute. $(document).on("keydown.autocomplete",".someclass",function(e){ $(this).autocomplete({ source: "autocomplete_req.php", minLength: 1, select: fun...

 
Okay it worked, but now the problem is they no longer display in the other textboxes (ItmUOM, ItmId, ItmQty) that supposed to be displayed once the user do the autocomplete. What i meant is the data shared by the same rows
As u can see on my html code, it is readonly because the autocomplete will fetch the data and display them in the textboxes
 
you need to be very careful about the markup here. recheck everything with above. even a slight typo can mess it up. remove those readonly, or any other external js functions from those inputs. so that we know it is working alone but if some other script is added, it doesn't work due to conflict.
 
I have removed the readonly and all the related external js functions. but they can only perform autocomplete without fetching the rest of columns into other textboxes :(
 
check console for any errors.
 
i'm using dreamweaver
 
9:28 AM
open the site in google chrome. hit F12 and check console tab.
 
it says "Failed to load resource: net::ERR_CACHE_MISS" but i guess theres nothing to do with it
 
you have to do some debug here
is autocomplete working?
 
autocomplete is working but i want the results from the autocomplete (ItmName) to fetch all the columns from the same row to display in ItmQty, ItmUOM textboxes.
 
so our problem is in the select: function(){} isn't it?
 
@itachi yes.
i've tried to change and add classes on the html but still it wont work
 
9:32 AM
change

select: function( event, ui )
{
$('#ItmNameDis').val(ui.item.value);
$('#ItmUOM').val(ui.item.uom);
$('#ItmId').val(ui.item.id);
$('#ItmQty').val(ui.item.qty);
$('#StkId').val(ui.item.stkId);
}

to

select: function( event, ui )
{
console.log(ui);
}
reload the page ->goto console -> paste whatever you got there
 
if i use this :

select: function( event, ui )
{
$('#ItmNameDis').val(ui.item.value);
$('#ItmUOM').val(ui.item.uom);
$('#ItmId').val(ui.item.id);
$('#ItmQty').val(ui.item.qty);
$('#StkId').val(ui.item.stkId);
}

they will replace the first row. the field that run the autocomplete function will remain the same but the other column will be replaced by the autocomplete from the generated row.
what do u mean by 'paste whatever u got there?'
 
Don't use the above code that you wrote. that is invalid and won't work.
 
Okay but it displays like what i want. but they just replace the first row...
 
hm
aha got it.
 
supposed they display in their own row. this is confusing T_T
 
9:40 AM
you have a td wrapped around every input text box. isn't it?
 
exactly
 
tht's why it isn't working. i missed that td
 
so there shouldnt be a 'td'
then how can i add new rows?
 
if no td, then it will work right away. but i will try to give a solution with td. wait
 
9:44 AM
it will be little bit ugly but here's it is.
 
a.parent('tr').find('.ItmUOM').val(ui.item.uom);
a.parent('tr').find('.ItmId').val(ui.item.id);
a.parent('tr').find('.ItmQty').val(ui.item.qty);
 a.parent('tr').find('.StkId').val(ui.item.stkId);
change to this inside the select: part. remove the previous codes and put these ones.
remember: Inputs MUST have the respective class to work.
 
still it won't work T_T
 
give your html markup
all the updates
 
<table id="dataTable" width="350px" border="1">
    <tr>
        <td><input type="checkbox" name="chk"/></td>
        <td><input type="text" id="ItemName" size="50" class="ui-widget-content ItmName request"/></td>
        <td><input type="text" id="ItmId" size="10"/></td>
        <td><input type="text" id="ItmUOM" size="5"</td>
        <td><input type="text" id="ItmQty" size="5"/></td>
        <td><input type="text" id="ReqQty" size="5"/></td>
    </tr>
</table>
 
9:52 AM
dude.... where's the class in those inputs????
 
$(document).on("keydown.autocomplete",".request",function(e){
var a = $(this);
$(this).autocomplete({
source: "requisition_search.php",
minLength: 1,
select: function( event, ui )
{
a.parent('tr').find('.ItmName').val(ui.item.value);
a.parent('tr').find('.ItmUOM').val(ui.item.uom);
a.parent('tr').find('.ItmId').val(ui.item.id);
a.parent('tr').find('.ItmQty').val(ui.item.qty);
}
});
});
each inputs?
 
each input must have the respective class
 
i've insert the classes but it wont work
 
insert the class now and try
 
<table id="dataTable" width="350px" border="1">
<tr>
<td><input type="checkbox" name="chk"/></td>
<td><input type="text" id="ItemName" size="50" class="ui-widget-content ItmName request"/></td>
<td><input type="text" id="ItmId" class="ItmId request" size="10"/></td>
<td><input type="text" id="ItmUOM" class="ItmUOM request" size="5"</td>
<td><input type="text" id="ItmQty" class="ItmQty request" size="5"/></td>
<td><input type="text" id="ReqQty" class="ReqQty request" size="5"/></td>
</tr>
</table>
 
9:56 AM
does it work with the non dynamic inputs?
 
yes it works fine
 
addRow(tableID) you need to add the classes to each input while building the dynamic row
as of now, dynamic inputs have no class so it won't work.
 
i've added the classes and use this

$('#ItmNameDis').val(ui.item.value);
$('#ItmUOM').val(ui.item.uom);
$('#ItmId').val(ui.item.id);
$('#ItmQty').val(ui.item.qty);
$('#StkId').val(ui.item.stkId);

but they replace like i told u earlier.

i've removed the classes, add the latest one u gave me, still it wont work
 
forget the $('#....') codes. they are of no use.
 
10:00 AM
to make it clear.

add the class
update the code to the latest.

does it work for non dynamic inputs?
 
<table id="dataTable" width="350px" border="1">
<tr>
<td><input type="checkbox" name="chk"/></td>
<td><input type="text" id="ItemName" size="50" class="addRow(tableID) ui-widget-content ItmName request"/></td>
<td><input type="text" id="ItmId" class="addRow(tableID) ItmId request" size="10"/></td>
<td><input type="text" id="ItmUOM" class="addRow(tableID) ItmUOM request" size="5"</td>
<td><input type="text" id="ItmQty" class="addRow(tableID) ItmQty request" size="5"/></td>
<td><input type="text" id="ReqQty" class="addRow(tableID) ReqQty request" size="5"/></td>
 
ok. now we need to change the addRow() function.
did you write the addRow() or copied it?
 
Okay. Just now when i add the addRow, they replaced the first row
copied from this page : viralpatel.net/blogs/…
 
forget those codes. you are using jQuery.
it is much easier in jQuery
 
I don't have any basics on jQuery / Javascript. But im trying to learn y experimenting the codes
 
10:05 AM
<input type="button" value="Add Row" onclick="addRow('dataTable')" /> this is what button, clicking of which, a row is added right?
 
 
1 hour later…
11:30 AM
Yes. when that button is clicked, it will add a new row
 

  last day (15 days later) »