Jquery, targeting specific instances of cloned HTML for php search and results

Question

Am a novice with Jquery but I've put together code for a jquery search on select change alongside code for add/remove instance buttons, the idea being that the user selects an entry in a dropdown and the page returns a table containing info in a database. If required the user can then click a button to add a copy of the dropdown and select another entry etc etc.

I'm having a few issues with the code that performs the actual search, only the first dropdown actually sends and recieves any data, the others although they have the correct id's names etc do nothing.

What would be the best way of ensuring that each cloned group acts independently of the other?

        $(document).ready(function() {   
        // Am I correct in thinking that if this variable is read on load it will never update and always be 1 as there are no other cloned inputs.
        var num =  $('.clonedInput').length;

        $('#issue-drop' + num).change(function() {

            var qString = 'id=' +$(this).val();
            $.post('sub_db_handler.php', qString, processResponse);

        });

        function processResponse(data) {
            $('#results' + num).html(data);
        }

    });

Here is an example of my forms generated source

<div id="issues-wrap1" style="margin-bottom:4px;" class="clonedInput">
            <select name="Issues[]" id="issue-drop1">
                <option selected>Please Select...</option>
              </select>
            <div id="results1">

            </div>
        </div>

 <!-- Second div starts here -->

 <div id="issues-wrap2" style="margin-bottom:4px;" class="clonedInput">
            <select name="Issues[]" id="issue-drop2">
                <option selected>Please Select...</option>
              </select>
            <div id="results2">

            </div>
        </div>

" Am I correct in thinking that if this variable is read on load it will never update and always be 1 as there are no other cloned inputs." Ya, you are correct — A. Wolff, May 16 '13 at 14:25

score 1 · Accepted Answer · answered May 16 '13 at 14:23

1

You should use delegation: {see if its working for you}

 $(document).on('change','.clonedInput select',function() {

        var data = {id: $(this).val()};
        $.post('sub_db_handler.php', data, processResponse);

    });

answered May 16 '13 at 14:23

A. Wolff

74,033
9
94
155

This is very helpful, each dropdown now works correctly, sending requests and the num variable that was never updated previously now works too. Awesome stuff! – Funk247 May 16 '13 at 14:32
Please not than instead of using 'document' as delegate, you should use closest static parent of .clonedInput elements. By static i mean a container wich won't be added/removed dynamically from the DOM – A. Wolff May 16 '13 at 14:34
Hmm writing to the results div is giving me issues still since Im using that variable to decide which div recieves the results rather than targeting it dynamically. How would you ensure the correct div recieves the data. At the moment if I update an earlier instance its the results div in the last instance that changes. – Funk247 May 16 '13 at 15:48

score 0 · Answer 2 · answered May 16 '13 at 14:22

0

$('.clonedInput').length;

This line will return the number of element with the class "clonedInput" in your page. In this case "2". You have to make a "for" so you can add event to every element.

answered May 16 '13 at 14:22

Ben

28
6

I thought so, but on page load where there is only one element in place it will only be set to 1. Which is why its the only on that works. I'll go look into for loops now :D – Funk247 May 16 '13 at 14:24

Jquery, targeting specific instances of cloned HTML for php search and results

2 Answers2