[jQuery] jqModal callback
Hello,
I am in the process of writing some scripts that makes use of JqModal (<a href="http://dev.iceburg.net/jquery/jqModal/">http://dev.iceburg.net/jquery/jqModal/</a>).
What I have to do is the following:
The web page contains numerous ajax forms that have as their target a modal div .
If the user clicks on the submit button, the response is inserted in the div and shown.
Some of the forms contain a hidden select element.
Once the user clicks on one of those forms' submit button, a dialogue is presented (using the very same div).
It shows the selects contents as a radio list. Once the user has checked a radio input, the corresponding option in the select is selected and the form is ajax posted as described before.
(Or could this be done simpler?)
But: the confirm method does not break processing: I override confirm, but it is simply ignored - the confirmation dialogue blinks only for the fraction of a second and the form is submitted as if it would not have been there.
var options = {
target: '#modalWindow',
beforeSubmit: handleOptions,
success: function(){
showModal();
showCartInfo();
}
};
$(function() {
$('form.buyarticle').ajaxForm(options)
});
function showModal(){
return $('#modalWindow').jqmShow();
}
function showModalWithContent(html){
return $('#modalWindow').html(html).jqmShow();
}
function hideModal(){
return $('#modalWindow').html('').jqmHide();
}
function handleOptions(formData, jqForm, options)
{
var currentSelect = $(jqForm).find("select");
if (currentSelect!=null && currentSelect.length > 0)
return confirm(makeSelectMessage(currentSelect), callback_SelectResult);
else
return true;
}
function confirm(select,callback) {
$(showModalWithContent(makeSelectMessage(select)))
.end()
.find(':submit:visible')
.click(function(){
callback(select);
hideModal();
return false; // to prevent the form from posting (does not work...)
});
}
function callback_SelectResult(select){
var result = $("#modelWindow :input:checked").eq(0);
select.selectedIndex = result;
}
var currentSelect;
function makeSelectMessage(select)
{
var msg ="<p class='textblock'>Este produto vem com estas variações:";
msg += "<form method='post'>";
msg += "<ul class='textblock'>";
var i = 0;
$(select).find("option").each(function(){
msg += "<li>";
msg += "<input type='radio' value='" + i + "' name='option' id='option_" + i + "'";
if (i==0)
msg += " checked='checked'";
msg += " /><label for='option_" + i + "'>";
msg += $(this).attr("value");
msg += "</label></li>";
i++;
});
msg += "</ol>"
msg += "<input type='submit' value='Ok'/>";
msg += "</form>";
return msg;
}
Anyone with more jq experience can tell me what I am doing wrong?<br clear="all">
--
Jan
___________________
<a href="mailto:jan@limpens.com">jan@limpens.com</a>
<a href="http://www.limpens.com">www.limpens.com</a>
+55 (11) 3082-1087
+55 (11) 3097-8339