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) {
I have a problem reloading jScrollPane after I use ajax. Although this issue seems to be asked a lot, I still haven't figured it out (after spending hours on it).
So here's my javascript code:
function search(str) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("searchresult").innerHTML = xmlhttp.responseText;
document.getElementById("searchresult").style.display = "inline";
$('.searchresult').jScrollPane({autoReinitialise: true});
}
}
xmlhttp.open("POST", "ajax/search.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("q=" + str);
}
So although I'm reintitialising JscrollPane it still doesn't come up after the div content is being replace by ajax.
Any solution?
I managed to solve it with api getContentPane.
I added the following code in the top of the script:
$(document).ready(function() {
jQuery('.searchresult').jScrollPane({
showArrows: true,
autoReinitialise: false
});
})
And I replaced this:
document.getElementById("searchresult").innerHTML = xmlhttp.responseText;
document.getElementById("searchresult").style.display = "inline";
$('.searchresult').jScrollPane({autoReinitialise: true});
with:
api = jQuery("#searchresult").data('jsp');
api.getContentPane().html(xmlhttp.responseText);
document.getElementById("results").style.display="inline";
api.reinitialise();
I am working with javascript cross domain ajax request. my code is working fine on chrome and other devices like android browser and android native app using phonegap.
But i was facing issue with Firefox..
Firefox does not support my PUT and DELETE requests.
Is there any solution for firefox to make put and delete request to my server.
firefox does support my post and get request. both request working fine.
here is my working code.
var XMLHttpFactories = [
function () {
return new XMLHttpRequest()
},
function () {
return new ActiveXObject("Msxml2.XMLHTTP")
},
function () {
return new ActiveXObject("Msxml3.XMLHTTP")
},
function () {
return new ActiveXObject("Microsoft.XMLHTTP")
}
];
function createXMLHTTPObject() {
var xmlhttp = false;
for (var i=0;i<XMLHttpFactories.length;i++) {
try {
xmlhttp = XMLHttpFactories[i]();
}
catch (e) {
continue;
}
break;
}
return xmlhttp;
}
For send Put request..
var xhr = createXMLHTTPObject();
xhr.open("PUT", url,true);
xhr.onreadystatechange=function()
{
if (xhr.readyState==4)
{
if(xhr.status==200){
request.success(xhr.responseText);
}else if(xhr.status!=200){
request.error(xhr.responseText)
}
}
}
xhr.send(body);
The following is working just fine on Firefox 22.0 (& 23.0 too):
var XMLHttpFactories = [
function () {
return new XMLHttpRequest()
},
function () {
return new ActiveXObject("Msxml2.XMLHTTP")
},
function () {
return new ActiveXObject("Msxml3.XMLHTTP")
},
function () {
return new ActiveXObject("Microsoft.XMLHTTP")
}
];
function createXMLHTTPObject() {
var xmlhttp = false;
for (var i=0;i<XMLHttpFactories.length;i++) {
try {
xmlhttp = XMLHttpFactories[i]();
}
catch (e) {
continue;
}
break;
}
return xmlhttp;
}
var xhr = createXMLHTTPObject();
xhr.open("PUT", "/echo/html/", true);
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
alert("Request completed, with the following status code: " + xhr.status);
}
xhr.send("");
Here is a jsFiddle: http://jsfiddle.net/qXQtD/
To better understand your situation, please answer the following:
What is the data you are trying to send?
What are your complete response headers (especially the "Access-Control-Allow-Origin" header)?
I want the mobile version of my site to be as snappy as possible, however i still want some basic analytics.
I want to ping a php file (hit counter) after the mobile page has loaded to count the amount of hits from javascript enabled browsers.
Jquery's a bit overkill for 1 ajax function so i'm keen to learn how to do the following in pure javascript:
<script type="text/javascript">
Window.onload(function(){
$.get('mvc/assets/ajax/analytics/event_increment.php?id='+id');
})
</script>
Create a utility function that will return to you a browser-specific Ajax object:
function ajax(url, method, callback, params = null) {
var obj;
try {
obj = new XMLHttpRequest();
} catch(e){
try {
obj = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
obj = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("Your browser does not support Ajax.");
return false;
}
}
}
obj.onreadystatechange = function() {
if(obj.readyState == 4) {
callback(obj);
}
}
obj.open(method, url, true);
obj.send(params);
return obj;
}
You could then call that function like this:
var ajax = ajax('someurl', 'get', function(obj) { alert(obj.responseText); })
Just specify your file as the src attribute for the script tag.
Something simplistic:
<div id="hidden"></div>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById("hidden");
div.innerHTML = "<img src='tracking.php' />";
};
</script>
#Mike is suggesting a great method. If you would like to get into AJAX, though, it's not that difficult.
Code c/o bobince
var xhr= new XMLHttpRequest();
xhr.open('GET', 'x.html', true);
xhr.onreadystatechange= function() {
if (this.readyState!==4) return;
if (this.status!==200) return; // or whatever error handling you want
document.getElementById('y').innerHTML= this.responseText;
};
xhr.send();
// FOR <IE8 Compatibility do this first:
if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
window.XMLHttpRequest= function() {
return new ActiveXObject('MSXML2.XMLHttp');
};
}
replace x.html with your php file
While it is possible to create an image tag with that url as the src if you want to do it via AJAX as jQuery does there you could do this:
<script type="text/javascript">
function report(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",'mvc/assets/ajax/analytics/event_increment.php?id='+id',true);
}
window.onload = report;
</script>
You can use an img tag and put that in the src, and have your script return a transparent image.
Or as someone else pointed out, have it be the src of a script tag.
EDIT
If you don't want it to load if a bot accesses the page, you could use an img tag still
<img src="transparent.gif" width="1" height="1" />
Then, use javascript to change the src of the image to your php script. Most bots won't execute the javascript and therefor will never access your php script.
You may want to obfuscate the javascript a little though, so they don't see a url in it and try and access it.
<script type="text/javascript">
Window.onload(function(){
var id = "", xmlhttp = null;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp) {
xmlhttp.open("GET","mvc/assets/ajax/analytics/event_increment.php?id=" + id,true);
xmlhttp.send();
}
})
</script>
there existed image preloaders in the early days of webpages, when internet connections were still slow, which created image objects to be used for rollover effects. this should still work and load the image:
<script type="text/javascript">
var img = new Image('http://url.to/your/image/or/script');
</script>
As 2019 you can use ES6 fetch a modern replacement for XMLHttpRequest.
const options = {
method: "POST",
data: {
title: "foo",
body: "bar",
userId: 1
},
credentials: "include",
headers: {}
};
fetch("https://jsonplaceholder.typicode.com/posts", options)
.then(response => {
return response.json();
})
.then(jsonObject => {
console.log(jsonObject);
document.write(`ID ${jsonObject.id} was created!`);
})
.catch(error => {
document.write(error);
});
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);
}