I have a button calling an ajax function which loads a PHP script returned as innerHTML. It does return the output to the screen but the problem looks to be that it is not implementing javascript to format the outputted HTML. So I should have 6 boxes per line (dictated by salvattore.js) but instead it stretches 1 div across the screen. I can also tell my own js is not initialised until I do a window resize. Heres the script..
function submitForms() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("searchResults").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","ideasSearch.php?",true);
xmlhttp.send();
}
and HTML
<div id="searchResults"></div>
Related
I am ganging my head against the wall for 3 hours now. I have this code:
function showpctask() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("pcactivitytask").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","showpctask.php"+,true);
xmlhttp.send();
}
that opens up a php file inside a div (id = pcactivitytask). That php file builds a 'select'
I also have this function right here:
function setpctaskwidth() {
var maxtaskwidth = 0;
$("div .pcactivitytask").each(function(){
c_width = parseInt($(this).width());
if (c_width > maxtaskwidth) {
maxtaskwidth = c_width;
}
});
alert (maxtaskwidth);
}
that will show me the max width of all elements with the the class of "pcactivitytask". Yes, the select created by the previous script has that class. If I call both these function it will NOT include the width of the NEWLY created select..... I need to run it AGAIN 'manuall'. I need my script to "onclick" BOTH build the NEW select AND include it in finding the max width by the second script. Thank you.
XMLhttprequest works asynchronously, meaning it does not happen in order.
that is why you have the xmlhttp.onreadystatechange callback function, that only runs once the request is finished
you do not specify how you call these two functions but I would expect to see the call to setpctaskwidth() inside the onreadystatechange function like this:
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("pcactivitytask").innerHTML = xmlhttp.responseText;
setpctaskwidth();
}
};
be advised that if the response includes images or other external resources (fonts etc) that don't already exist in the page you might get a different size than the actual final size (it will measure the size before the image is loaded)
This is my first php project. I have imlemented partial ajax postback by refering to this article: PHP AJAX SQL reference article
Now, I am trying to show a loading gif when the partial loading starts and hide it when the partial loading completes. Here is the code that I am using in Javascript:
function showUser1(str)
{
if (str == "")
{
document.getElementById("mems").innerHTML = "I caanot fetch: " + str;
return;
}
else
{
document.getElementById("loadgif").style.visibility= "visible";
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("outerpicwrapper").innerHTML = "";
document.getElementById("mems").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getmembers.php?q2="+str,true);
xmlhttp.send();
document.getElementById("loadgif").style.visibility= "hidden";
}
}
In the first line of body, I have written:
<img id="loadgif" src="img/loading.gif" class="loadinggif" />
In the CSS file, i have written:
.loadinggif
{
position: absolute;
z-index: 200;
visibility: hidden;
}
The code is working fine and shows the data but, loading gif is not shown.
I have even tried display:none and display:block in place of visibility.
Kindly help.
The problem is AJAX is asynchronous. Thus your code doesn't wait for the data to be fetched and
document.getElementById("loadgif").style.visibility= "visible";
document.getElementById("loadgif").style.visibility= "hidden";
These lines are executed simultaneously.
To prevent this from happening you can put
document.getElementById("loadgif").style.visibility= "hidden";
inside the callback as well
function showUser1(str)
{
if (str == "")
{
document.getElementById("mems").innerHTML = "I caanot fetch: " + str;
return;
}
else
{
document.getElementById("loadgif").style.visibility= "visible"; // This line displays the loading gif
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("outerpicwrapper").innerHTML = "";
document.getElementById("mems").innerHTML = xmlhttp.responseText;
document.getElementById("loadgif").style.visibility= "hidden"; // This line hides the loading gif
}
};
xmlhttp.open("GET","getmembers.php?q2="+str,true);
xmlhttp.send();
}
}
Finally, I made my issue work out using JQuery.
I just made display:none in CSS and called the show() function of jquery on the loading gif div. This show function was written inside the javascript code.
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();
In gmail, we can see that if we open a mail, the address changes from
https://mail.google.com/mail/u/0/#inbox to this https://mail.google.com/mail/u/0/#inbox/14552c232aa5a9f4
without reloading the whole page, that is i can bookmark the content in a div which is dynamic
function load(thediv,thefile) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState ==4 && xmlhttp.status == 200){
document.getElementById(thediv).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET',thefile,true);
xmlhttp.send();
}
I have tried this ajax code to load dynamic content to a div...but I can't bookmark it.
how can I do that in my website?
This method is calling 'pushstate'. For more information you can see this or this
While user is in a specific page I should allow them to click on a link. Then a lightbox to be shown and once form inside lightbox has been submitted, the lightbox should be closed and user should be redirected to index page.
I have two javascript function, first one is used to show the lightbox, and second one is to submit lightbox form and fading it. The problem is that I do not know how to redirect user to index page.
function rateItem(){
document.getElementById("box").style.display = "Block";
document.getElementById("frame").style.display = "Block";
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("box").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("get","../Item/rate",false);
xmlhttp.send();
return false;
}
function rate(id){
rate = $('#rate').val();
document.getElementById("box").style.display = "Block";
document.getElementById("frame").style.display = "Block";
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("box").style.display = "none";
document.getElementById("frame").style.display = "none";
window.location="http://localhost:9001/index"; << does not work
window.location.replace("http://localhost:9001/index"); <<does not work
}
}
xmlhttp.open("POST","../Item/submit?rate="+rate+"&id="+id,false);
xmlhttp.send();
}
Any jquery solution would be appreciated as well
Replace the line
window.location="http://localhost:9001/index";
with this
window.location.replace("http://localhost:9001/index");
For jquery based redirection use this:
var url = "http://localhost:9001/index";
$(location).attr('href',url);
Try using:
window.location.href=url