Autorefresh DIV, No PHP - javascript

I want to autorefresh a div on this page: http://americanart.si.edu/index_newsplash3r.cfm ("Places to Explore" area). Right now we have 3 different images and text that arbitrarily display when you reload the page. I'd like these elements to change automatically, without reloading the page.
The page is done in Coldfusion 9. Most AJAX autorefresh code assumes you're using PHP.
Does anyone have a link to code I could use to do this without PHP? I don't think it's necessary that it be Coldfusion code.
Thanks.

You can setup an Ajax call to the server side to get the photo path and the text.
Something like this.
$(function(){
function FillDivAtRandom(current){
setTimeout(function(){
//pass the current place to explore id to the server so you don't get the same back, if none then return anyone.
$.post("http://americanart.si.edu/Request/PlacesToExploreNext", current, function(data){
//fill the div with new data return from server
//you don't seem to have an ID on that div or elements so put one on it first then use it as a selector
//set the image
$('#placestoexplore_image').attr('src', data.image);
//set the text
$('#placestoexplore_description').html(data.description);
});
//call the function again
FillDivAtRandom(current);
}, 10000);
}
}

Related

Load whole page with jquery ajax

I want to load whole page into my browser using ajax. I want it to look like general page navigation (like when user clicks some link).
I have a select tag, and want to navigate to appropriate page when select is selected.
I guess I have to do it with ajax,
I am trying like that:
courseSelect.on('change', function(){
var courseId = this.value;
// start search of the course by courseId
$(document).load('/courses/'+courseId+'');
});
I get my html response, but nothing happens.
Use body instead of document:
$("body").load('/courses/'+courseId);
Also I would advice you to use a container instead of loading it fully on the document.
Something like this would what I would suggest you:
$("#content").html('<img src="loading.gif" />').load('/courses/'+courseId);

Jquery pagination which dont load all data at once

I am searching this for an hour but I dont get any perfect solution for it. I want pagination which doesnot load all data at once and loads only what are currently showing on the page. I dont want to refresh whole page while going from 1st page to any other page of pagination. And I am preffering to use JQuery. Just give me any good pagination link. I dont have tables I have divisions for pagination
This would be pretty simple to do by hand, no libraries needed. You'd put an event listener on the buttons
$('#button').on('click', function(){
changePage($(this).data('page-number');
}
var changePage = function(pageNumber)
{
$.ajax({
url: 'whatever.php',
data: {
page_number: pageNumber
},
success: function(r){
var html = //build html based on ajax respone
$('#page-wrapper').empty().append(html);
}
});
}
Realistically though if there are not going to be a huge amount of pages, you should get the data for ALL the pages and simply store it in Javascript variables and then access those variables when you click a page number.

updating page without affecting the process going on

Hello all have a div1 which contains many other divs2,div3.....
and i want to reload div div1 after every 13 sec but without affecting the process that we are doing on other divs process may be typing messages ,viewing image etc..
can anyone please help me with this..
this is thepiece of code that i have used yet..
the code is working fine it reloads the div1 but every time it loads i need to type the message again if i have not posted it ..and some times it scroll down too..
var auto_refresh = setInterval(
function ()
{
$('#div1').load('home.php #div1').fadeIn("slow");
}, 13000);
You can pass arguments via load, Say draft for not saved and post for saved one. Suppose $('#myContent') contains your post content then the following code can be used:
$("#myDiv").load("home.php?post="+$('#myContent').val())//send posted data
OR
$("#myDiv").load("home.php?, {draft:$('#myContent').val() })//send draft data

jQuery code repeating problem

I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.
jQuery JS:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
$("#fileuploadframe").load(function(){
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{action:"savePage",html:response, id: theID},
function(data){
alert(data);
});
});
});
HTML Links ( one of many ):
<a href="templates/1000/files/index.php?pg=0&preview=false"
target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>
So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked on. I have checked my PHP and am pretty positive the fault is with the JS.
I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.
I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)
Thanks ahead of time,
Key
From jQuery .load() documentation I think you need to change your script to:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
var lnk = $(this).attr("href");//LINK TO LOAD
$("#fileuploadframe").load(lnk,
function(){
//EXECUTE AFTER LOAD IS COMPLETE
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{
action:"savePage",
html:response,
id: theID
},
function(data){alert(data);}
);
});
});
As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.
This is because the line
$("#fileuploadframe").load(function(){
Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.
If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.

How can I include a div from another page?

Basically I'm trying to scrape a few divs out of several of the intranet sites at work. and include them on a page I run locally (so I can look at one page instead of having 5 open). I'm guessing this is possible with JavaScript but I'm primitive with JavaScript so I'm not sure what I need to search for to find the answers. After I scrape the Div's from these other pages I want to add a refresh timer with something like setInterval()
This task is not as difficult as it should be, thanks to the glorious jQuery library...
$(document).ready(function() {
// Repeat this for each of your URLs
$.get("URL", function(data) {
var resp = $(data); // Now you can do whatever you want with it
$("#ID_OF_DIV", resp).appendTo("body");
});
// End Repeat
setTimeout(function() {
location.reload(true);
}, 10000); // Refresh every ten seconds
});
You can to access those external pages using an XMLHttpRequest object, grab it's HTML source and strip just that information you want.
maybe this link can be useful: Auto refresh <DIV> using ajax

Categories

Resources