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");

MapBox / Leaflet / maybe jQuery - binding a function to a popup that is called on click

I'm trying to create an empty popup in the MapBox API that isn't filled until it is clicked. Using jQuery as well, I tried:
L.marker([coordinates]).bindPopup("").on('click', function(){alert('Hello StackOverflow'!)}));
This works, every marker I click on opens a friendly JavaScript alert. However, instead of an alert, I'd much rather call the popup's setContent() and update() methods. However, this does not work:
L.marker([coordinates]).bindPopup("").on('click', function(){ this.setContent("Hello StackOverflow!"); this.update();}));
I get an error message that this.setContent is not a function.
Anyone know what to do? I'm trying to call an ASP.NET controller method, which should return the HTML and JavaScript I need.

Found it myself. What I did wrong in my code was trying to set the content of the marker itself, while I was supposed to set the content of the popup bound to it. This worked for me:
var popup = L.popup().on('open', function () { this.setContent("Hello StackOverflow!"); this.update(); });
markerArray.push(L.marker(coordinates).bindPopup(popup));

How to add an onclick function to an element in opener window?

I work on a webpage that opens a popup with a picture selector. The pictures added to a selection list are immediately cloned as thumbnails to opener window - that part works fine.
Problem occurs when I try to make these thumbnails clickable, like this:
opener.document.getElementById("someid").onclick = function(){ alert("bam!"); }
So far I only managed to have this working when a popup window is still opened (instead of plain alert(...) I used opener.window.alert("bam!")). However, when I close popup window, clicking the thumbnails results in errors.
Anyone out there who had similar problem and got it working? Thanks in advance.
UPDATE:
OK, I found not the prettiest solution, but so far it works. I had to declare extra function in opener window:
function addbam(id){
document.getElementById(id).onclick = function(){ alert("bam!"); }
}
And in a popup window:
opener.addbam("someid");
If this solution survives multi-browser test, it will stay with me, however I'm pretty sure it should be possible to remove "wrong" scope from such onclick declarations in much straightforward manner.
Thanks guys, your suggestions got me thinking more productive way.

If you use jquery:
$("#someid").on('click', function () {
alert("bam");
});
or without jquery:
---------EDIT----------
//you put your element in a variablle
var div = document.getElementsByTagName("div")[0];
/*you add an event listenner to your variable, when click is triggered, it runs what's inside the brackets*/
div.addEventListener("click", function (evt) {
alert("BAM!");
});
here's an example made just for you :)
http://jsfiddle.net/YDFLV/50/

how to create a ckeditor into a jqueryui dialog?

I'm trying to use a CKEDITOR instance into a jqueryUI dialog.
$('[name=dialog]').dialog();
$('[name=content]','[name=dialog]').ckeditor();
It works fine until i want to use the dialogs from the editor (f.e. dialog to set an URL, dialog to create a table)
it's like i can't click on that dialog..
i was checking for the z-index (i think that is the problem) but nothing, it is the highest level and nothing, i can not use those dialogs.
Anybody knows why is this for?

I know this post is a little late, but maybe it'll help the next guy.
To create a ckeditor instance in a dialog, you have to load the dialog first and then create ckeditor like this:
$("#mydialog").dialog({
open: function() {
$("#mytextarea").ckeditor(); //LOAD IT HERE
},
close: function() {
//you might want to destroy the instance once the dialog closes
//to keep things clean
CKEDITOR.instances["mytextarea"].destroy();
},
autoOpen: true, ... more options
});
Hope this helps.

Its easy, just the next code ( sorry for the formatting, but I'm replying using my mobile )
$("<div><textarea id='foo'></textarea></div>").dialog({});
CKEDITOR.replace("foo");

A few jQuery questions

First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};

Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});