I'm not very experienced with JQuery, great with PHP, HTML etc but I'm so-so with AJAX and I'm having trouble using mutliple instances of JS functions.

 

Namely I've attached a "change" event to all dropdown selects on a page with class="star-dropdown". Adjacent to the dropdown is an intput with an ID value in and another div with id="star-message-ID". In the HTML below I've used "7" as an example.

 

MY AJAX definitely works once. Regardless of which dropdown I change the the highest message area up the page source shows the message of the highest drop down up the page. I would have thought that since I am capturing the id of the .star-widget-id closest as a variable it would be used but it isn't.

 

I imagine the problem is with the class selectior since I would like this to be used whether there are 1 or 999 of these on the page and I don't want to have to code an event for each one!!

 

 

jQuery(document).ready(function(){

   jQuery(".star-dropdown").change(function(event){

    var widgetid = jQuery(".star-dropdown").parent().children(".star-widget-id").val();

    jQuery.post(
	    MyAjax.ajaxurl,
	    {action : "ajax-submit", star_dropdown : widgetdd, star_id : widgetid},
	    function(data){jQuery("#star-message-" + widgetid + "").replaceWith( data );}
    );

   });

});

 

<aside>
<form method="post" action="#">
   <input type="hidden" class="star-widget-id" name="star_widget_id" value="7">
   <select class="star-dropdown" name="star_dropdown">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
   </select>
</form>
<div id="star-message-7"></div>
</aside>

I am not sure what you are trying to do but this:

 

var widgetid = jQuery(".star-dropdown").parent().children(".star-widget-id").val();

 

Will return the value of 7.

It can also be written like this

 

var widgetid = jQuery(".star-widget-id").val();

 

With this you are removing the entire div and replacing it with 7 so when you submit again it wont be able to find #star-message-7

try replacing:

 

function(data){jQuery("#star-message-" + widgetid + "").replaceWith( data );}

 

with this

 

function(data){jQuery("#star-message-" + widgetid + "").html( data );}

 

You could put the code in here: http://jsfiddle.net/. Will make it easier to troubleshoot

It can also be written like this

var widgetid = jQuery(".star-widget-id").val();

 

How will the script know which of the many classes of .star-widget-id to access? See example below please.

 

 

With this you are removing the entire div and replacing it with 7 so when you submit again it wont be able to find #star-message-7

 

I'm not replacing it with 7 I'm replacing it with the return data from the AJAX call which takes "7" and returns a bunch of HTML that I want wrapped in what is the example of "div#star-message-7". Originally the return re-wrapped the HTML in a div exactly the same as the one it was replacing whereas with the code below I don't need to do that anymore. Thank you very much. Still have a problem though.

 

 

try replacing:

 

function(data){jQuery("#star-message-" + widgetid + "").replaceWith( data );}

 

with this

 

function(data){jQuery("#star-message-" + widgetid + "").html( data );}

That is very useful to know, as I say I am a novice with jQuery, this has taught me something I didn't knew about.

 

Still not quite sorted yet.

 

If we take this to the extreme example, we do this:

<?php for ( $i = 1; $i <= 101; $i++ ) { ?>
<aside>
<form method="post" action="#">
    <input type="hidden" class="star-widget-id" name="star_widget_id" value="<?php echo $i; ?>">
    <select class="star-dropdown" name="star_dropdown">
		    <option value="one">One</option>
		    <option value="two">Two</option>
		    <option value="three">Three</option>
    </select>
</form>
<div id="star-message-<?php echo $i; ?>"></div>
</aside>
<?php } // END for loop ?>

 

Then there are many dropdowns with class="star-dropdown", all which have a change event monitored on them, which is why I thought going upto the parent() form of the dropdown being clicked then down into the child <input class="star-widget-id"> I would have the ID in the hidden input next to the dropdown but I don't get that, whichever of the 101 dropdowns I click I only get the ID of the first 1 and thus only ever the first message area gets updated (since it is found by its ID with the number in).

 

I can update the first message area but I can not update the one adjacent to the dropdown. Perhaps I've said the problem a little better now? Sorry for not being more exact.

 

You've certainly made things easier, so thanks again for that, I'm still a little stuck though.

Sorry but I have no clue what you are trying to do... sorry I thought I did but I was mistaken.

 

Is there a live example of this out there somewhere that you can give a link too?

this line:

var widgetid = jQuery(".star-dropdown").parent().children(".star-widget-id").val();

 

should be:

var widgetid = jQuery(this).parent().children(".star-widget-id").val();

 

In your original code,in the event handler, you're finding all of the selects with a class of 'blah'. Simply put, it means you're working with the first select on the page(no matter what select has changed) You don't want all of the selects with a class of blah, just the one that has the change event fired.

jQuery(this) inside an event handler will refer to the element that was 'clicked', 'changed' etc. This means that when the function traverses the DOM to find the parent etc, it will start from the relevant select, not from the first one on the page.

this line:

var widgetid = jQuery(".star-dropdown").parent().children(".star-widget-id").val();

 

should be:

var widgetid = jQuery(this).parent().children(".star-widget-id").val();

 

In your original code,in the event handler, you're finding all of the selects with a class of 'blah'. Simply put, it means you're working with the first select on the page(no matter what select has changed) You don't want all of the selects with a class of blah, just the one that has the change event fired.

jQuery(this) inside an event handler will refer to the element that was 'clicked', 'changed' etc. This means that when the function traverses the DOM to find the parent etc, it will start from the relevant select, not from the first one on the page.

 

Brilliant! Brilliant! Brilliant!

 

+1 and may you have the best of luck for the whole of tomorrow!

 

Thank you!

Edited August 11, 201213 yr by Allstar

No probs, I'm looking forward to tomorrow now