JavaScript - Javascript Files Are Not Working On Ajax Callback

Hey, as the subject says... I'm struggling to call other external files from within a file, requested by an Ajax.Request.

It's bascically a request to call a file that updates a mysql database, and I want to include my database connection php file so I don't have to keep repeating my connection settings.

here is the request:

Code:

new Ajax.Request('tools/server_reorder_list.php', options);

and within that file I'm trying to do something like this:

Code:

include ("../config/dbconnect.php");

$i=1;
foreach($_POST['item_list'] as $key=>$value) {
mysql_query("UPDATE `cs_pages` SET `position`='".$i."' WHERE id_page ='".$value."'");
$i++;
}

I've tried all kinds of ways to include the files, from the above, to typing the entire path.

The only way I can get this request to work is by actually typing my connection settings in the requested file.

Any help greatly appreciated.

Thanks!

Code:

function addEvent(elem,type,func) {
	var obj = document.getElementById(elem);
	if(window.addEventListener) {
		obj.addEventListener(type,func,false);
	}
	if(window.attachEvent) {
		obj.attachEvent('on'+type,func);
	}
}

function $e(obj) {
	if(obj) obj = document.getElementById(obj);
	if(!obj) return;
	return obj;
}	

function homeFunc() {
	$e('home-wrapper').innerHTML = "<div id=\"choose-container\"><span class=\"choose-buttons\" onclick=\"loginFunc()\">Login Exisiting Account</span><span class=\"choose-buttons\" id=\"createAcct\">Create An New Account</span><span class=\"choose-buttons-highscores\" id=\"createAcct\">Highscores Table</span>";
}

function loginFunc() {
	$e('home-wrapper').innerHTML = "<div id=\"login-container\"><div id=\"error-field\"></div><form method=\"post\" onsubmit=\"return validate_login()\" action=\"./index.php\"><label for=\"username\">Username</label><input name=\"username\" id=\"username\" class=\"input\" type=\"text\" />  <label for=\"password\">Password</label><input name=\"password\" id=\"password\" class=\"input\" type=\"password\" /><input name=\"login\" type=\"submit\" value=\"Login\" class=\"loginButtonClass\" /><div id=\"loginQuickLinks\"><span class=\"loginQuickLinks\" onclick=\"homeFunc()\">Register</span>&nbsp;-&nbsp;<span class=\"loginQuickLinks\">Forgot password?</span></form></div></div>";
}

function createAcct() {
	alert("Create An Account");
}

function validate_usr() {
	var usr = $e('username');
	var pwd = $e('password');
	
	if(usr.value.length <= 0 && pwd.value.length <= 0) {
		 loginErrorMsg('Please supply a username and password.');
		return false;
	}
	if(usr.value.length >= 1 && pwd.value.length <= 0) {
		loginErrorMsg('Please supply a password.');
		return false;
	}
	if(pwd.value.length >= 5 && usr.value.length <= 0) {
		loginErrorMsg('Please supply a username.');
		return false;
	}
	if(pwd.value.length < 5) {
		loginErrorMsg('Invalid username or password.');
		return false;
	}
	
	if(usr.value.length >= 1 && pwd.value.length >= 5) {
	$e('error-field').style.cssText='display:block;';
	$e('error-field').innerHTML = "<img src=\"/images/ajax-loader.gif\" /> <span style=\"color:#ffffff\">Loading...</span>";
		var req;
		var params = 'user='+encodeURIComponent(usr.value.toLowerCase())+'&pass='+encodeURIComponent(pwd.value.toLowerCase());
		if(window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		}
		if(window.ActiveXObject) {
			req = new ActiveXObject("Msxml2.XMLHTTP" || "Microsoft.XMLHTTP");
		}

		req.open('POST','server/userChck.php',true);
		req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		req.send(params);
		
		req.onreadystatechange = req;
		if(req.readyState == 4 && req.status == 200) {
			if(req.responseText == 0) {
				window.scrollTo(0,1);
				setTimeout(function(){loginErrorMsg('Invalid username or password');},1000);
				return false;
			}
			
		}
		
	}
	
	return true;
}

function loginErrorMsg(msg) {
		window.scrollTo(0,1);
	$e('error-field').innerHTML = msg;
	$e('error-field').style.cssText='display:block';
}

function validate_login() {

	var isTurn = (!validate_usr()) ? false : true;
	
	return isTurn;
	
}

window.onload = function() {
	setTimeout(function(){window.scrollTo(0,1);},100);
	addEvent('loginButton','click',loginFunc);
	addEvent('createAcct','click',homeFunc);
}

This code works fine when I set this line to false

Code:

req.open('POST','server/userChck.php',false);

but as soon as I set this to true. I doesn't work.... What am I doing wrong here?

In IE online.php script was executed once, In Firefox didn't worked at all... Where is the problem?

Here is my AJAX script:
PHP Code:
<script language="javascript" type="text/javascript">
<!-- 
// Get the HTTP Object
function gethttpObject2(){
   if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
   else if (window.XMLHttpRequest) return new XMLHttpRequest();
   else {
      alert("Your browser does not support AJAX.");
      return null;
   }
}   
 
// Change the value of the outputText field
function setOutput(){
    if(httpObject2.readyState == 4){
        document.getElementById('online').innerHTML = httpObject2.responseText;
    }
 
}
 
// Implement business logic    
function doWork(){    
    httpObject2 = gethttpObject2();
    if (httpObject2 != null) {
        httpObject2.open("GET", "../content/tables/tb_online.php", true);
        httpObject2.send(null); 
        httpObject2.onreadystatechange = setOutput;
    }
}
setInterval(doWork, 10);
 
var httpObject2 = null;
 
//-->
</script> 
<div id='online' ></div> 

i have made one page this is page link
http://pickthefights.com/fantansy-fi...482&page=fight
the code of this page is this


<script type="text/javascript">

////////////////////////////////
//
// Refreshing the DIV FANBOO2
//
////////////////////////////////

function refreshdiv_fanboo2(){

// Customise those settings

var seconds = 1;
var divid = "fanboo2";
var url = "http://pickthefights.com/fanboo2/?id=<?php echo $idvar ?>";

// Create xmlHttp

var xmlHttp_two = AJAX();

// No cache

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp_two.onreadystatechange=function(){
if(xmlHttp_two.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp_two.responseText;
setTimeout('refreshdiv_fanboo2()',seconds*1000);
}
}
xmlHttp_two.open("GET",nocacheurl,true);
xmlHttp_two.send(null);
}

// Start the refreshing process

window.onload = function startrefresh(){
setTimeout('refreshdiv_fanboo2()',seconds*1000);
}

</script>
<script type="text/javascript">
refreshdiv_fanboo2();
</script>
<div name="fanboo2" id="fanboo2"></div>

now what ever i put in fanboo2 page it works fine but javascript or jquery is not working here is code of fanboo2 page, you can check page here http://pickthefights.com/fanboo2/?id=482# here is it is working but not here http://pickthefights.com/fantansy-fi...482&page=fight


</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider();
});
</script>

<ul id="slider1">
<li>Slide one content</li>
<li>Slide two content</li>
<li>Slide three content</li>
<li>And so on...</li>
</ul>

please help me out i want to make java script work on both of this page

I have a page that has a simple AJAX call that works fine in firefox and chrome but not in ie. In IE my loading image shows up but the actual sourceURL never loads or shows. Below is my html and javascript code.
Can anyone help me with this?


<div id="design_strap" style="display:none">
<a href="javascript:loadContent('#content', 'strap.html');">Link</a>
<div id="content"></div>
</div>

<script type="text/javascript">

$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});

function loadContent(elementSelector, sourceUrl) {
$(""+elementSelector+"").html('<p><img src="images/loading.gif" width="150" height="150" /></p>');
$(""+elementSelector+"").load(""+sourceUrl+"");
//$("content").height(350);
}
</script>

** sorry for posting this here. Kinda rushed on time, hoping for some clues.


Hello, I am using this code: using prototype too.


Code:
Code:

var haveData = false;
[xmllink1, xmllink2, xmllink3].each(function(xmlURL){
if(haveData == false){
new Ajax.Request( xmlURL, {
  method: 'get',
    contentType: "application/xml",
  onSuccess: function( transport ) {
    var titles = transport.responseXML.getElementsByTagName( 'titles' );
    DO SOME WORK HERE
    haveData = true;
    throw $break;
    }
  },
            onFailu  function() {
               return;
            },
            onException: function(request,error) {
               return;
            }
  }

What I am trying to do is if my first item "xmllink1" has some data, we break out and end it and now we can 'build some structures' ie.. onSuccess

If xmllink1 doesn't have any valid data, we go to xmllink2 etc.. and so forth.

Basically, when I get some valid returns.. I want to then exit out of the loop and then act on my data. But I need it in order so I know that my xmllink1 is not being in a race conditiona with xmllink2 etc..

But what is happening is I have simulataneous things going on and I get an onException (because one of the links doesn't resolve or has bad data) and that ends up killing my javascript.

How can I test in order.. if link1 is good, great.. exit the "each method" and act on that data.. if xmllink1 is bad (onfairlure or onexception) lets go to xmllink2 etc....

any ideas?

Hi. Just started fooling around with Ajax a bit back. So far, it's been fine. Today, though, I'm hitting some error I can't figure out. It *should* work, but it doesn't, and I have no idea why.


Simple HTML form page with a bit of css. No big deal.
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <script type="text/javascript" src="livesearch.js"></script>
        <style type="text/css">
           #livesearch
              {
              margin:0px;
              width:194px;
              }
            #txt1
              {
              margin:0px;
              }
        </style>
    </head>
    <body>

        <form>
            <input type="text" id="txt1" size="30" onkeyup="showResult(this.value)" />
            <div id="livesearch"></div>
        </form>type

    </body>
</html>

Problem area below in bold.
Code:

function showResult(str){
    
    if (str.length == 0)
        {
            document.getElementById("livesearch").innerHTML = "";
            document.getElementById("livesearch").style.border = "0px";
        }

    var xmlhttp = getXMLHttpObject();
    
    if (xmlhttp == null){
       alert("Your browser does not support XML HTTP requests!");
       return;
       
    }


    var url = "livesearch.php";
    url = url + "?q=" + str;
    url = url + "&sid="+Math.random();
    
    xmlhttp.onreadystatechange=stateChanged ;
    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);
    
    

}

function stateChanged(){
    
    if (xmlhttp.readyState == 4){
        alert("Never seems to hit a readystate==4");
        document.getElementById("livesearch").innerhtml = xmlhttp.responseText;
        document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }


}


function getXMLHttpObject(){
    //Current browsers
    
    if (window.XMLHttpRequest){
       
        return new XMLHttpRequest();
    }

    //For IE 5/6
    if(window.ActiveXObject){
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
        {
        return null;
        }

}

My PHP file is just a simple echo statement to see that it works to that point. It doesn't. For whatever reason, it never seems to hit readyState ==4. It enters the function (I've checked with alerts), but the if statement never comes out to be true. I have no idea why. I've combed over the code for errors for a while now and I can't find anything.

Any ideas? Would be much obliged.

Can somebody help me to find the problem with the below given code, its not working.


$(document).on('keyup', ".add_commi", function() {
typingTimer = setTimeout(doneTyping, doneTypingInterval);
var pro = $(this).attr('id');
var selectvalue = $(this).html();

var id = pro.slice(-2);

var amount = $('#amount'+id).html();
var rate = $('#v_rate'+id).html();


//alert('working');
var data = 'cur_amount='+cur_amount +'&cur_rate='+cur_rate+'&commision='+selectvalue;

$.ajax({

type: "POST",
dataType: "json",
url: "http://localhost/agent/buy-currency-calculations/",
data: data,
success: function(output){

var cus_rate = output.cus_rate;
var total = output.total;
var tot_commision = output.commision;

alert(cus_rate, total, tot_commision);

$('#curr_rate'+id).html(cus_rate);
$('#tot'+id).html(total);
$('#tot_commi'+id).html(tot_commision);

}
});


return false;

});





Reply With Quote




01-09-2015, 02:53 PM #2
Dormilich View Profile View Forum Posts

Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts

cur_amount, cur_rate and selectvalue are supposedly primitive values (like numbers) but you fetch them as HTML code which the interpreting server script certainly can’t process. (if it should be indeed primitives, you should rather consider using form elements for that).

despite that jQuery has a method to fetch values off a form, which might be easier to implement, but that depends on the used HTML code.

additionally, in your browser’s dev tools you can check the network pane for what values are sent/received in the AJAX call.

hi,

When I navigate to a page with Ajax on my iphone or ipad, it doesn't show up, page is just blank, I have checked for errors and there is no errors?!

here is my Ajax code
Code:

function datecheckFunction(){
	var datecheckRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		datecheckRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				datecheckRequest = 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
	datecheckRequest.onreadystatechange = function(){
		if(datecheckRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = datecheckRequest.responseText;
		}
	}
	var datepicker = document.getElementById('datepicker').value;
	
	var queryString = "?datepicker=" + datepicker;
	//Add the following line
	datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true);
	datecheckRequest.send(null);
}

I'm writing a web app and so far:

- the user enters some information on the web page
- user data is submitted to a PHP script (using AJAX, so w/o a page refresh) which processes the data and generates a list of items that need to be returned to the user

Now, I need to return the data -- preferably in the form of a list, where each returned item has a check box (so the user can choose which items in this list the subsequent operations will affect).

However, can a PHP script effectively add/remove contents from such a checklist, or would this be something done better through Javascript only? For example: this, I think, or something similar.

Luckily the PHP script that processes the data is short at this point, so I'd like to know whether I should rewrite it in Javascript (assuming Javascript can deal with REST well) to avoid a hassle.

Hello,

I am using AJAX and got the output from AJAX like the below line

Ajax function

Code:

if (http_request.readyState == 4) {
    if (http_request.status == 200) {
            var_output = http_request.responseText;
            document.getElementById('result').innerHTML = var_output;  //value 100 displayed
}
else
{
           alert('There was a problem with the request.');
}
}

In my javascript function, i need to get the value 100 from that innerHTML.
Is it possible to get this value?

Code:

// I tried this way, but not working
var txt = document.getElementById('result').innerHTML;

or Store it in hidden field and get the value from javascript.

Please suggest any idea to solve this problem

Thanks

I have to display a div before firing a sync ajax in javascript
div is getting displayed in firefox but not in IE and chrome.

I need to basically display a download bar to indicate the user that the request is in progress

Someone built this application for me. It contained a web page, the user clicked on the detail button to view a detail page, and then clicked on an update button on the detail page to update the database. This type of navigation was unappealing to me. I prefer a free floating form that contains a list, then by clicking on expand, you get to see detail on the specific item, and then click update all within the same free floating form. Is this possible with javascript and ajax? If so, can anyone provide examples? Thanks.

All,
I have some code on my page which changes images in a div without reloading the page. This works great, however my problem comes with I go through a couple images and the actual URL is still on the original image. Is there any way to change the URL when I click the image as well??

Thanks in advance.

i have a drop down which triggers a ajax call. The ajax response is a form with various fields depending upon the drop down option selected.

I have a text field in that response form which is to input the date. i have a calender widget and wish to display that as a popup with an onfocus or onclick on that text field. But becoz of the ajax response it does not let me do it.

I know the problem is in the creation and destruction of the element where the calender has to be displayed so i tried putting the callender intiialization function in another function and calling that onclick but id doesnt work. below is my modified javascript code for the initialization of the calendar.
Code:

<script type="text/javascript">
var calendar1, calendar2, calendar3; /*must be declared in global scope*/
/*put the calendar initializations in the window's onload() method*/

function cal_init()
{ alert("hi");
calendar1 = new Epoch('cal1','popup',document.getElementById('calendar1_container'),false);
	calendar2 = new Epoch('cal1','popup',document.getElementById('calendar2_container'),false);
	calendar3 = new Epoch('cal1','popup',document.getElementById('calendar3_container'),false);
};
</script>