Develop Reference

Loading a hyperlink opened in a div - in the same div

Following on my from my previous question here:
How to show a page by default on page load
I'm basically using jQuery to load links in a div - this works perfectly. However, what I want to now achieve, is when one of the pages (opened in the div) has a hyperlink, how can I open the hyperlink in the same div the page sits in now?
Let's say I have a menu:
Home | Service | About
If you click service - it loads the page inside a div - awesome.
But let's say service has a hyperlink to another page (on the same domain/setup) - currently using my code referenced in the question above, the link just opens in a new tab... This isn't the behaviour I want.
Here is the code:
$('[data-target]').click( function (e) {
$.get($(this).attr('href'), function(data){
$('#halloffame').empty();
$(data).find(".partner_body").appendTo("#halloffame");
});
e.preventDefault(); // prevent anchor from changing window.location
});
$.get( "pages/accounting-software/", function( data ) {
$('#halloffame').empty();
$(data).find(".partner_body").appendTo("#halloffame");
});
This lets me open hyper links in the div "halloffame". But it doesn't control the links in the pages - even if I use the same code on the master page:
<a data-target="#halloffame" href="pages/returns/">
If anyone can point me to where I'm going wrong, I would appreciate it :)
Have an awesome Friday, folks!

Your event listener is bound the the currently existing DOM, when you add new elements(from your ajax call) you need to either bind your event listener to the new elements aswell or use deferred event handling(eg jQuerys on).
See this answer for more details

how to show a message in popup at a page when a user come to that page but the condition is we have to use Featherlight popup no Colorbox or etc

Please visit at this url, there is a 'default' button when you click on this url a popup will appear.
I want the same but when i don't want to fire any user event this popup will appear onload
http://noelboss.github.io/featherlight/

If you want the popup on page load then just add some JS code:
$(document).ready(function() {
$("#popup").click();
});
give the id or class name of your tag where is popup exit instead of popup object.

Parent Jsp page refresh when click on popupwindow alert box

I am working on jsp's, I have two jsp one in configDb.jsp, in that I have written code to retrieve the values from database and display it. In this whereas I have option like newconnection.. its a popup window. When I click on that it opens popupwindow and taken the values and store them in a database, but in my parent page I am not able to display those values. After I click on the ok button in popup window, I have to refresh the parent page, then I am able to see the values which I have created few seconds back by the new connection page. Could anyone please help me out?

You can include this in your HTML for the popup window.
<script type="text/javascript">
function proceed(){
opener.location.reload(true);
self.close();
}
</script>
<form onsubmit="proceed()">
...
</form>
Actually you can obtain the answer by googling "javascript refresh parent page from popup" and you will see stackoverflow's answer :)
A better alternative without the need of refreshing the parent page can be achieved by adding a submit button listener and perform a DOM action to insert the new element with new content. This can be easily done by Javascript.

Getting the current iframe's body reference in JavaScript

I'm working on modal windows. When I click on a hyperlink in the main page, I need to show a modal window. This modal window I prepared using divs and one iframe. iFrame is used to show the source. Now in this modal window, I have another hyperlink to click which again opens a new modal window. This goes on.
Every time when I click on hyperlink, i want to create a new modal window in that provided iframe's src file itself. How to achieve this ?
TIA.

You can achieve this by using a simple java script file which creates div and iframe in your pages and frames. This script file will have all the necessary methods and a class to access these methods separately in each of the frame.
For example you can have the script file like
MyClass = function(){
this.var1, this.var2; // To store values separately in each frame.
this.myMethod = function(){
// Function body
}
}

Refresh a specific page when pop-up is closed (jQuery)

I have a pop-up called PopUp1 (page0.aspx). When the user clicks a row in PopUp1's GridView, it opens a new pop-up that loads my page1.aspx.
If the user clicks a link in the new pop-up (page1.aspx), then the content will be replaced with that of page2.aspx.
What I want: If the user closes the window of my second pop-up that opens page1.aspx or page2.aspx, then refresh PopUp1 (page0.aspx).
How can I do that via jQuery ?

in page1.aspx and page2.aspx add some javascript to refresh their parent (you don't need any jquery for this)
In your markup:
<body onunload="refreshParent();">
In your javascript:
var refreshParent = function () {
if (opener && !opener.closed) {
opener.location.reload();
}
};
Edit: alternatively, if you want to keep your logic seperated from your markup:
$(window).unload(refreshParent);

In your new popup (page1.aspx or page2.aspx), put the following jQuery and it should refresh the opening window when that popup is closed or refreshed:
$(window).unload(function(){
window.opener.location.reload();
});
If you'd like you could also change the location of the opening page by using the .assign method if you want to do some kind of workflow logic in your page,
for example window.opener.location.assign('http://newurl');

You could use plain javascript
window.opener.reload();