Jquery Load Not Loading after going to another page - javascript

I have an html page where a JQuery Loads a page into a div on click. I can click on it and it goes to page 2 and it works. I have the same link that goes back to page 1 and it will load the html in page 1, but if I click back to page 2 it will not load. So pretty much I cannot go back and forth on loading a div from Jquery. I have search and seen something on using live() but can't seem to get anything to work. Any Suggestions?
My Jquery Function to load the div from another page.
<script>
function changepage(page) {
$(function(){
$('#maincontent').load('index.php?p='+page);
return false;
});
}
</script>
HTML To load the page 2:
Page 2
HTML To load back to page 2
Page 1
EDIT:
Entire Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My Page</title>
</head>
<body>
<div id="wrapper">
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div id="maincontent">
Page 2
</div>
<!-- /.maincontent -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<script>
function changepage(page) {
$(function(){
$('#maincontent').load('subpage.php?p='+page);
return false;
});
}
</script>
</body>
</html>

I agree with tokyovariable. you need to link jquery before using it in function. Try adding
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
before script with changepage function.
Also make sure jquery is loaded before changepage function is called. Try
function changepage(page) {
$(document).ready(function(){
$('#maincontent').load('index.php?p='+page);
return false;
});
}

Is jQuery linked to on that page?

I could be wrong, but I don't think you've given us enough information here. The above code looks fine. Is input.php working correctly? What happens when you call:
http://[domain]/index.php?p=page1
http://[domain]/index.php?p=page2
From a browser? Does it output a whole page, or just #maincontent? It's kind of weird, does the index page output a single div, or are you stuffing a whole html page inside another one? Sound like it could be the output from index.php, which would normally be the landing page of your site, so why are you stuffing the whole landing page inside a div?

Related

How to redirect to another page and force refresh on that page so Javascript will run

I have a web page where I am using javascript to redirect to another page. The second page displays correctly but I can't get javascript to run when the second page is loaded. Here are 3 ways I have tried to get my javascript function to load on the second page:
Put the function as onload parameter for html body
Tried calling it as inline javascript inside both the heading and body of the page
Used jquery $(document).ready to try and call the function when page loads
I simplified the function to be a simple alert to make sure the problem wasn't with the function code and also set break point on function to make sure it wasn't being called. The code won't fire when the page is loaded but if I do a refresh on the browser it will work.
The page I am trying to redirect to is generated by a 3rd party application we have so I am limited on how much I can modify it but I can make basic HTML/javascript changes to the page. The second page is also built with Angular.
Any ideas on how I can get this second page to always run my javascript code when I redirect to it? Below is code from second page with the myTest() the function I am trying to run. If I hit refresh on browser when this page loads, I get the myTest alert 3 times.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title ng-controller="TitleCtrl" ng-bind="title"></title>
<!-- third party stylesheets -->
<link rel="stylesheet" type="text/css" href="third-party/bootstrap-3.3.5/css/bootstrap.min.css" />
<link rel="styleSheet" type="text/css" href="third-party/angular-ui-grid-3.1.1/ui-grid.min.css" />
<link rel="stylesheet" type="text/css" href="third-party/font-awesome-4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="angular-1.5.0/angular.min.js"></script>
//editing out list of about 50 javascript files to make code example shorter
<script type="text/javascript">
function myTest() {
alert("My Test");
}
</script>
</head>
<body class="app-body" onload="myTest();">
<ng-include src="'components/property-pages/field-scripts.html'"></ng-include>
<ng-include src="'components/form-editor/form-editor-field-scripts.html'"></ng-include>
<ng-include src="'components/form-editor/field-properties-dialog-definition-scripts.html'"></ng-include>
<ng-include src="'components/form-editor/field-properties-scripts.html'"></ng-include>
<ng-include src="'components/lib/custom-handler/custom-handler-tooltip-script.html'"></ng-include>
<!-- alert notification -->
<div ng-include="'components/alerts/alert.html'"
ng-controller="AlertController as vm">
</div>
<!-- navigation bar -->
<navbar></navbar>
<!-- main container -->
<div id="main-container"
ng-controller="MainContainerController as vm"
ng-style="{ top: vm.getTop(), height: vm.getHeight() }">
<ng-view></ng-view>
</div>
<!-- loading status panel -->
<div ng-include="'components/loading/loading.html'"
ng-controller="LoadingController as vm">
</div>
<!-- pre-bootstrap loading status panel -->
<div class="startup-loading">
<span class="fa fa-spinner fa-pulse fa-3x fa-fw"></span>
</div>
<!-- pre-bootstrap error status panel -->
<div class="startup-error">
<span class="fa fa-exclamation-circle fa-3x fa-fw"></span>
<div id="startup-error"></div>
</div>
<script type="text/javascript">
myTest();
$( document ).ready(function() {
myTest();
});
</script>
</body>
</html>
What browser are you using?
I've seen something similar happen in Firefox, meanwhile the same is working in other browser.
$(document).ready() not firing after redirect with window.location

Reloading page in cordova

I have an issue with cordova that i don't understand how to handle relatively to the opening of the same page more than once.
Suppose that i have two basic html files like this with cordova and jquery mobile support:
index.html
<!DOCTYPE html>
<html>
<head>
<title>
ciao
</title>
<meta charset="UTF-8">
<!-- cordova -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<!-- jquery mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.css" />
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/jquery-mobile/jquery.mobile.js"></script>
<!-- initialization files -->
<script src="js/mainjs.js"></script>
</head>
<body>
<section id="index" data-role="page" data-fullscreen="true">
<div data-role="content">
/*...*/
<a href="mappa.html">
<img src="img/map.png" />
</a>
/*...*/
</div>
</section>
</body>
</html>
mappa.html
<!DOCTYPE html>
<html>
<head>
<title>
mappa
</title>
<meta charset="UTF-8">
<!-- cordova -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<!-- jquery mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.css" />
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/jquery-mobile/jquery.mobile.js"></script>
</head>
<body>
<section id="mappa" data-role="page" data-fullscreen="true">
<div data-role="content">
/* code*/
</div>
</section>
</body>
</html>
Now i need to load data in the mappa.html file so i use an handler that i choose to load in the mainjs.js file included in the index like this.
$(document).ready(function() {
console.log("deviceready");
$(document).on("pageshow","#mappa",function(){ //pageshow is thrown each time
/*code*/
});
});
If i use the code above each time i load the page all the handler start again and it's very user unfriendly in case of long operation like data downloading.
So i tried this handler
$(document).one("pageshow","#mappa",function(){ });
But the second time i enter in the mappa.html page simply is blank because the handler does't work 2 times.
So how can i maintain the page loaded?
EDIT: In this specific case i need to load a map and with this code
$(document).on("pageshow","#mappa",function(){ //pageshow is thrown each time
console.log("dentro script");
//setting div height
$("#map_canvas").height( $(window).height() - $("div[data-role='header']").height() - 32 );
//since page show is thrown each time i use a session storage variable
//so i make the init map only one time
if( !sessionStorage.mapinit ) {
console.log("----------mapinit is not set");
sessionStorage.mapinit=1;
console.log("----------mapinit=1");
// Initialize the map plugin
var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv);
map.setMyLocationEnabled(true);
var pisaCenter = new plugin.google.maps.LatLng(43.723072, 10.396585);
map.setCenter(pisaCenter);
map.setZoom(13);
map.one(plugin.google.maps.event.MAP_READY, onMapInit);
} else {
console.log("----------map already set");
var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv);
}
});
and it works fine thanks to
map.one(plugin.google.maps.event.MAP_READY, onMapInit);
that execute the onMapInit function only once.
But in a case like this one
<body>
<script>
$.support.cors=true;
$.mobile.allowCrossDomainPages = true;
$.getJSON('http://.../prestazioni.php?prestazioni=tutto&callback=?',function(data){
$.each(data, function(i, dat){
$("#listview").append('<li>'+dat.rep+'</li>');
});
$('#listview').listview('refresh');
});
</script>
</body>
it's absurd that i need to download data every time i open the page
The main issue is related to jquery mobile and how it load pages.
So in my case i use multiple html files and jquery does't cache the open pages; this behavoour can be overwritten adding data-dom-cache="true" at the page like this
<section id="prestazioni" data-role="page" data-fullscreen="true" data-dom-cache="true">
This works very well. The page remains loaded but it's also possible to modify it using the handler.
There is also an easy route that simply consist in the creation of a single html files with multiple pages. in this case the DOM is always the same and the pages are all cached.

jQuery .load function gets slow after few clicks

I am trying to load different external HTMl files into a DIV in my parent HTML. Here is the code I am using
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>BeautyDish Photography | Wedding and Beauty Photographer</title>
<meta name="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>
<body>
<div id="wrapper" style=" max-width:1920px; min-width:1024px;">
<nav>
<div id='MainMenu'>
Home
About Us
Portfolio
Contact Us
</div>
</nav>
<div id="content" style="width:1200px; padding:0; margin:auto;">ff
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/main.js"></script>
<script>
$(function(){
$("#MainMenu a").click(function(e) {
//load home.html on click
e.preventDefault();
$("#content").load($(this).attr('href')+".html", null, function(){
alert('Load Done');
});
});
});
</script>
</body>
</html>
Whenever I click any link for the first time it works perfectly, from second click onward the loading is taking longer and the alert is coming more than once.
I have also hosted a working version at http://www.jbasuphotography.com/index_new.html
I am new to jQuery, please let me know how to solve the problem.
The problem seems to be that you're loading the whole page inside a div of itself.
And it's included with its script and event binding which can only make it worse.
A solution could be to reduce to the part that really interests you (a different page). But this solution would have to be designed for your real need which isn't clear.
before the load you can do a remove first, because its loading multiple files in.
$('#wrapper #content').remove();
$('#wrapper').append('<div id="#content"></div>')

Javascript doesn't rock on generated page

I'm quite new in html5 & js and i have some troubles to develop a jQuery Mobile exemple.
From this, i'm just calling another header (partial) when a product is selected to render.
_header2.php:
<!DOCTYPE html>
<head>
<title>h2: <?php echo $_GET['product']; ?> </title>
<meta charset="UTF-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<link rel='stylesheet' href='assets/css/styles_mob.css'/>
<link rel='stylesheet' href='assets/css/styles.css' />
<link href='assets/css/jquery-mobile.css?<?php echo filemtime("assets/css/jquery-mobile.css");?>' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js'></script>
</script>
<script type='text/javascript'>
function mymessage(msg)
{
if(!msg) msg="?";
alert(msg);
}
</script>
</head>
<body onload="mymessage('onload !')">
<div data-role="page" id="Home">
<div data-role="header" data-theme="b">
Home
<h1> <?php echo $title?></h1>
</div>
<div data-role="content">
Header code appair correctly on the generated page but js call of mymessage() in body tag doesn't work. Same problem when i try to call it from another partial code (_product.php) :
<li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>
...concole return: referenceError: mymessage is not defined
Everything rock only when a refreshing the current page !!
I've rode some posts (1, 2, 3) with similar problem but i'm still lost.
Any idea please ?
You're missing the <html> tag. You also have an extra </script> closing tag. This could potentially lead to your error.
There are all sorts of strange coding styles and errors like missing the <html> tag, an extra </script> closing tag, missing the closing tag on your anchor in <li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>, and list items should be inside <ul></ul>.
Try this code, it should work. Then analyze it and learn!
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>h2: <?php echo $_GET['product'];?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<link rel="stylesheet" type="text/css" href="assets/css/styles_mob.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<!-- this next line makes me wonder.. why?! -->
<link rel="stylesheet" type="text/css" href="assets/css/jquery-mobile.css?<?php echo filemtime('assets/css/jquery-mobile.css');?>">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript">//<![CDATA[
function mymessage(msg){
msg=msg||'?'; //the usual way to provide defaults
alert(msg);
}
window.onload=function(){ //setting your onload event.
mymessage('onload !');
};
//]]>
</script>
</head><body>
<div data-role="page" id="Home">
<div data-role="header" data-theme="b">
Home
<h1><?php echo $title;?></h1>
</div>
<div data-role="content">
<ul> <!-- Here is your link, working -->
<li>...</li>
</ul>
<!-- added some closing tags for demo-sake -->
</div></div>
</body></html>
PS: since all the beginner errors and the fact that this is just part of your code, I strongly assume the rest of your code has such strange error's to.
Good Luck!!
UPDATE:
Depending on what you'd like to accomplish on page-load, jQuery Mobile might completely change the ballpark.
As can be read in jQuery Mobile's documentation:
By default all navigation within jQuery Mobile is based on changes and
updates to location.hash. Whenever possible, page changes will use a
smooth transition between the current "page" and the next, whether it
is either already present in the DOM, or is automatically loaded via
Ajax.
Another quote from the documentation:
Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This means that the regular techniques described will only fire when you first visit the page, not while navigating the page ajax-style.
Thus in jQuery mobile you must use pageinit or pageshow or one of the other events that are explained in the documentation that suit your exact purpose.
Example how to get pageinit fire for every page (tested live on your site):
$(document).on('pageinit','[data-role=page]', function(){
mymessage('hihi');
});
Or alternatively you could turn off ajax in jQuery Mobile, like this (depends on version):
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});

Funky pagecreate issue with jQueryMobile

Here is my simplified code which has two pages which link to each other. The result is the page2 count alert always says there is one #page2 div in the DOM. However pagecreate fires for each time that page2.html has been referenced. First time is 1, second time is 2, and so on...
Can someone explain what is going on and how to get one pagecreate event for page2?
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<h3>In Index Page</h3>
Go To Page2
</div>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="page2" data-role="page">
<div data-role="content">
Back
</div>
<script type="text/javascript">
alert("page2 count is " + $("#page2").length);
$("#page2").live('pagecreate',function(event, ui) {
alert("in page2 on pagecreate");
});
</script>
</div>
</body>
</html>
Thanks,
-- Ed
jQM loads subsequent pages into the same DOM (page) using a debugger/dev tools with Chrome you can easily see this happen.
In subsequent pages it pulls in anything between your tags, but ignores everything else, you could have JS in your or other pages and it'd still only pull in page2.
What exactly is happening with you is that when you load #page2 the first time it properly adds a live event to #page2, then you navigate to index.html, but #page2 remains in your DOM. Now when you goto #page2 again, it will run your JS again
$("#page2").live('pagecreate',function(event, ui) {
alert("in page2 on pagecreate");
});
This binds your alert again, and 2 events fire, next time 3 will fire.
The way you're supposed to do it is load all your JS at the start and listen for the pageinit/pageshow, see my other post: https://stackoverflow.com/a/9085014/737023
Or if you have any questions ask here

Categories