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();
Related
I am trying to make a landing page with json. I am trying to have it so when someone clicks it goes to a page from the json file. So far I have this:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
var Link = JSON.parse(this.responseText);
document.getElementById("Link1").innerHTML = Link.title;
}
};
xmlhttp.open("GET", "link.json", true);
xmlhttp.send();
function click1(){
window.location.href = Link.link;
}
And when I click on it it gives me (from console):
(index):22 Uncaught ReferenceError: Link is not defined at click1 ((index):22) at HTMLAnchorElement.onclick ((index):8)
Assuming your JSON content has properties title and link, and that your click1 handler has been properly registered, you should be able to combine what you have into something like this:
function click1() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var Link = JSON.parse(this.responseText);
document.getElementById("Link1").innerHTML = Link.title;
window.location.href = Link.link;
}
};
xmlhttp.open("GET", "link.json", true);
xmlhttp.send();
}
Note that setting the innerHTML of an element before window.location.href = Link.link; is somewhat pointless because updating window.location will cause a new page to load.
I got this code, to simple to have any errors and still...
I have a nav, where the onclick calls for clicker(nodenr) what should load an external site in an div.
function clicker(nodenr) {
var url=links[nodenr];
console.log(nodenr);
var request = new XMLHttpRequest();
request.open('GET', ''+url+'', true);
//request.open('GET', ''url, true);
request.onreadystatechange = function (event) {
if(request.readyState == 4) {
if(request.status == 200) {
console.log("hello");
document.getElementById("content").innerHTML = request.responseText;
}
else {
document.getElementById("content").innerHTML = "Service not loading.";
}
}
};
}
What basic error have I made? Please correct me. :)
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>
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
function processAjaxStateChangeForRowAdd() {
alert(0);
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
processForRowAdd(req.responseText);
} else {
alert("Problem: " + req.statusText);
}
}
}
This code is working fine for IE, Safari and Firefox, but if I remove the alert, then the code will not work in Firefox, though it still works in IE and Safari.
Can anybody give me suggestion why it not working in Firefox without alert?
EDIT: Code that adds a row:
if (window.XMLHttpRequest && browserVersion.indexOf("Microsoft") == -1 ) {
// code for Firefox, Chrome, Opera, Safari
req = new XMLHttpRequest("");
if (req) {
ajaxProcessed = false;
req.onreadystatechange = processAjaxStateChangeForRowAdd;
req.open("POST", url, true);
req.send();
// alert("1");
}
}
The alert is blocking. What this means is that your script is temporarily suspended (even if it's for a few milliseconds). During this time, your AJAX request completes and your req object is being set. You can add a delay (using setTimeout) to your callback to verify this.
I would suggest you post more of your script so that we can help you set up your callback properly. Alternatively, use a library such as jQuery to set up AJAX calls in a cross-browser manner easily.
EDIT: You need to either declare req as a global variable, or use an anonymous function. The following code demonstrates the first method (using a global variable):
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
if (req) {
req.onreadystatechange = processAjaxStateChangeForRowAdd;
req.open("POST", url, true);
req.send();
}
}
function processAjaxStateChangeForRowAdd() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
processForRowAdd(req.responseText);
} else {
alert("Problem: " + req.statusText);
}
}
}
function getHttp()
{
var xmlhttp;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
if(typeof XMLHttpRequest != 'undefiend')
{
xmlhttp = new XMLHttpRequest();
}
}
}
return xmlhttp;
}
can you try this:
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
} else
alert("status: " + request.status);
}
You should also check for the readyState , the following code might help
req.onreadystatechange=function()
{
if (req.readyState==4 && req.status==200)
{
processForRowAdd(req.responseText)
}
}
Read this for the different values of readyState