[jQuery] One ajax post works, but one does not... kind of...
Okay, here's basic run down of this feature so that you know what you
are actually looking at:
1) There is a form with a list of checkboxes that users can select.
2) When the user submits the form, my js file is supposed to ajax a
post with an array of these checkboxes to the page itself. (We have
to do this because of a crazy mvc set up that we have, and I have to
pass the variable "action" with the value "add_shows".)
However, what is happening is there is an error being generated
([Exception... "Component returned failure code: 0x8000ffff
(NS_ERROR_UNEXPECTED) [nsIDOMLocation.protocol]" nsresult: "0x8000ffff
(NS_ERROR_UNEXPECTED)" location: "JS frame :: (the path to my jquery
1.3.2 js file) :: anonymous :: line 12" data: no]
[Break on this error] (function(){var l=this,g,y=l.jQuery,p=l.....each
(function(){o.dequeue(this,E)})}});), but it actually works. Well, it
kind of works. It looks like the request ends up being a get rather
than a post because all of the values are appended to the end of the
url, which is causing a bug with a different feature that depends on
the url being clean. Please, anyone, for the love of jQuery... Help?
the HTML:
<form id="selected_shows_form">
<fieldset id="selected_shows_fieldset">
<button class="scroll_left">Left</button>
<div id="selected_shows_container">
<ul id="selected_shows_list">
<li>
<input type="checkbox" name="shows[]" value="11307"
style="display: none;"/>
<label for="11307">Item 1</label>
</li>
</ul>
</div>
<button class="scroll_right">Right</button>
</fieldset>
<fieldset id="show_adder_buttons">
<input type="hidden" name="action" value="add_shows"/>
<button id="add_selected_shows">Add Selected Shows</button>
<button id="cancel">Cancel</button>
</fieldset>
</form>
the JS:
jQuery('#add_selected_shows').click(function(){
var showArray = jQuery
('#selected_shows_list .selected :checkbox').each(function(){
jQuery(this).val();
});
jQuery.post(window.location, {action:'add_shows', 'show[]':
[showArray]}, function(){
window.location.reload(true);
});
});
Here's the really weird thing though: this other ajax post works just
fine (the post to delete added items):
the HTML:
<li id="11307">
<a href="#">Item 1</a>
<a class="wl-remove">X</a>
</li>
the JS:
jQuery('a.wl-remove').click(function(){
var showID = jQuery(this).parent().attr('id');
jQuery.post(window.location+'?action=remove_show&show='+showID, {},
function(){
window.location.reload(true);
});
return false;
});