I am trying to use this
<script>
$(document).ready( function() {
var data = 'testing'
$("#about").on("click", function() {
$("#main-content").load("/about.html");
});
});
</script>
When I click the "About" button, it loads the HTML page "about.html" into the div called "main-content". But I have 2 issues
When it loads, it loads the "about.html" page into the whole page rather than just inside the "main-content" div
When I load the "about.html" I want to be able to access the JavaScript variable "var data" from the main page
Are these both possible?
Unless about.html is HTML and inline CSS only,
ifrmae is for this purpose.
<iframe src="about.html" />
First issue: the about.html page should actually be loaded only inside the main-content div. Maybe the css makes the about page fill everything. Maybe there's another javascript in the code causing this issue. The browser inspector should help debugging it.
Second issue: One possible way is to write the variable content into the html then fetching it later. The jQuery data does that creating/reading data attributes on html tags:
// javascript in current page
var foo = 'testing';
$("#main-content").data('myvar', foo);
// javascript in about.html
var bar = $("#main-content").data('myvar'); // equals 'testing'
Related
I'm loading some external div (class = police) to my site (into div with class = "pokaz") with JQuery.
$('figure').on('click', function() {
$('.loader').fadeOut(2000);
$(".pokaz").load("work1.html .police");
});
It works fine. But problems starts when I need to reload earlier div by clicking button situated on div with class = "police".
$('.btn1').on('click', function() {
$('.police').fadeOut(1000);
$(".pokaz").load('.loader');
});
It doesn't reload at all. I'm trying to do that without using iframe.
Here's fiddle https://jsfiddle.net/rfz2fLLq/2/
I hope it's understandable. Help welcome.
If you check your browser console, it says that "$ is not defined" which simply means that you have not added Jquery file to you page.
We need to add Jquery so $ is initialized.
Hello I have some JavaScript code to fill some table of page1 and auto click its submit button, then it jump to another page2.
What I want is to execute some other codes after page2 is fully loaded. I know methods like window.onload and jQuery.ready but i don't know how to set this method to page2. For example if i write window.onload then the window reference to the current page.
Can anyone help?
You could achieve it the following way.
example :
Add unique identification classes to each of the page body.
page 1
<body class='page1'></body>
page 2
<body class='page2'></body>
JavaScript
in your javascript file, use the following to run the code.
if($('body').hasClass('page1')){
//run page 1 code
}else{ // You can add a second if just to check if it's page 2
//run page 2 code
}
Then import the file to both pages at the bottom of the body tag. the script will run as needed.
Update
To get the current browser url just use window.location.href to get the url. The url is a unique page identifier so just update the condition to the following.
if(window.location.href == 'page1-url'){
//run page 1 code
}else{ // You can add a second if just to check if it's page 2
//run page 2 code
}
I would prefer using the window.location.pathname since it would just return the page path without the host, but the above will work too.
You can use $( document ).ready() if page 2 is a new document.
If "page 2" is at a scroll point in the same document, you can use an if statement with the scroll point using .scroll(). Add your script in the head of your new document or a link to a new js file.
I find that jQuery mobile is not reusing loaded pages.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
if (activePage.hasClass("search-page")) {
var controller = activePage.data("controller");
if (!controller) {
controller = new SearchController(activePage);
activePage.data("controller", controller);
}
controller.loadPage();
}
});
Then later...
$.mobile.pageContainer.pagecontainer("change", "search.html");
which is an html document that contains
<div data-role="page" class="search-page">
However, upon each navigation to search.html, activatePage.data("controller") is null and so I reinitialize my SearchController.
I thought jQuery mobile reused pages already loaded into the DOM?
jQuery Mobile works with two distinct page template solution.
Multi opage - Where every page is part of a single HTML file
Multi HTML - Where single page is part of a single HTML file
You can of course mix those templates.
When jQuery Mobile is initialized for the first time initial HTML file is fully loaded into the DOM. This content will stay in the DOM until page is refreshed (or you remove it forcefully which is bad decision).
Every other HTML page will get loaded when you transition to it and it will get removed as soon as you transition from it. Basically it will stay alive in the DOM as long as is active.
So, in few words, only pages found in initial HTML file will permanently stay in the DOM, everything else will get loaded/removed as you activate it.
I'm using jquery to load my website content once its fully loaded. That works great.
jquery code
function check() {
$("#content").load('items.html');
}
$(document).ready(function() {
check();
});
html
<div id="content">
</div>
Is there a way without refreshing the whole page to dynamically load html element (div) when user clicks on one of the items which were already loaded('items.html')?. On one click I want to remove already loaded 'items.html' inside #content div and load new div from any.html file.
So basically, I need to show more info for that particular item by dynamically replacing already loaded items.html and adding new div instead.
I managed to load new html page by adding anchor tags on every item, but it would be much better if I could load only one part(div) of a html file and not a whole page, that way I can write all items informations in only one html file, and then add those div's dynamically when user clicks on any item.
function check() {
$("#content").load('items.html #loadable'); // #ID to load
}
$('#loadCont').click(check);
main page example
page 2 example
You might also want to put this somewhere
$.ajaxSetup({ cache: false });
https://api.jquery.com/jquery.ajaxsetup/
As seen from the demo, .load() does already content-replacement, so no need to .empty() or .html('') beforehand.
Simple.Try to call the check() function on clicking of the element
$('element').click(function(){
check();
});
I have a pageLoad js function in master page,
and another one inside content page.
Does the first one (in master page) prevent the second one (in content page) from firing ?
It's the other way round. The one on the Content Page will be fired first. To know if one is messing with the other, simply debug it on Firebug or even on Visual Studio.
You can use the jQuery syntax to chain functions to run on page load in both Master and Child pages like this:
$().ready(function() {
// Do stuff
}
Contents will be execute in the order that the appear on the page, from top to bottom.
You could force items to be run in a specific order with a construct like this in your MasterPage:
<script>
$().ready(function() {
// Do MasterPage stuff
if (onChildPageLoad) onChildPageLoad();
});
</script>
and in the child page place a script block like this:
<script>
var onChildPageLoad = function() {
// Do childpage stuff
}
</script>