I have simple content loader, where I load content of html file into element. That is working fine. But when I load content, then JS in content is not loaded because it is defined in main (index.html) document ready function.
Question:
How to load content where after page refresh it will remain in div?
Note: Prefer JS solution.
HTML:
index.html
<ul id="debug_menu">
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
<div id="zone"></div>
JS:
/* Content loader */
jQuery(document).ready(function() {
jQuery("#debug_menu li").click(function() {
$content = jQuery(this).text();
jQuery('#zone').load('content/' + $content + '.html');
});
});
//Edit:
jQuery(".dial").knob();
content1.html:
<input value="90" class="dial">
Note: using http://anthonyterrien.com/knob/ plugin
try something like this
jQuery(document).ready(function() {
jQuery("#debug_menu li").click(function() {
$content = jQuery(this).text();
jQuery('#zone').load('content/' + $content + '.html', function() {
jQuery(".dial").knob();//initialize new one
});
});
});
jQuery(".dial").knob();
EDITED CODE
jQuery(document).ready(function() {
jQuery("#debug_menu li").click(function() {
$content = jQuery(this).text();
jQuery('#zone').load('content/' + $content + '.html', function() {
initial_loader();//initialize new one
});
});
initial_loader();
});
function initial_loader(){
jQuery(".dial").knob();
}
When you load content, you should also manipulate the current page URL in a way that does not cause a reload. This basically means changing the hash part (#something). On page load, you only have to check the current hash and load the right content.
You can also use the history API with the same logic, it gives you more options to manipulate any part of the URL without a reload. Browser support is not the best yet though, but you can use history.js as a wrapper.
Advantages: both methods will make your content linkable and make the browser history usable (back, forward buttons will work) other than fixing your reload problem.
Not possible. You have to store which div is loaded etc.
Solutions where you can store something:
Cookie
Localstorage
Hashtag
I use this plugin: https://github.com/AlexChittock/JQuery-Session-Plugin
to store content variable into session.
/* Content loader */
jQuery(document).ready(function() {
jQuery("#debug_menu li").click(function() {
$content = jQuery(this).text();
jQuery.session.set('content', $content);
jQuery('#zone').load('content/' + $content + '.html',
function() {
initial_loader();
}
);
});
$s = jQuery.session.get('content');
jQuery('#zone').load('content/' + $s + '.html',
function() {
initial_loader();
}
);
});
function initial_loader() {
jQuery(".dial").knob();
}
Related
I am currently trying to run a function when all iframes on the page are loaded. I am using jQuery, but it only works when there is one iframe on the page. Once I start having mutiple iframes my functionality stops working. Here is the code im working with:
$('iframe.preview-iframe').on( 'load', function() {
$('iframe.preview-iframe').contents().find('section[rowposition] a').each(function(){
// Append a span tag with the href of the according content a tag
$(this).append('<span style="position:absolute;left:0;color:red;background:yellow;">' + $(this).attr('href') + '</span>');
});
});
Do I need to write a loop that looks over how many iframes I have and then only run the script once the last iframe is loaded or is there some other way to do it?=
You can do something like the following:
Get all the iframes elements in a variable
Loop through each of the iframes and if all of them are loaded, execute your required code.
$(window).on('load', function() {
var iframes = $('iframe');
var loaded = 0;
iframes.each(function() {
$(this).on('load', function() {
loaded++;
if (loaded == iframes.length) {
// run your code here
$('iframe').each(function() {
$(this).contents().find('section[rowposition] a').each(function() {
// Append a span tag with the href of the according content a tag
$(this).append('<span style="position:absolute;left:0;color:red;background:yellow;">' + $(this).attr('href') + '</span>');
});
});
}
});
});
});
I wanted to use ajax to make my website open links without refreshing whole webside (only content in 1 div is changing, header/footer/navigation is always the same).
In header I added js:
<script type="text/javascript" src="js/general.js"></script>
Index.php looks like this:
<?php
include '/gui/header.php';
include '/gui/nawigacja.php';
?>
<div id="content"></div>
<?php include '/gui/footer.php'; ?>
And the general.js looks like this:
$(document).ready(function(e) {
$('#content').load('content/main.php');
$('ul#slider li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/'+ page + '.php');
return false;
});
$('ul#menu li a').click(function() {
var page = $(this).attr('href');
$('#content').load('content/'+ page + '.php');
return false;
});
});
It worked well on localhost (xampp), but when I wanted to move it to remote free server to tests, the load function didn't work (website didn't won't to load at all, but when I deleted "$('#content').load('content/main.php');" it started to load, but then my ajax didn't load content, because there were no ajax).
Is there any way to solve this problem?
Would be gratefull for any kind of help.
Your JS looks fine, I guess that the URL path is not proper. Make it relative to the root directory by adding / in front of content.
$(document).ready(function(e) {
$('#content').load('/content/main.php');
$('ul#slider li a').click(function() {
var page = $(this).attr('href');
$('#content').load('/content/'+ page + '.php');
return false;
});
$('ul#menu li a').click(function() {
var page = $(this).attr('href');
$('#content').load('/content/'+ page + '.php');
return false;
});
});
Maybe the problem is with cache. ?
Try it:
var d1 = new Date();
var cache = d1.getTime();
$('#content').load('/content/main.php?cache=' + cache);
So this little script was working exactly how i wanted it to but i did something to mess it up, basically i have one jQuery function
function loadDiv(id, page) {
$(function () {
$("#" + id).load(page);
});
}
and then this HTML (obviously through a for loop)
Edit this Post -->
I have tried removing "javascript:" I actually tried that because I could think of nothing else wrong.
I'm not sure but I don't think you need the extra jQuery wrapper.
function loadDiv(id, page) {
$(function () { // what is this line for?
$("#" + id).load(page);
});
}
I would just keep:
function loadDiv(id, page) {
$("#" + id).load(page);
});
I would write your links like so
Edit this Post
Then write your function like so
$('body').on('click', '.loadTrigger', function(){
var id = $(this).attr('data-id');
var page = $(this).attr('data-page');
$("#" + id).load(page);
});
I'm trying to use jQuery to load external pages into the current page without the user seeing the page load.
When I call the page 'info.php' it is loaded into the #content div. That's what the script is supposed to do. The problem is that in the main page, which contains the script and the #content div, I already have some code that I want it to be executed when someone visits the page and not to be called from any external page. This is working but when I click on one of the links in the menu, I can't go back to the initial content.
Here is an except of my code:
<script>
$(function() {
$('#nav a').click(function() {
var page = $(this).attr('href');
$('#content').load(page + '.php');
return false;
});
});
</script>
<ul id="nav">
<li>Page1</li>
<li>About</li>
<li>Contact</li>
<li>Info</li>
</ul>
<div id="content">
Here I have some code that I wanted to be attributed to the "Page1"
</div>
I'm not very familiar with load(), but in this case, I think you should be using ajax to load the page without refresh.
var page = $(this).attr('href');
$.ajax({
url: page + '.php',
success: function(data)
{
$('#content').html(data);
}
})
EDIT: with you said "when I click on one of the links in the menu, I can't go back to the initial content", did you mean you have some code within the div #content and onclick you've overwritten its contents?
Here is example:
$(function()
{
var content = $('#content');
$('#nav a').click(function(e) {
e.preventDefault();
var page = $(this).attr('href');
content.children().hide();
var pageContent = content.find("#" + page);
if(pageContent.length > 0)
{
pageContent.show();
}
else // put ajax here
{
content.append($('<div>').attr('id', page).text('New page ' + page));
}
});
});
Demo: jsfiddle.net/3jLjw/
I have a script that will reload the page (content) to a random DIV
How do I implement this so that the script loads after the div is loaded?
I have the following code ready:
<script>
$(document).ready(function() {
$("#getAssignment").click(function() {
var $divs = $(".assignment");
if ($divs.length > 0) {
window.location.hash = "#" + $divs[ Math.floor(Math.random() *
$divs.length) ].id;
}
});
});
</script>
$("div").load(function(){
blah();
});
This will do what you wanted, but it does not make sense though, since div is not like an image or <script> or a page. (You can't really "load" a <div> anyway.)