<div id='here'></div>
I am trying to refresh a certain div within a bunch of divs. The div content is basically generated by PHP along with data from a MySQL database in addition to many variables being sent with the help of an XMLHttpRequest.
The idea is to reload/refresh the div itself and not load a php file or to overwrite it with .text or .html. In this case, I cannot use .load('file.php')
What I have tried :
<script type='text/javascript'>
function updateDiv()
{
document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
}
</script>
and (for a every 3 second refresh) :
$(document).ready(function () {
setInterval(function () {
$('#here').load('#here'));
}, 3000);
});
Ideally, I would require something like :
function reloadDIV () {document.getElementById("here").innerHTML.reload}
function reloadDIV () {$('#here').load(self)}
so that I can use it in a onClick :
<a onclick='reloadDIV ();'>reload div</a>
To reload a section of the page, you could use jquerys load with the current url and specify the fragment you need, which would be the same element that load is called on, in this case #here:
function updateDiv()
{
$( "#here" ).load(window.location.href + " #here" );
}
Don't disregard the space within the load element selector: + " #here"
This function can be called within an interval, or attached to a click event
For div refreshing without creating div inside yours with same id, you should use this inside your function
$("#yourDiv").load(" #yourDiv > *");
Complete working code would look like this:
<script>
$(document).ready(function(){
setInterval(function(){
$("#here").load(window.location.href + " #here" );
}, 3000);
});
</script>
<div id="here">dynamic content ?</div>
self reloading div container refreshing every 3 sec.
You can do the following to just reload a <div> element:
$('#yourDiv').load('#yourDiv > *')
Make sure to: use an id and not a class. Also, remember to paste:
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> in the <head> section of the HTML file, if you haven't already. In opposite case it won't work.
You can use jQuery to achieve this using simple $.get method. .html work like innerHtml and replace the content of your div.
$.get("/YourUrl", {},
function (returnedHtml) {
$("#here").html(returnedHtml);
});
And call this using javascript setInterval method.
Related
On one of my previous pages I use
<script src="/js/wireEvent.js"></script>
<body onload="wireEvent();" >
Basically, wireEvent() displays an image on top of the page whenever the mouse goes out of the browser.
However, now I cannot add this function directly to the body of my page, so what is the proper way to add it? Will it be right if I add
<script>
window.onload = wireEvent;
</script>
or I enclose the whole function in
$( document ).ready
and only include the function's file to my html?
The code below executes only after all your images load completely. So you can try this:
$(document).on('load', function(){
wireEvent();
});
You can just do:
$(function(){
//jQuery code here
});
I have a wordpress page where I want to display a featured image on the header of the homepage, but no other pages. I set up a script to read whether the body tag contains the "home" class and display an image based on that. The code looks like this:
<script>
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
</script>
What's wrong with this script?
Try to wrap your code into function fired on DOM ready:
<script>
$(function() {
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
</script>
More info
jQuery needs to know when to start the function. Start it after the document is ready.
$(document).ready(function(){
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
Did you include jQuery library in your header section? Also some times $ symbol may conflict in wordpress, write full jQuery term when initialize jQuery this way:
jQuery(document).ready(function(){
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
Ive successfully appended a html file to my website containing only the menu and title image.
I wanted every web page on my website to have the same menu , title and structure.
Everything works fine but I have no idea how to edit a div that I added using append function (jquery).
for example: lets say that I appeneded a file named "include.html" and that file contains a div named "website". is there any way I can add code/content to that DIV after appending it ?
I need access to the DIVS appended by the APPEND function in order to add unique texts/information for each page..
here is some code:
A sample page :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cstyles.css">
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript' src='menu2.js'></script>
<script type='text/javascript' src='menu_load.js'></script>
</head>
<body>
<script>loadContent();
$(document).on('mouseenter', "#menulist", function() {
mainmenu();
});
</script>
</body>
</html>
here's the menu2.js code:
function mainmenu() {
$(" #menulist li").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"}).show(300);
},function() {
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function() {
mainmenu();
});
here's the menu_load.js code:
function loadContent() {
$("body").append($("<div id='index'>").load("include.html"));
}
The reason Im trying to do that is that I want to add unique information on the main DIV containing the website.. If theres a better way doing that (without JQUERY append) i would love to know..
Thanks in advance!
use html() or text() .. to append content inside div with id website.. after the include.html is appended on load callback function
callback function: If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.
try this
function loadContent()
{
$("body").append($("<div id='index'>").load("include.html", function() {
$("#website").text("HELLO"); // OR $("website").html("HELLO");
});
}
Yes. Find the id (or some other jquery way of finding that div), and just call a function on the load:
function loadContent() {
$("body").append($("<div id='index'></div>").load("include.html", {}, function() {
$("#div_id").html(new_content);
});
}
Let me know if you have any problems.
You can pass a callback function to the load(...) call in jQuery. So, you could do something like this:
$("body").append($("<div id='index'>").load("include.html", function () {
$(this).append("<div>your html content</div>");
}));
This will insert the text your html content to the end of the div. Obviously, you could use something other than append if you wanted it to be somewhere else.
I'm trying to change the content of the portfolio section of my website. I have a div called .portfolio_box, which contains a small preview of the project (each project div also has a different id). When you click on this div (.portfolio_box) I want the content of the content div (#main_content) to go away and be replaced with the corresponding content.
I found the following tutorial and adjusted the script to my needs:
<script type="text/javascript">
$(document).ready(function()
{
$("#thomasschoof_old").click(function()
{
/*hide( 'fast', function()
{
$('#main_content').load(thomasschoof_old.html,'',showNewContent);
} );
var toLoad = $(this).attr('href')+' #main_content'; */
$('#main_content').hide('fast',loadContent);
$('#page').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
});
function loadContent()
{
$('#main_content').load('thomasschoof_old.html #project','',showNewContent)
}
function showNewContent()
{
$('#main_content').show('normal',hideLoader);
}
function hideLoader()
{
$('#load').fadeOut('normal');
}
return false;
});
</script>
But when I click on the div #thomasschoof_old nothing happens. I don't know a lot about jQuery or Javascript (just getting into it) and I really can't get it figured out.
You can view the web page here: http://jowannes.com/thomasschoof/portfolio.html
I hope somebody can help me, Thanks in advance!
Thomas
Your problem is, that you wrote your JS code inside scripts tags that are used to load an external script file (jQuery). You script just wont ge executed that way.
src: This attribute specifies the URI of an external script; this can
be used as an alternative to embedding a script directly within a
document. script elements with an src attribute specified should not
have a script embedded within its tags.
From: https://developer.mozilla.org/en-US/docs/HTML/Element/Script
Set up a separate script tag for you code or include it from a second external script-file and see what happens.
I am working on a pure jquery/js site, mostly to practice some jquery. I am using a load statement to load a menu from a file of common html, like so:
$('#categoryListing').load('../common.html #categoryLinksUL');
which loads:
<ul id="categoryLinksUL">
<li>Anklets</li>
<li>Bracelets</li>
</ul>
The problem is where I am using it now I need to alter the href of the above links, but they are not part of the dom. In previous instances I was able to use .live(click... But not here. Is there a way I can accomplish this?
Specifically I need to load the links and change the href from #anklets to ?category=anklets
What about the following?
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('li a[href^="#"']').each(function () {
this.href = '?category=' + this.href.substr(1);
});
});
In my example, after the load is completed, the anonymous function is called. It takes every anchor with a hash HREF and replaces it with an HREF based on your description.
Thank you Dimitry, you solution basically worked. I finally used:
$('#categoryListing').load('../common.html #categoryLinksUL', function() {
$('#categoryListing li a').each(function () {
var hashPos=this.href.indexOf("#");
var tCategory = this.href.substr(hashPos+1,this.href.length );
});
});
So why did jQuery recognize categoryListing there? I tried moving the each function outside of the load function and categoryListing did not contain any links. Is it because maybe the load was not completed when it tried to get categoryListing links? Seems like that is possible.
Thanks,
Todd