Trigger AJAX with jquery click event

Question

I have two drop down menus, one of which I am trying to replace with radio buttons using jquery. The second box is updated via AJAX with new options any time the user makes a selection in the first drop down. I have successfully generated radio buttons that change the values for the first drop down but when the user updates the first drop down menu using the radio buttons, it no longer effects values in the second drop down boxes. I am not great with AJAX or JS and I can't figure out how to trigger the AJAX load when the user selects one of radio buttons.

I apologize in advance for the wall of code, Im not sure what is important so I included everything that seemed relevant. If you want to see the page in question you can see it here.

The code I am using to generate radio buttons looks like this:

 $(function(){
    $("#options-1 option").each(function(i, e) {
        $("<input type='radio' name='r' />")
        .attr("value", $(this).val())
        .attr("checked", i == 0)
        .click(function () {
            $("#options-1").val($(this).val());
        })
        .appendTo("#r");
       $("#options-1").change(function(){
       $("input[name='r'][value='"+this.value+"']").attr("checked","checked");
});
});
});

$("#options-1").change(function(){
    $("input[name='r'][value='"+this.value+"']").attr("checked","checked");
});

The HTML for the drop downs look like this:

<form action="http://example.com/dev3/?page_id=5" method="post" class="shopp product validate">
<div id="r"></div>

<ul class="variations">
<li> 
<label for="options-1">Framing</label> 
<select name="products[1][options][]" class="category-catalog product1 options" id="options-1"><option value="1">Print Only (Unframed)</option> 
<option value="2">Professionally Framed</option> 
</select><li> 
<label for="options-2">Size</label> 
<select name="products[1][options][]" class="category-catalog product1 options" id="options-2"><option value="3">12 x 8</option> 
<option value="4">24 x 36</option> 
</select></li> 

</ul>

<p><input type="hidden" name="products[1][product]" value="1" /><input type="hidden" name="products[1][category]" value="catalog" /><input type="hidden" name="cart" value="add" /><input type="submit" name="addtocart"  value="Add to Cart" class="addtocart" /></p>

</form>

The AJAX looks like this:

<script type='text/javascript' src='http://example.com/dev3?sjsl=colorbox,shopp,catalog,cart&amp;c=1&amp;ver=98239bb061a58639408323699680ad0e'></script> 
<script type='text/javascript'> 
/* <![CDATA[ */
var ShoppSettings = {
    ajaxurl: "http://example.com/dev3/wp-admin/admin-ajax.php",
    cp: "1",
    c: "$",
    p: "2",
    t: " ",
    d: ".",
    g: "3",
    nocache: "",
    opdef: ""
};
    var pricetags = {};
jQuery(window).ready(function(){ var $ = jqnc(); 
        pricetags[1] = {};
    pricetags[1]['pricing'] = {"18770":{"p":10,"i":false,"s":false,"t":"Shipped"},"25785":{"p":21,"i":true,"s":"1","t":"Shipped"},"23510":{"p":20,"i":false,"s":false,"t":"Shipped"}};
    pricetags[1]['menu'] = new ProductOptionsMenus('select.category-catalog.product1.options',true,pricetags[1]['pricing'],0);

});
/* ]]> */
</script>

I tend to have a lot more success binding event handlers to new elements after adding them to the DOM. — sje397
– sje397, Commented Oct 21, 2010 at 2:53
OK I moved the binding event handler, any other suggestions? Do you know how the update event is being triggered? — Thomas
– Thomas, Commented Oct 21, 2010 at 4:34

Rama · Accepted Answer · 2010-10-21 03:00:53Z

1

When you change the value of a Combo Box via js, it doesn't trigger the onChange function nor onClick and so on.

You'll have to use the same code you use to update Combo 2 with Combo 1 where you update Combo 1 with the Radio.

I suggest to place that code inside another function, and call that function from both places.

Hope it helps.

answered Oct 21, 2010 at 3:00

Rama

4291 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thomas Over a year ago

Yeah, I think I follow what your saying, my big issue is that I didn't create the AJAX script and Im not really sure how it is updating. I looked at the code and there doesn't seem to be any onEvent handlers beside the one that I created for the radio buttons. Any idea how the ajax is getting triggered?

Rama Over a year ago

Yup, the code isn't clear at all, if you could give more information about what you are using, how do you fill the combo boxes? if the options you want to switch within are all in the html, that is not even ajax, that is pure client side, html with js... And can't you use a Radio list directly instead of transforming a combo?

Thomas Over a year ago

Its a commercial plugin that I can't modify. For the record, its an e-commerce plugin for wordpress called Shopp. Thus, I can't replace the HTML. It might not be an AJAX thing - I just assumed it was because it introduces new information into the drop downs without reloading the page. You can see the script in action here: designvillain.com/dev3/?page_id=4&shopp_pid=1 The options for the drop downs are pulled out of a db (I assume), they are inserted through the CMS (wordpress). To be honest, Im not sure how it works - this is kind of a rush job and I haven't had a chance to study it.

Collectives™ on Stack Overflow

Trigger AJAX with jquery click event

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related