I have some wizard-like pages in my application, its keeping state while navigating between small steps, the navigation is not linear and everything works well without one line of javascript in a "progressive enhancement" way.
In my application, to users with javascript enabled, i want turn flow above in a set of dialogs by loading each complete step in a dialog by ajax, process the action of step and close dialog, each step will have the own script embedded to execute on dialog load and intercept some step ui events.
The problem is that JQuery UI Dialog want create action buttons i cant give the button creation to plugin, its ask for buttons metadata and i already have complete functional page with form, buttons, data entry and everything i need to do my work, its working, its done, i Only want load it on a Dialog that manage window specific things to me, like Title bar, Drag by title bar, Close button on title bar, Close event to my cleanup, stretch to fit my dialog content, load in modal mode with overlay.
I cant find a way to intercept the button click inside dialog by script embedded on dialog step, the button inside dialog must post data by ajax but it will post togheter the main page in a normal page posting.
I found some very old plugins but i like JQuery UI, its simple and looks good, looking for something without iframe, i read about:
boxy:
http://onehackoranother.com/projects/jquery/boxy/tests.html
simplemodal:
http://www.ericmmartin.com/projects/simplemodal/
jqModal:
http://dev.iceburg.net/jquery/jqModal/
@liho1eye : putting comments now
Edit: With help of @liho1eye i reach it:
//-------------------------------------------------
var url_trg = '@Url.Content("~/Teste/opendialog")';
var url_prl = '@Url.Content("~/Images/waitplease.gif")';
//-------------------------------------------------
function onloadpartial() {
/*setupDialog("#opendialog", "#tempcontent", "section[id='main']", url_trg);*/
configDetailDialog(url_trg, "#tempcontent", "section[id='main']", "Detail", "#opendialog");
}
//-------------------------------------------------
function configDetailDialog(trgurl, containerselector, contentselector, dlgtitle, buttonselector) {
//-------
$(document).ajaxError(
function (event, jqXHR, ajaxSettings, thrownError) {
alert('[event:' + event + '], ' +
'[jqXHR:' + jqXHR + '], ' +
'[jqXHR_STATUS:' + jqXHR.status + '], ' +
'[ajaxSettings:' + ajaxSettings + '], ' +
'[thrownError:' + thrownError + '])');
});
//-------
$.ajaxSetup({ cache: false });
//-------
$(buttonselector).click(function (event) {
event.preventDefault();
openAjaxDialog(trgurl, containerselector, contentselector, dlgtitle);
});
//-------
}
//-------------------------------------------------
function openAjaxDialog(trgurl, containerselector, contentselector, dlgtitle) {
$.ajax({
type: 'GET',
url: trgurl,
context: document.body,
success: function (data) {
var dlg = $(data).find(contentselector);
$('#dlgdetail').remove();
$(containerselector).append("
");
$('#dlgdetail').append(dlg);
$('#dlgdetail')
.css("border", "solid")
.dialog({
autoOpen: true,
modal: true,
title: dlgtitle,
open: function () {
configDetailDialog();
},
close: function (event, ui) {
$('#dlgdetail').remove();
}
})
.find("form").submit(function (event) {
alert('clicou ' + event);
var form = $(this);
var faction = "http://" + window.location.host + trgurl;
var fdata = form.serialize() + "&action:savedialog=savedialog";
$.ajax({
type: "POST",
url: faction,
data: fdata,
success: function (result) {
alert(result);
}
});
event.preventDefault();
$('#dlgdetail').dialog('close');
});
}
});
}
//-------------------------------------------------
-------------------------------------------------
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
