Develop Reference

Two separate $.ajax call "kill" each other on click function

So here is the problem:
I have two click event in one page. The first when you click on a thumbnail picture it's open a modal which shows a bigger image like Instagram on PC (I make an Instagram clone for practicing btw). The other button is for show more image.
The problem is, I use ajax for both click to get some variable and pass to the php. When the page loaded it's shows only 3 image and when I clicked one of them It's shows the right image in the modal but when I click show more it shows 3 more and after when I clicked on the thumbnail it's stucked. I mean its shows only one picture doesn't matter which thumbnail i clicked so the ajax request not runs again. I hope you can understand the problem and can help me. (sorry for my English).
So here is the code:
This is the ajax calling function:
function ajaxShow(urls,datas,element){
$.ajax({
url: urls,
data: {datas: datas},
cache:true,
}).always(function(result){
console.log("done");
element.html(result);
});
}
And these are the click events:
$(document).ready(function(){
//Open picture in modal
var pic = $(".pics");
var modalCont = $(".modal-content");
pic.on('click',function(event){
event.preventDefault();
var id = $(this).attr('data-id');
console.log(id);
ajaxShow("../php/ajax_modal.php",id,modalCont);
});
//Load more
var smbt = $(".smbt");
var limit = $(smbt).data('loaded');
smbt.on('click',function(event) {
event.preventDefault();
var cont = $("#cont");
limit += 3;
console.log(limit);
ajaxShow("../php/show_more.php",limit,cont);
});
});
In a nutshell: After I clicked on load more the modal open ajax request not run again.

Use overloaded version of .on() on document node.
$(document).on(events, selector, data, handler );
So your code should be rewritten as this:
$(document).on('click', '.pics', null, function (event) {
event.preventDefault();
var id = $(this).attr('data-id');
console.log(id);
ajaxShow("../php/ajax_modal.php",id,modalCont);
});
and
$(document).on('click', '.smbt', null, function (event) {
event.preventDefault();
var cont = $("#cont");
limit += 3;
console.log(limit);
ajaxShow("../php/show_more.php",limit,cont);
});

Add data to bootstrap modal

I have a problem here with bootstrap modals, so in back-end of my app I pull out data from SQL, and I call a JS function like this:
ScriptManager.RegisterStartupScript(this, this.GetType(), "ShowPopup",
"MailLanguageChange('" + Description + "','" + TextResult + "');", true);
And JS looks like this :
function MailLanguageChange(Name, Text) {
$('#MainContent_NewMailTemplate').modal('show');
document.getElementById("Upper_txtDesc").value = Name;
document.getElementById("TextEditorTextArea").innerHTML = Text;
}
So firebug hits break point at this function, so I am sure call of function does work, but here comes the problem, JS is trying to apply this data onto the modal, before all elements of modal are loaded.
But as I use this modal for multiple purpuses ... is there anyway to write it down, "Don't do anything until modal is shown"?
$('#MainContent_NewMailTemplate').modal('show');
As docs says, it returns to the caller before the modal has actually been shown ... how can i by pass that?
EDIT :
This is how I have also tried it
function MailLanguageChange(Name, Text) {
$('#MainContent_NewMailTemplate').modal('show');
$("#MainContent_NewMailTemplate").on('shown.bs.modal', function () {
document.getElementById("Upper_txtDesc").value = Name;
document.getElementById("TextEditorTextArea").innerHTML = Text;
});
}
CONCLUSION :
With use of logic of global variables provided by #Guruprasad Rao
I ended up just simply using
$(document).ready(function () {
document.getElementById("Upper_txtDesc").value = name;
document.getElementById("TextEditorTextArea").innerHTML = text;
});
Thank you

Use twitter-bootstrap's shown.bs.modal method as below:
$("#yourmodalid").on('shown.bs.modal',function(){
//Do whatever you want here
});
There are several other events to look into regarding modal
Update
see you are showing the modal first and then you are registering that event.. So I would suggest you below steps.
Declare 2 global variables at the top in js page.
Ex
var name,text;
Assign them values inside your function MailLanguageChange.
Ex
function MailLanguageChange(Name, Text) {
name=Name;
text=Text;
$('#MainContent_NewMailTemplate').modal('show');
}
Keep shown.bs.modal event somewhere outside the above function
Ex
$("#MainContent_NewMailTemplate").on('shown.bs.modal', function () {
document.getElementById("Upper_txtDesc").value = name;
document.getElementById("TextEditorTextArea").innerHTML = text;
});

How to determine if content in popup window is loaded

I need to set some contextData for a popup window from its parent. I try this:
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
w.contextData = contextData
//w.context data is null in the popup after the page loads - seems to get overwritten/deleted
});
});
It doesn't work, so my next thought, wait until content is loaded
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
w.onload = function() {
//Never Fires
w.contextData = contextData;
}
});
});
See this fiddle. My onload method never fires.
This works:
var some contextData = {};
$(function() {
$('#clickme').click(function() {
var w = window.open('http://jsfiddle.net');
setTimeout(function(){
if(w.someVariableSetByThePageBeingLoaded) {
w.contextData = contextData;
}
else{
setTimeout(arguments.callee, 1);
}
}, 1);
});
});
But has obvious elegance problems (but is the current work around).
I know you can go the other way (have the popup call back to a method on the opener/parent, but this forces me to maintain some way of looking up context (and I have to pass the key to the context to the popup in the query string). The current method lets me capture the context in a closure, making my popup a much more reusable piece of code.
I am not trying to do this cross domain - both the parent and popup are in the same domain, although the parent is an iframe (hard to test with jsfiddle).
Suggestions?

If you are doing this with an iframe try it this way
HTML
<button id="clickme">Click Me</button>
<iframe id="framer"></iframe>
​
Javascript
$(function() {
$('#clickme').click(function() {
$("#framer").attr("src","http://jsfiddle.net");
$("#framer")[0].onload = function(){
alert('loaded');
};
});
});​
I updated your jsfiddle http://jsfiddle.net/HNvn3/2/
EDIT
Since the above is completely wrong this might point you in the right direction but it needs to be tried in the real environment to see if it works.
The global variable frames should be set and if you
window.open("http://jsfiddle.net","child_window");
frames["child_window"] might refer to the other window
I got javascript access errors when trying it in jsfiddle - so this might be the right track
EDIT2
Trying out on my local dev box I was able to make this work
var w = window.open("http://localhost");
w.window.onload = function(){
alert("here");
};
the alert() happened in the parent window

Trigger an event in the popup from a parent

I have two windows , the second is a popup , and I want to trigger an event from the parent (the first one where I have a link to this popup).
here's a javascript code for the trigger (in the parent window's javascript code):
winPop=window.open(opts.url,opts.nom,"width="+opts.width+",height="+opts.height+",top="+opts.top+",left="+opts.left);
winPop.onload=function(){
$(winPop.document).trigger('connected', {
jid: "jid",
password: '123'
});
}
This javascript code launchs the popup and tries to trigger an event bound in popup (ready) function:
$(document).ready(function () {
$(document).bind('connected', function () {
alert("Hello , I'm here");
});
The problem is that using the previous javascript code .. the bound event is not triggered as predicted.
Thanks in advance

I had done this earlier with something like this:
var realWindowOpen = window.open;
window.open = wrappedWindowOpen;
function wrappedWindowOpen(url, name, specs, replace) {
window.open = realWindowOpen;
var windowHandle = window.open(url, name, specs, replace);
if (windowHandle)
console.log("New Popup Window created: ", {name:name});
else
console.error("New Window Failed. " + {name:name});
if (popupFnCreationNotify) {
popupFnCreationNotify(windowHandle);
popupFnCreationNotify = null;
}
window.open = wrappedWindowOpen;
}
// Calling example
var popupFnCreationNotify = function() {
console.log("I got called back");
};
window.open("my url");
Please note:
realWindowOpen always points to window.open.
I wrap the actual window.open with wrappedWindowOpen as you can see in the code.
Before calling window.open, the caller sets the popupFnCreationNotify to any callback function they wish.

Open popup and refresh parent page on close popup

I opened a popup window by window.open in JavaScript, I want to refresh parent page when I close this popup window.(onclose event?) how can I do that?
window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");

You can access parent window using 'window.opener', so, write something like the following in the child window:
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>

The pop-up window does not have any close event that you can listen to.
On the other hand, there is a closed property that is set to true when the window gets closed.
You can set a timer to check that closed property and do it like this:
var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
alert('closed');
}
}, 1000);
See this working Fiddle example!

on your child page, put these:
<script type="text/javascript">
function refreshAndClose() {
window.opener.location.reload(true);
window.close();
}
</script>
and
<body onbeforeunload="refreshAndClose();">
but as a good UI design, you should use a Close button because it's more user friendly. see code below.
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
window.opener.location.reload(true);
window.close();
});
});
</script>
<input type='button' id='btn' value='Close' />

I use this:
<script language='javascript'>
var t;
function doLoad() {
t = setTimeout("window.close()",1000);
}
</script>
<script type="text/javascript">
function refreshAndClose() {
window.opener.location.reload(true);
window.close();
}
</script>
<body onbeforeunload="refreshAndClose();" onLoad='doLoad()''>
when the window closes it then refreshes the parent window.

window.open will return a reference to the newly created window, provided the URL opened complies with Same Origin Policy.
This should work:
function windowClose() {
window.location.reload();
}
var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;​

In my case I opened a pop up window on click on linkbutton in parent page.
To refresh parent on closing child using
window.opener.location.reload();
in child window caused re open the child window (Might be because of View State I guess. Correct me If I m wrong).
So I decided not to reload page in parent and load the the page again assigning same url to it.
To avoid popup opening again after closing pop up window this might help,
window.onunload = function(){
window.opener.location = window.opener.location;};

If your app runs on an HTML5 enabled browser. You can use postMessage. The example given there is quite similar to yours.

Try this
self.opener.location.reload();
Open the parent of a current window and reload the location.

You can reach main page with parent command (parent is the window) after the step you can make everything...
function funcx() {
var result = confirm('bla bla bla.!');
if(result)
//parent.location.assign("http://localhost:58250/Ekocc/" + document.getElementById('hdnLink').value + "");
parent.location.assign("http://blabla.com/" + document.getElementById('hdnLink').value + "");
}

You can use the below code in the parent page.
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>

Following code will manage to refresh parent window post close :
function ManageQB_PopUp() {
$(document).ready(function () {
window.close();
});
window.onunload = function () {
var win = window.opener;
if (!win.closed) {
window.opener.location.reload();
}
};
}