jQuery Add/Remove with Dynamic PHP content

I am new to jQuery and I am trying to implement this:

In my PHP page, I would like to do something like a Add/Remove button/icon (please check: http://muiomuio.com/tutorials/jquery/add-remove/ http://muiomuio.com/web-design/add-remove-items-with-jquery), and when the add is clicked I would like to show a new set of fields (specifically, Drop Down menus). In the sample I show above, it only has 1 text field.

However, t开发者_运维技巧hese are not normal fields, I want them to be populated with values from database, and some of them need to be interactive. In other words, AJAX enabled. So in my PHP page I would like to do a query to handle these interactive parts.

To be more specific, let us call this "new" item a row. A row contains:

Service: Drop Down menu (static, no need to do a call to the database every time a NEW item row is created)

Store: Drop Down menu (dynamic-ajax,it will check the Service drop down menu, and based on its value, it will go fetch from the database the stores that provide this service)

Status: Drop Down menu (static, no need to do a call to the database every time a NEW item row is created)

Now from that simple demo, I know how to do the add/remove feature, but I do not know how to do the database call to fetch the values of the drop down menu. Also, I do not know how to make the dynamic "Store" list which takes the value of the Service menu of the row.

So, if we have 10 rows, each one has its service, and changing the service in row1, should not affect nothing but row1's Store list values.. and so on.. So they are separate rows.

Please help on how to target this. Thanks!

Okay, I assume you've got adding and removing all sorted out, but still, it'd be good to take a look at your code and see if you implemented it in a way, that every new item has unique identified, for example:

<select id="service-1">.....</select>
<select id="store-1">......</select>
<select id="status-1">.....</select>

<select id="service-2">.....</select>
<select id="store-2">......</select>
<select id="status-2">.....</select>

Now to the Javascript. Basically you have to tell jQuery that when onChange event happens for service select box, it has to find out its identifier, request data from server and replace the content in an element with id store + identifier you've just used.

$('select[id^="service-"]').change(function(){
   var id = $(this).attr('id');
   id = id.replace('service-', '');

   var someValue = $(this).val();

   $.get('/fetch/content/from/this/url?param='+someValue, function(data){
       $('#store-' + id).html(data);    // that would be if your script returns HTML.
                                        //  You can easily alter the functionality to 
                                        // rebuild the dropdown menu from JSON object
                                        // or something like that 
   });                               
});

And that is basically it. :)

Oh, and please, if it doesn't work, let me know, there may be some dom manipulation I've forgot. I didn't test it, but I used this method a billion times, so it definitely does the trick.

As much as I don't like to recommend this your best bet may be pre-populated fields. Build the drop down menus with PHP and then hide them with jQuery. If there aren't too many of them there shouldn't be a huge performance hit.

Unless I misunderstood your question, I think this would be the simplest solution.

wouldn't it best to store the values in a SESSION? And then upon creation of a new field you would just call upon the SESSION Variable? You would have only one call to the db and all your data in memory ...