[jQuery] jQuery form. strange problem
I'm using the jQuery Form Plugin (http://malsup.com/jquery/form/) and
I have run into what think is an interesting problem. I haven't been
able to figure it out yet!
The code below sets up two ajax forms which are hidden until a user
clicks on a certain link. Once they click on this link, the div with
id=selectedItem displays a message and a form. When they submit the
form, the form is hidden and another message is displayed.
<b>Here's the problem:</b> it only works once per page refresh. If I
click the links to show both of these forms below only the first one I
clicked on will display the message and form. I stepped through the
code and it seems to be running. The line: $
('#form_containerXXXXX').show('fast'); seems only to work once per
page refresh.
Anyone know what's going on here? Thanks!
-Steve
// jQuery code
$("#snap10789").mouseover(function(){
$("#selectedItem").find("span:last").remove();
$("#selectedItem").append($('<span id="span10789"><a href="http://
www.alibris.com/search/detail.cfm?S=R&bid=9560124932&cm_mmc=shopcompare-_-base-_-movies-_-na"
title="">The Grudge</a><br /><img src="http://images.alibris.com/cover/
u26405gyhaz.jpg" height="125" /><br />Available online from Alibris
for 1.99 USD.<br />(<a href="#" title="add_watch">watch</a> / <a
href="#" title="delete">delete</a>) <br /> (<a href="#"
title="bought">I bought this!</a>)</span>'));
$("#span10789 a").click(function(){
var func = $(this).attr("title"); // add_watch, delete, bought, ''
if (func != '') { // they're following an offer link if func == ''
$("#selectedItem").find("span:last").remove();
}
var oid = 10789;
var uid = 1;
$.post("ajax.php", { func: func, oid: oid, uid: uid},
function(data){
// process data differently based on func
if (func == 'add_watch') {
// display message
var message = data.split("^");
var message_text = message[0];
var message_state = message[1];
alert("Appending '"+message_text+"' to message_container");
var new_span = '<span>'+message_text+'</span>';
$("#message_container").append($(new_span));
// set up form if message!=already_watching
if (message_state != 'already_watching') {
alert("Next line should show form");
$('#form_container10789').show('fast');
var options = {
target: '#selectedItem',
success: 'hideform10789'
};
$('#data_form10789').ajaxForm(options);
function hideform10789() {
alert("Next line should hide form");
$('#form_container10789').hide('slow');
};
}
//add_item_to_carousel('#watched', num_wl_items);
//$('#watched').change(add_item_to_carousel);
}
}); // end pmst
}); // end a onclick
}); // end mouseover
$('#form_container10631').hide();
$("#snap10631").mouseover(function(){
$("#selectedItem").find("span:last").remove();
$("#selectedItem").append($('<span id="span10631"><a href="http://
www.sysqs.com/itemdetails.php?isbn=093624590125&marketplace=froogle"
title="">Jagged Little Pill</a><br /><img src="http://216.127.84.110/
largeimage_cache/093624590125.jpg" height="125" /><br />Available
online from SysQs for 8.35 USD.<br />(<a href="#"
title="add_watch">watch</a> / <a href="#" title="delete">delete</a>)
<br /> (<a href="#" title="bought">I bought this!</a>)</span>'));
$("#span10631 a").click(function(){
var func = $(this).attr("title"); // add_watch, delete, bought, ''
if (func != '') { // they're following an offer link if func == ''
$("#selectedItem").find("span:last").remove();
}
var oid = 10631;
var uid = 1;
$.post("ajax.php", { func: func, oid: oid, uid: uid},
function(data){
// process data differently based on func
if (func == 'add_watch') {
// display message
var message = data.split("^");
var message_text = message[0];
var message_state = message[1];
alert("Appending '"+message_text+"' to message_container");
var new_span = '<span>'+message_text+'</span>';
$("#message_container").append($(new_span));
// set up form if message!=already_watching
if (message_state != 'already_watching') {
alert("Next line should show form");
$('#form_container10631').show('fast');
var options = {
target: '#selectedItem',
success: 'hideform10631'
};
$('#data_form10631').ajaxForm(options);
function hideform10631() {
alert("Next line should hide form");
$('#form_container10631').hide('slow');
};
}
//add_item_to_carousel('#watched', num_wl_items);
//$('#watched').change(add_item_to_carousel);
}
}); // end pmst
}); // end a onclick
}); // end mouseover
<!-- html -->
<div class="content" id="selectedItem">
<div id="message_container"><!-- this will get filled in via js --></
div>
<!-- these forms should be hidden unless prompting the user for
information -->
<div id="form_container10789">
<form id="data_form10789" action="ajax.php" method="post">
<input type="text" id="the_data" name="the_data" value="my alert
price (e.g. 52.00)" onFocus="clearText(this)" />
<input type="hidden" name="func" value="update" />
<input type="hidden" name="uid" value="1" />
<input type="hidden" name="oid" value="10789" />
<input type="submit" value="Submit alert price" />
</form>
</div>
<div id="form_container10631">
<form id="data_form10631" action="ajax.php" method="post">
<input type="text" id="the_data" name="the_data" value="my alert
price (e.g. 52.00)" onFocus="clearText(this)" />
<input type="hidden" name="func" value="update" />
<input type="hidden" name="uid" value="1" />
<input type="hidden" name="oid" value="10631" />
<input type="submit" value="Submit alert price" />
</form>
</div>