Develop Reference

Ajax Request by external page and history.pushState together

There is a way for combine these two technologies so that they work together when we are alredy in the div "result" ?
Let's see the problem.. We have the first code that do the ajax request
var http_request = false;
function makeRequest(url,getvar,funzione) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
//http_request.overrideMimeType('text/xml');
// See note below about this line
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Errore :( Non riesco a creare unna connessione XMLHTTP');
return false;
}
http_request.onreadystatechange = funzione;
http_request.open('POST', url, true);
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http_request.send(getvar);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
document.getElementById("result").innerHTML = http_request.responseText;
} else {
alert('C\'è stato un problema alla connessione.');
}
}else{
document.getElementById("result").innerHTML ="loading";
}
}
And another function that edit the andress bar..
jQuery(document).ready(function() {
$('a.clickurl').click(function(event) {
var currentPage = document.location.pathname.substring(document.location.pathname.lastIndexOf('/') + 1);
if ($(this).attr('href') != currentPage){
if (history && history.pushState) {
history.pushState(null, document.title, $(this).attr('href'));
$.get($(this).attr('href'), {ajax:'1'}, function(data, text, xhr) {
pageSlider(data, text, xhr);
});
event.preventDefault();
}
}
});
after the first istance we got result on the div.. and up to here everything is working correctly, but how let the function work also in the links inside the "result" div?
setting a href="#" the ajaxrequest work correctly and just reflash the "result" div.. but if i set an different address loads the entire page..
ps. i already tried return false;

Problem is the fact that you are not binidng events to the dynamic content. You need to either rebind or use event delegation.
$(document).on("click", 'a.clickurl', function(event) {
or even better if all the links are only in the result div
$("#result").on("click", 'a.clickurl', function(event) {

Trying to add delay to jQuery AJAX request

I am trying to delay an AJAX request so that it is sent out 2-3 seconds after the LAST keyup of an input cell.
So far I have managed to delay the requests, but after 2-3 seconds I get one request sent for every keyup in the field...
How can I make jQuery cancel the first ones and just send the last keyup?
Here's the code so far:
$('#lastname').focus(function(){
$('.terms :input').val(""); //clears other search fields
}).keyup(function(){
caps(this); //another function that capitalizes the field
$type = $(this).attr("id"); // just passing the type of desired search to the php file
setTimeout(function(){ // setting the delay for each keypress
ajaxSearchRequest($type); //runs the ajax request
}, 1000);
});
This code above, waits 1 sec then sends 4-5 AJAX requests depending on keypresses.
I just want one sent after the last keyup
I have found some similar solutions in StackOverflow that use Javascript, but I have not been able to implement them to my project due to my small knowledge of programming.
[SOLVED]
Final working code, thanks to #Dr.Molle:
$('#lastname').focus(function(){
$('.terms :input').val("");
}).keyup(function(){
caps(this);
$type = $(this).attr("id");
window.timer=setTimeout(function(){ // setting the delay for each keypress
ajaxSearchRequest($type); //runs the ajax request
}, 3000);
}).keydown(function(){clearTimeout(window.timer);});
Here's the ajaxSearchRequest code:
function ajaxSearchRequest($type){
var ajaxRequest2; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest2 = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Browser error!");
return false;
}
}
}
ajaxRequest2.onreadystatechange = function(){
if(ajaxRequest2.readyState == 4){
$result = ajaxRequest2.responseText;
$('#resultcontainer').html($result);
}}
var searchterm = document.getElementById($type).value;
var queryString ="?searchterm=" + searchterm +"&type=" +$type;
if(searchterm !== ""){
ajaxRequest2.open("GET", "searchrequest.php" +
queryString, true);
ajaxRequest2.send(null);
}
}

store the timeout in a variable, so you will be able to clear recent timeouts:
clearTimeout(window.timer);
window.timer=setTimeout(function(){ // setting the delay for each keypress
ajaxSearchRequest($type); //runs the ajax request
}, 3000);

What you are trying to do is called debouncing.
Here's a jquery plugin by Ben Alman that does the job.
And underscore.js includes this functionality as well.
There's really no need to hack the ajax request system. Just make sure it's called at the right moment.

I like the Molle's answer But I would to further improve the performance
var ajaxRequest2; // The variable that makes Ajax possible!
function getAjaxObject()
{
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest2 = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Browser error!");
// return false;
}
}
}
return ajaxRequest2;
}
getAjaxObject();
function ajaxSearchRequest($type){
if(typeof ajaxRequest2 =="undefined" || ajaxRequest2 == false)
{
return;
}
ajaxRequest2.abort();
ajaxRequest2.onreadystatechange = function(){
if(ajaxRequest2.readyState == 4){
$result = ajaxRequest2.responseText;
$('#resultcontainer').html($result);
}}
var searchterm = document.getElementById($type).value;
var queryString ="?searchterm=" + searchterm +"&type=" +$type;
if(searchterm !== ""){
ajaxRequest2.open("GET", "searchrequest.php" +
queryString, true);
ajaxRequest2.send(null);
}
}
This change will abort an on going ajax request and send a fresh request. It is helpful when you
Typed-> waited 4 sec ->request sent ->typed again (response not received) ->waited 4 second->another request fires

Chained drop down box value not showing in IE 7,8,9 or lower browser

Here is my javascript code::---
<script language="javascript" type="text/javascript">
//Browser Support Code
function ajaxFunction(str){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
var url="../frontend/views/home/category.php" + "?value="+str;
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
//document.myForm.time.value = ajaxRequest.responseText;
document.getElementById("class").innerHTML=ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
</script>

how to call remote page in div?

this is my code for taking external page into div using ajax
what i tried is i clicked on button i must display the response in div
but i tried several times but doesn't works.
my javascript code is
var rootdomain="http://"+window.location.hostname
function ajaxinclude(url) {
var url=rootdomain+url;
alert(url);
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.open('GET', url, false) //get page synchronously
page_request.send(null)
writecontent(page_request)
}
function writecontent(page_request){
if (window.location.href.indexOf("http")==-1 || page_request.status==200)
document.getElementById("eee").innerHTML=(page_request.responseText);
}
and this is my body section :-----
<input type="button" onclick="ajaxinclude('/songcake/index.php')" value="Click !" />
<div id="eee" style=" width:400px; height:800px;">
</div>
please help
Thanks.

Use jQuery and you can just do something like
$.get('/songcake/index.php', function(data) { $("#eee").html(data); });

attach your method to onreadystatechange which not there in your code
page_request.onreadystatechange = writecontent;
function writecontent() {
if (page_request.readyState != 4) { return; }
document.getElementById("eee").innerHTML=(page_request.responseText);
}

Browser compatibility with AJAX function

I have the following AJAX function that calls a PHP file to determine if an email is present in a db.
<script language="javascript" type="text/javascript">
//Browser Support Code
function ajaxFunction(Email){
var url="index.php?EmailCheck=Yes&Email=" + Email;
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
if(ajaxRequest.responseText == 0) {
alert("Sorry that email is not registered.");
} else {
alert("Login successful.");
window.opener.location.reload();
window.close();
}
}
}
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
Are there going to be any browsers this won't work for? I have had some complaints from users, but I can't replicate the errors in IE, FF, or Chrome.

It won't work in Lynx, and it probably won't work in some specialized screen-reader browsers. If you seriously expect to have users for which it won't work, for God's sake fix the error message. Better yet, use something like jQuery. Realize that it's possible to fall back to an alternative approach of using a hidden <iframe> or something instead of XMLHTTPRequest.