We Keep Coding

Making jquery Dialog working between two pages

I have a dialog setup as follow
$("#myDialog").dialog({
autoOpen: true,
close: function(event, ui) {
$("#myDialog-content").html("");
$(this).dialog("destroy");
}
});
$("#myDialog").css("min-height","");
$("#myDialog-content").html("Loading...");
$.ajax({
...
success: function(response) {
$("#myDialog-content").html(response);
}
});
This working fine I load and close dialog in same page but not able to make it work properly where I move between pages.
Here is a my page flow
From source page(say PageA) I make AJAX call to load the page containing dialog div(say PageB).
Link on this page call above method to display dialog. (For first time it runs OK).
When I click close button. Dialog close and with firebug I can still see dialog div at the end with UI classes but in hidden state.
If I go back to source page (Page A) and reload the PageB.In firebug I can see two div - one originally from JSP and second one from step 3.
Now if I click button to load dialog box - It used hidden to populate new data and never use new div created by jquery. So I just have blank dialog box.
I am not sure if this is jquery Dialog issue or my page flow. One possible solution I though of is use remove in close function to remove dialog div completely but it puts burden to create this div everytime page PageB is loaded. Is there any other way or any thing I am doing wrong in this scenario?

If i understood correctly the situation, You have 2 options:
If you somehow cleaning the content of "Page B", remove the modal
then.
If you do not have the cleaning mechanism like that, just
.remove() content of modal on close
Sidenote: i would advise not to use jquery for .css and .html('Loading...'). Also, it is good to cache jquery elements in variables e.g var dialog = $("#myDialog");

Calling CSJS from within SSJS in XPages

I'm currently working on rewriting a function from a LotusScript script library in JavaScript. The LotusScript function contains both front end and back end elements -
input boxes are used to gather information from the user - so I'm wondering how best to do this. Is it possible to call a modal dialog window using csjs from within ssjs?

Here are the SSJS and CSJS commands to show/hide the dialog:
SSJS:
var comp = getComponent("serverSideId");
//To Open the dialog
comp.show();
//To close the dialog
comp.hide();
CSJS
//To Open the dialog
XSP.openDialog("#{id:serverSideId}");
//To close the dialog
XSP.closeDialog("#{id:serverSideId}");
And just for fun, SSJS that executes CSJS:
//To Open the dialog
facesContext.getViewRoot().postScript("XSP.openDialog('#{id:serverSideId}')");
//To Close the dialog
facesContext.getViewRoot().postScript("XSP.closeDialog('#{id:serverSideId}')");

Yes, have a look at the xe:dialog control. You can show and hide that dialog using SSJS.

have you tried this?
view.postScript("XSP.openDialog('#{id:dialog1}');");

Display a css popup before form is submitted

What I want is to display a jQuery dialog like "Items added to your Shopping cart"
I can do this with a single submit button but when you have multiple buttons on the same page, the onclick function is gettting confused.
Also, I would like the dialog button to show for some time, then when the dialog is closed, only then should the form be submitted
I have a live webpage at http://www.partydecorationsonline.co.uk/NewProducts.asp?subcat=2133

Use good library Fancybox for Popup Window or use other.

you could simply use this code in your asp button onclientclick:
onclick="return confirm('Items added to your Shopping cart')"
however you can't style this window, it's just a simple javascript alert.

you may use jquery dialog box. Then write a function like this,
//This will only submit the form after the dialog is closed.
$('#dialog_box).close(function(){
$('.form').submit();
}

Using jquery dialog
var dialog = $('#dialog').dialog({
//some configuration
...
close: function(){
if (current_form) current_form.submit();
}
});
//when submit button is clicked
var form = $('#form').submit(function(){
dialog.dialog('open');
});
Edited for multiple forms:
var current_form;
$('.form').submit(function(){
current_form = $(this);
dialog.dialog('open');
});

How to display HTML Content using window.showModalDialog()

Will I be able to display a HTML content (not a file) in a pop up window using JS?
I am trying to open a pop up window and display an user defined HTML inside this. I am trying the below, but it doesn't work.
window.showModalDialog("<p>Pop up window text</p>","resizable: yes");
Can some one suggest me how to do this? Thanks in advance.

Contrary to window.open(), the first (URL) argument of showModalDialog() is required. Thus, you can't pass it an HTML string. You can either use window.open:
var newWindow = window.open("", "newWindow", "resizable=yes");
newWindow.document.write('<p>Pop up window text</p>');
Or alternatively, use one the existing modal plugins, such as jQuery UI Dialog or Twitter Bootstrap Modals. They allow you to easily display a modal window based on the content of an existing HTML element, e.g.:
<div id="dialog">
<p>Pop up window text</p>
</div>
$('#dialog').modal(); // Twitter Bootstrap
$("#dialog").dialog({ resizable: true }); // jQuery UI

jQuery plugin SimpleModal body onclick close not working

I'm having problems getting the SimpleModal jQuery plugin to close when the body is clicked. So far, only the 'X' button works to close it with:
$('a.modalCloseImg').hide();
Here is my code for launching the modalbox. Note that #login-link is the link that opens the box and #login-form is the hidden modal box.
// launch modal box
$("#login-link").click(function(){
$("#login-form").modal();
});
I've tried adding
$("#login-form").modal(overlayClose:true);
but it doesn't seem to be working. (FYI that parameter is per the documentation of the SimpleModal box as seen here.

Try launching the modal box with an additional parameter, like this:
// launch modal box
$("#login-link").click(function(){
$("#login-form").modal({ overlayClose: true });
});
you forgot additional {}.