How to assign variable value in JQuery

Hi!
I want to assign a variable ID to jQuery AutoComplete plugin.

By following I am getting ID of element.


 var vehmakeID;
  jQuery('input[id^=vehmake]').focus( function(){
  			vehmakeID = this.id;

  });

I want to assign “vehmakeID” value to following autocomplete plugin code:



 jQuery('#'+vehmakeID).autocomplete('submit/vehicle.php',
  		{
			 cacheLength: 1
			,extraParams: {act: 'VM'}
  		}
  );

I also used (vehmakeID) … but it also didn’t work.

NOTE: If I use (‘#vehid’)… It works. I mean, passing id as string, autocomplete plugin works perfectly fine.

Can some one help me in dynamically assign ID.

Thanks in advance

I can’t help but just a question. why don’t you declare the variable inside the function ?

  jQuery('input[id^=vehmake]').focus( function(){
  			 var vehmakeID = this.id;

  });

Yes, thanks for tip. But main step is how can I solve my problem of assiging variable value.

Have you tried debugging it, i.e. checking if vehicleID gets the right thing assigned to it:

var vehmakeID;
  jQuery('input[id^=vehmake]').focus( function(){
  			vehmakeID = this.id;
  
  });

alert(vehicleID); // if this doesn't show the right data, then you know the problem is in the code above.

 jQuery('#'+vehmakeID).autocomplete('submit/vehicle.php',
  		{
			 cacheLength: 1
			,extraParams: {act: 'VM'}
  		}
  );

Hi!
Kindly visit following link:

http://vibersol.com/sitesdemo/shipping/admin/addquotation.php

Kindly see [Green Icon]. On first row, AUTOCOMPLETE plugin works fine. But when new row is added [by clicking on ADD ICON {green Icon}], it doesn’t work on newly added row.

Can some one guide me how to accomplish this.

Thanks in advance

You need to run the autocomplete function on the newly created row. When you create the new row, the autocomplete function does not know this new stuff exists!

Also, your “addVehicleDetailField” function is giving every single row the same set of IDs. This is because the “id” variable is not global and when the function finishes running, id is destroyed.

var idcounter = 2;
function addVehicleDetailField(){
   var id = idcounter++;
   jQuery('#VehicleDetail').append('<tr id=\\'row'+id+'\\'><td><a href=\\'#\\' onClick=\\'removeFormField("#row'+id+'"); return false;\\'><img src=\\'./../images/delete.png\\' border=\\'0\\'  class=\\'imgLink\\'/></a></td><td><input type=\\'text\\' size=\\'10\\' name=\\'vyear[]\\' id=\\'vehyear'+id+'\\' class=\\'input\\' /></td><td><input type=\\'text\\' name=\\'vmake[]\\' id=\\'vehmake'+id+'\\' class=\\'input\\' /></td><td><input type=\\'text\\' name=\\'vmodel[]\\' id=\\'vehmodel'+id+'\\' class=\\'input\\' /></td><td><input type=\\'text\\' name=\\'vtype[]\\' id=\\'vehtype'+id+'\\' class=\\'input\\' /></td></tr>');
   updateAutocompleteFields(); //run it when you add a new row
}

function updateAutocompleteFields() { // the function to run
  jQuery('#vehicleDetailsTable tr:last-child td + td + td input').focus( function(){
              var vehmakeID = this.id;  
                
          /** AUTO COMPLETE **/
          jQuery('#'+vehmakeID).autocomplete('submit/quotation.php',
                {
                     cacheLength: 1
                    ,extraParams: {act: 'VM'}
                }
          ); 
  });
}

updateAutocompleteFields(); // run it once for the first existing row.

I changed the selectors for finding the inputs to this:

#vehicleDetailsTable tr:last-child td + td + td input

Then you don’t need to rely on giving everything IDs. You should try to use IDs as little as you can, mainly for important sections (like the table).

I thought I would point out some improvements you could make:

  • Stop using tables for layout. You have some nested 4 or 5 deep. It makes your HTML extremely bloated and will make the page load slower. It’s also horrible to debug, it’s antiquated and not a good method for making web pages. It’s OK for your vehicleDetails table, because it’s tabular data, but for making the layout of the page you should not be using tables.
  • Stop using inline event handlers. For example, onclick="addVehicleDetailsField() return false;" should be in your myjs.js file, not in the HTML.
  • Your backend quotation.php file doesn’t seem to be working too well. I typed “Toyota” into the make field, and autocomplete showed me “Mercedes Benz” and “Porsche”. Neither of those contains a “T”!
  • Combine the 7 JS files into 1. This will mean faster loading time and less strain on your server as you are making 6 fewer HTTP requests. Also reconsider whether such a huge quantity of javascript is necessary for what you are trying to do.

Really thanks for expert advices. No doubt, these are of really help to me in improving the code.

I will update you after implementing your JS code in website.

Again really thanks for your great points in site improvement.

I have updated code, with sent code. Sorry to bother again, but unable to run code as desired. Can yu tell me where Iam doing wrong.

Thanks in advance

What should I do now ?

Raffles!
Can you further guide me, where Iam doing wrong in implementing your code. As currently code is not running as desired.

Thanks in advance

I’m trying to debug it now, which is a nightmare because you have inline script in the BODY and in multiple files in the HEAD, but you keep changing the code!!

I think the problem is with vehicleID = this.id. I think this is not referring to the element matched by #vehicleDetailsTable tr:last-child td + td + td input. It looks like the pattern is not matching, which is odd.

Try this: leave everything as it was after you added my code. Then replace #vehicleDetailsTable tr:last-child td + td + td input with your original input[id^=vehmake]. Also add the following immediately before vehicleID = this.id:

alert(this.id);

alert() is a useful debugging tool. You need to learn to debug your own code as it will save you a lot of time. :slight_smile:

By the way, I do have other things to do in life, so please don’t be so impatient.

Thanks for your tip. It solved porblem. Now it is showing values on dynamically added textboxes. Surely will not be impatient in future :slight_smile: .

Thanks once again for your kind help.