Develop Reference

How to load html using jQuery load() function from the anchor inside the container itself?

How can actually execute the load() function by clicking the link inside the container that load function load new html page?
In the code below, first I have successfully get the new.html page into container div.
<div id="container">
<ul>
<li><a id="t1" href="#">tab1</a></li>
<li><a id="t2" href="#">tab2</a></li>
<li><a id="t3" href="#">tab3</a></li>
</ul>
...Some html data here....
</div>
$(document).ready(function() {
$("#t1").click(function(){
$( "#container" ).load( "tab1.html" );
});
});
$(document).ready(function() {
$("#t1").click(function(){
$( "#container" ).load( "tab2.html" );
});
});
$(document).ready(function() {
$("#t1").click(function(){
$( "#container" ).load( "tab3.html" );
});
});
here tab1.html, tab2.html and tab3.html will also contain the same tab navigation list with same id but with different data.
<ul>
<li><a id="t1" href="#">tab1</a></li>
<li><a id="t2" href="#">tab2</a></li>
<li><a id="t3" href="#">tab3</a></li>
</ul>
...different data here.....
Now, whenever if first execute the page, at first time I can easy load any one of three page (tab1 or tab2 or tab3). However, after loading these page, I cannot load another page. For instance, after loading tab2, which will also contain tab navigation with same id, I am unable to navigate to tab 1 or tab3.
So, anyone please tell me how can i achieve this?

Update:
Thanks guys for your comments and ideas. However, I happen to figure out one solution and which seem to work perfectly for my case. Thanks to #HristoIliev for pointing out about re-validating the jQuery load() function. What I did is I simply add the jQuery load() function snipset to the fragment htmls i.e. (tab1.html, tab2.html and tab3.html).
For example:
tab1.html
<ul>
<li><a id="t1" href="#">tab1</a></li>
<li><a id="t2" href="#">tab2</a></li>
<li><a id="t3" href="#">tab3</a></li>
</ul>
...different data here.....
...added jQuery load funciton and which will again revalidate the jQuery code when this fragment html is loaded in the main div "container".
$(document).ready(function() {
$("#t2").click(function(){
$( "#container" ).load( "tab1.html" );
});
});
$(document).ready(function() {
$("#t3").click(function(){
$( "#container" ).load( "tab1.html" );
});
});
And now its working.!!!

i am struggling to add active class to my navigation menus with ajax

i used ajax on my site to load pages dynamically and add hashes to urls to preserve history and browser back button, and for this i am using jquery bbq plugin that is based on html5 history api and i have to say everything working fine except one issue and that is active class to current link.
i have two navigation main menu which is only on homepage and a second one is included on every page with php include function and its kind of a subnav of main menu.
as i said my problem is how to add active class to any link that is clicked so its look different from others and users should know where they are right now!
i tried different techniques but those only works with main menu and some kind of problem with secondary nav for better understanding please watch this video
as you can see in the video it works fine on main menu but only adds class to the secondary menu after click once on any link then click another link and then click back to original link, moreover when i refresh it removes the active class.
here is my code.
main menu
<div id="vertical-menu">
<!--<h2 class="logo">LOGO</h2>-->
<div class="logo">
<span class="arcd-male97"></span>
<h2 class="logo-name">AMR</h2>
<h6 class="logo-desc">ARCADE MUSIC REPOSITORY</h6>
</div>
<nav>
<ul id='menu' class="menu-items">
<li><i class="arcd-archive"></i></br>Browse</li>
<li><i class="arcd-music97"></i></br>Top albums</li>
<li></i></br>Top artists</li>
<li></i></br>Top lists</li>
<li></i></br>Charts</li>
</ul>
</nav>
</div>
secondary navbar
<div class="header_container" id="header_container"> <!--start header div-->
<div id="header_titles">
<h1 class="browse-heading">BROWSE</h1>
<h2 class="browse-subheading">GENRES & MOODS</h2>
</div>
</div> <!--end header div-->
<div id="tabnav_container"> <!--start tabnav_container-->
<div class="navtab_background"></div>
<nav>
<ul id="tabnav">
<li class="pop_tab"><i class="arcd-microphone352"></i>pop</li>
<li class="country_tab"><i class="arcd-guitarcountry"></i>country</li>
<li class="rock_tab"><i class="arcd-electricclone"></i>rock</li>
<li class="blues_tab"><i class="arcd-harmonicblues"></i>blues</li>
<li class="edm_tab"><i class="arcd-disc62edm"></i>edm</li>
<li class="jazz_tab"><i class="arcd-trumpet12jazz"></i>jazz</li>
<li class="rnb_tab"><i class="arcd-mic102"></i>r&b</li>
<li class="hip-hop_tab"><i class="arcd-musicplayer1hiphop"></i>hip hop</li>
<li class="reggae_tab"><i class="arcd-mic102"></i>reggae</li>
<li class="classical_tab"><i class="arcd-violin62classical"></i>classical</li>
<li class="folk_tab"><i class="arcd-guitar92folk"></i>folk</li>
<li class="soul_tab"><i class="arcd-mic102"></i>soul</li>
</ul>
</nav>
</div><!--end tabnav_container-->
and this is ajax script
$(function() {
// Keep a mapping of url-to-container for caching purposes.
var cache = {
// If url is '' (no fragment), display this div's content.
'': $('#default-homepage-contents')
};
// Bind an event to window.onhashchange that, when the history state changes,
// gets the url from the hash and displays either our cached content or fetches
// new content to be displayed.
$(window).bind( 'hashchange', function(e) {
// Get the hash (fragment) as a string, with any leading # removed. Note that
// in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
var url = $.param.fragment();
// Hide any visible ajax content.
$( '#main-container' ).children( ':visible' ).hide();
if ( cache[ url ] ) {
// Since the element is already in the cache, it doesn't need to be
// created, so instead of creating it again, let's just show it!
cache[ url ].fadeIn(1000);
} else {
// Show "loading" content while AJAX content loads.
$( '#loading' ).delay(500).show();
// Create container for this url's content and store a reference to it in
// the cache.
cache[ url ] = $( '<div class="bbq-item"/>' )
// Append the content container to the parent container.
.appendTo( '#main-container' )
// Load external content via AJAX. Note that in order to keep this
// example streamlined, only the content in .infobox is shown. You'll
// want to change this based on your needs.
.load( url, function() {
// Content loaded, hide "loading" content.
$( '#loading' ).fadeOut(1000);
});
}
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).trigger( 'hashchange' );
});
thanks for any help!

I had problems with new browsers and found this, I think the only correctly working plugin: jquery address
and docs are here: http://www.asual.com/jquery/address/docs/#api-reference example usage is
$(function() {
//push it to history
$('#tabnav > li').click(function(e) {
e.preventDefault();
$.address.parameter("browse", $(this).attr("href"), false);
});
//catch changes
$.address.change(function () {
$.each($.address.parameterNames(), function (index, value) {
url = $.address.parameter(value);
$('a[href="'+url+'"]').addClass('active');
});
});
});

$(document).on('click', .... is not working on file inclusion

I have a header.jsp file
$(document).ready(function() {
alert("calling in header");
$(document).on('click', '#get-info-list', function(event) {
event.preventDefault();
alert('hiiiiiii');
$.get('getNotification', function(data) {
console.log(data);
$("#infolist").append(data);
});
});
});
Some where in code
<li class="dropdown">
<span id="info-count"></span>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list">
<i class="fa fa-list-alt" ></i>
</a>
<ul class="dropdown-menu" id="infolist" role="menu">
</ul>
</li>
I have a test.jsp file where in header div id i have added above header.jsp
<div id="header">
<jsp:include page="/pages/common/header.jsp"/>
</div>
Here I am running test.jsp file script on header.jsp is excecuting and
showing alert calling in header but it is not calling method below it.
On console also it is not printing any error.
what may be the problem??
How to resolve this??
I asked the related problem here. It is working properly on same file.
But on my system this is not working.

Try to wrap your click event inside a function and add onclick="functionName(event)" to your get-info-list element and see what happens.
JS:
function clickMe(evt){
evt.preventDefault();
alert('hiiiiiii');
$.get('getNotification', function(data) {
console.log(data);
$("#infolist").append(data);
});
}
HTML:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list" onclick="clickMe(event)">
If your code is working on same file, then I guess that you're loading the html file/those elements later on page (via ajax request for eg), so all the bindings will not be available for those elements because they don't exists when the script is loading.

Javascript code will not execute unless you'll specify script tags, add your js code inside script tag in your header.jsp.
Thanks

If another library uses the dollar sign, it will override it if that library is included after the $(document).ready() call, you can safely use the $ parameter passed by $(document).ready() like this:
jQuery( document ).ready(function( $ ) {
$(document).on('click', '#get-info-list', function(event) {
event.preventDefault();
alert('hiiiiiii');
$.get('getNotification', function(data) {
console.log(data);
$("#infolist").append(data);
});
});
});

jquery mobile prevent default not working for phonegap app

i wish to pass data via local-storage to another html page. sending data via the URL doesn't seem to work in phone gap
so i want to tap in the click event and run my data assignment function before the page changes
but the prevent default isnt working with the list view.
<ul class="content" data-role="listview" data-inset="true" data-filter="true">
<li> <img src="image.jpg" /> to go to second page</li>
<li> <img src="image.jpg" /> to go to second page</li>
<li> <img src="image.jpg" /> to go to second page</li>
<li> <img src="image.jpg" /> to go to second page</li>
</ul>
i have set up a fiddle here:
http://jsfiddle.net/prantikv/kpv42yne/1/
my end goal is to get which list-view item was clicked and the values associated with it.
getting data via the URL doesn't seem to work.
the event.preventDefault() method is not working.. see the fiddle

The event.preventDefault() is working fine. The problem is that your code is messed up. First of all this is not how you use jQuery selectors:
$(".content li,.content a")
I believe you are trying to do this:
$(".content li a")
I also have no idea what you are trying to do here:
$(document).on('pagebeforeshow','index', function(){
alert(2);
$(document).on('vmousedown click', function(event){
event.preventDefault();
return false;
});
});
Because a click on the <a> tag is what causes the page change, that's where you wan't to prevent the default behavior and save the value. So this is all you need:
$(".content li a").click(function (event) {
event.preventDefault();
localStorage.setItem("fileName", $("#path").val());
console.log($("#path").val());
window.location.href = "second.html";
});
I forked your fiddle: http://jsfiddle.net/theagitator/9aa4nkx3/2/

Need Parent Buttons Outside iFrame to Call JS Functions Loaded Inside the iFrame

This is a weird question and I hate iFrames, but I am using PhoneGap and Codiqa for mobile application development and Codiqa outputs HTML and for all the outside forms I want to incorporate within Codiqa's HTML it loads in iframes. Codiqa uses div ID referencing so that when you click a menu item, it loads that page ID in the HTML and then also in the parent window loads the iframe inside that div. Also, the parent window has its own submit, reset, and back buttons. I need those buttons to call to and use functions from the page that loads WITHIN the iFrame...
Apparently, this is the exact opposite of how parent.myfunction() works, and I wonder if this is even possible or if I need to just recreate my code and not use iFrames, but I am clueless as to how I can go about that. PHP includes don't really work well I have come to find out... Thanks! Or maybe I just need to move all my JS files for each form into parent folders and have to link to the forms separately? I don't know... Please advise. Here is an example of one of the page IDs:
HTML (Codiqa)
<a href="#page17" data-transition="flip">
Extracting
</a>
<div data-role="page" id="page17">
<div data-theme="a" data-role="header">
<h3>Extracting</h3>
</div>
<div data-role="content">
<iframe src="extraction/extract_form.html"
name="Cable_Extraction_Worksheet" class="contentiframe"></iframe>
</div>
<div data-role="tabbar" data-iconpos="left" data-theme="a">
<ul>
<li>
<a href="#page1" data-transition="flip" data-theme="" data-icon="arrow-l">
Back
</a>
</li>
<li>
<a href="#" data-transition="none" data-theme="" data-icon="minus">
Reset
</a>
</li>
<li>//THIS IS THE BUTTON, AND JS FUNCTION I NEED TO CALL ONCLICK
<a onclick="uploaddata();" data-transition="none" data-theme="" data-icon="check">
Submit
</a>
</li>
</ul>
</div>
</div>
IFRAME'S JS FUNCTION
function uploaddata() {
//Read all of the data from the page
for (eID in extractform) {
extractform[eID] = document.getElementById(eID).value;
}
upload_extractform();
}
function upload_extractform() {
$.ajax({
type: 'POST',
url: './php/upload_extractform.php',
data: extractform,
async: false,
dataType: 'text',
success: function() {
alert("Thank you. Your Extraction form has been submitted.");
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error... " + textStatus + "\n" + errorThrown);
}
});
};

I think this is what I am looking for:
onclick="document.getElementById('Cable_Extraction_Worksheet').contentWindow.uploaddata();"
is this reliable?? Some say it doesn't work in all browsers or with a function that has Jquery in it, which some of mine do. Just want to verify, thanks.