embed swf in jquery ui modal dialog - javascript

I'm embed a swf into jquery ui modal dialog, when i open the dialog swf played, and when i close dialog, and reopen dialog without refresh the page, the swf did not loaded from the first.
I want swf reopened from the first when i close and open the dialog
this is the code of dialoge:
$( "#quiz" ).dialog({
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
width: 750,
height:350
});
$( "#quiz-link" ).click(function( event ) {
$( "#quiz" ).dialog( "open" );
event.preventDefault();
});
});

Try rebuilding the HTML of the dialog each time you open/close it. I think you're just showing & hiding it currently, so it never resets.
Try out something like this instead:
$( "#quiz-link" ).click(function( event ) {
// create a clone of your dialog
var quiz_clone = $( "#quiz" ).clone().appendTo(body);
quiz_clone.dialog({
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
width: 750,
height:350
});
// destroy the clone when it's closed
quiz_clone.on('close', function() {
quiz_clone.dialog( "destroy" ).remove();
});
// show the clone
quiz_clone.dialog( "open" );
event.preventDefault();
});

$("#quiz").dialog({
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
width: 750,
height:350,
close: function(){
$("#quiz").html(document.getElementById('quiz').innerHTML) ;
}
});
// Link to open the dialog
$( "#quiz-link" ).click(function( event ) {
$( "#quiz" ).dialog( "open" );
event.preventDefault();
});

Related

Stop javascript from executing on page load and execute from ASP.NET codebehind

First; I'm trying to do two things in my ASP.NET / JavaScript code.
1) open a jQuery dialog from ASP.NET codebehind. (Works only when the javascript also executes on startup)
2) stop the same javascript/jQuery dialog as mention in 1) from showing on every pageload.
So the code below works great, but executes on page load which I try to stop. In addition this format (without function name) won't let me call the function from codebehind if I understand this How can I prevent this jQuery function from being executed on every page load? correctly:
$(function() {
$( "#dialogConfirm" ).dialog({
resizable: false,
height:180,
width: 500,
modal: true,
buttons: {
"Delete": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
});
and this doesn't work (just shows the div on the page and not as a jQuery dialog):
$(function showConfirmDialog() {
$( "#dialogConfirm" ).dialog({
resizable: false,
height:180,
width: 500,
modal: true,
buttons: {
"Delete": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
});
The only difference is the lack of function naming in the first.
So, can anyone point me in the right direction as to how to just make a script that I can call from codebehind that won't execute on page load?
Add a function with a name like "showDialog" in your aspx page.
function showDialog(){
$( "#dialogConfirm" ).dialog({
resizable: false,
height:180,
width: 500,
modal: true,
buttons: {
"Delete": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
}
Then call it from your codebehind using the function name:
ScriptManager.RegisterStartupScript(this, typeof(Page), "", "showDialog", true);
Change your js function to this:
function ShowDialog() {
$( "#dialogConfirm" ).dialog({
resizable: false,
height:180,
width: 500,
modal: true,
buttons: {
"Delete": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
}
Then in your .cs file, put this in the Page_Load
if (IsCallback)
{
ClientScript.RegisterStartupScript(GetType(), "Javascript", "javascript:ShowDialog();", true);
}

Trigger a javascript function

I want to trigger a dialog modal-message script inside a yes-no logic.
Currently it works in a onclick event. Example: http://jqueryui.com/dialog/#modal-message
I want this to execute automatically (without any click) if my logic is true.
Example:
if Logic is true Then Execute
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
Any idea?
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
if ( condition )
$( "#dialog-message").dialog('open');
});
</script>
That's how you can call it with a condition.
Why not
<script>
var myFunc = $(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
$(document).ready(function() {
// Edit after comments
$(document).on('some-selector', 'some-event', function() {
if (/* your logic is true */) {
myFunc();
}
}
});
</script>

jquery dialog add button after ajax call

I have a dialog window that has some confirmation stuff in it as the result of a form submit:
$('#newUserDialog').dialog({
autoOpen: false,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
alert(result);
$('#newUserDialog').html('User has been built');
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
when the user clicks complete, it fires off the ajax call and does checkdata.php stuff. when that is complete I want to remove "Complete" and "Cancel" and add a button "Continue". The continue button will reload the page. how can i accomplish this?
currently in this code, it works as desired but if the user doesn't like what he sees in confirmation window before he clicks Complete, if he clicks cancel, it reloads page. I only want to reload page after the ajax call.
You can use following for adding new button in ajax callback;
var buttonSet = $('#newUserDialog').parent().find('.ui-dialog-buttonset');
var newButton = $('<button>Continue</button>');
newButton.button().click(function () {
window.location.reload(true);
});
buttonSet.html(newButton);
You can see demo here: jsfiddle
<script>
var myModalExample;
$(function() {
myModalExample = $( "#newUserDialog" ).dialog({
autoOpen: true,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
myModalExample.dialog({ buttons: [ { text: "Continue", click: function() { $( this ).dialog( "close" ); } } ] });
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>

Loading bar while submitting jquery ajax post, don't show up

I'm using jQuery UI dialog modal form.
All works great, but I send an ajax post, so I added this code:
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 500,
width: 550,
modal: true,
buttons: {
"Create an account": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
if ( bValid ) {
$.ajax({ url: 'about.php',
data: {name: name.val(), email: email.val()},
type: 'post',
async: false
});
}
}
}
});
The $.ajax part is what I added.
I want to show a Loading bar while processing the post, I added this code:
$('#progress')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
But it doesn't work, my post goes to a php script which one have 2 seconds waiting time.
It just don't show the #progress div, so the .hide is working.
Also, for example if I add $( "#dialog-form" ).dialog({ hide: "slide" }); before the $.ajax it doesn't work, it hides once all button function is finished.
Thanks.
If your #progress div is only show during this ajax call, why don't you put the show/hide action on your button action ?
Like this :
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 500,
width: 550,
modal: true,
buttons: {
"Create an account": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
if ( bValid ) {
// show before ajax call
$('#progress').show();
$.ajax({ url: 'about.php',
data: {name: name.val(), email: email.val()},
type: 'post',
async: true,
complete: function() {
//hide on complete
$('#progress').hide();
}
});
}
}
}
});
Hope this will help.

JQuery UI Multiple Dialog Issue

I have functionality where I dynamically create Dialog. Some time I require Modal or Confirm Dialog
So I created to Function
function createDialogWithOutClose()
{
jQuery('#divPopup').dialog('destroy');
var dialog = jQuery('#divPopup').dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(event, ui){
jQuery('body').css('overflow','hidden');
}
});
jQuery('#divPopup').dialog('open');
}
and
function createConfirmDialog(url,params)
{
jQuery('#divPopup').dialog('destroy');
var dialog = jQuery('#divPopup').dialog({
autoOpen: false,
resizable: false,
modal: true,
show: "blind",
hide: "explode",
open: function(event, ui){
jQuery('body').css('overflow','hidden');
},
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
jQuery.ajax({
type: "POST",
url: url,
data: params
});
},
Cancel: function() {
jQuery( this ).dialog( "close" );
}
}
});
jQuery('#divPopup').dialog('open');
}
Problem here is when I give call to this function, It opens previously opened Dialog.
I guess previous instance is not get removed.It doesnt dynamically create Dialog
Any solution??
Have a look at http://docs.jquery.com/UI/Dialog/dialog#method-destroy
jquery: How to completely remove a dialog on close
http://groups.google.com/group/jquery-ui/browse_thread/thread/4f9804ccb01c1bc8/5b1971d1f0abf1fa?pli=1
Simply use a flag to check dialog state (close/open)
var Open = false;
$('button').click(function () {
if (!Open) {
Open = true;
$(newDiv).dialog({
close: function (event, ui) {
Open = false;
}
});
} else {
alert("Close opened dialog first");
}
});

Categories