I have created an ajax function that works on chrome and firefox but not i.e 8 can anyone spot the issue?
html section:
<select id='choices'>
<option id="no" value="no" onClick="check()">No</option>
<option value="yes" onClick="check()">Yes</option>
</select>
Javascript section:
function check(){
var a = document.getElementById("choices").value;
var type = "label";
ajaxFunction(a,type);
if(a == "yes"){
document.getElementById("results").style.display="block";
}
else{
document.getElementById("results").style.display="none";
}
}
AJAX Section:
function ajaxFunction(result,dif){
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(dif == "label"){
var ajaxDisplay = document.getElementById('results');
}
else{
var ajaxDisplay = document.getElementById('results1');
}
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
if(dif == "label"){
var hiddenvalue = document.getElementById('hiddenvalue').value;
var queryString = "?type=" + result + "&label=" + hiddenvalue + "&dif=" + dif;
}
else{
var queryString = "?type=" + result + "&dif=" + dif;
}
ajaxRequest.open("GET", "scripts/script.php" + queryString, true);
ajaxRequest.send(null);
}
PHP Section:
var_dump($_GET);
I'm not sure if this is just a compatability issue or not as i have used very similar code to this in another project which worked fine however i also have a couple of other scripts that are loading in such as jquery 1.2.3 and google analytics (with there advanced link tracker which i had to get rid of as it was throwing an error). I have checked the debugger and clicked break all on error and i can click about on the onclick but no error actually shows in the debugger. Has anyone got any sugestions other then jquery (can't get my head around it)
IE does not suppot onclick on an option.
onchange needs to be on the select.
<select id='choices' onchange="check()">
<option id="no" value="no">No</option>
<option value="yes">Yes</option>
</select>
Related
I am using AJAX function. I am passing 3 variables to the next page using AJAX. When I add the 4th variable the function doesn't get called.
Code:
<script language="javascript" type="text/javascript">
//Browser Support Code
function ajaxFunction(){
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){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var count = document.getElementById('count').value;
var type = document.getElementById('type').value;
var sem = document.getElementById('sem').value;
var rid = document.getElementById('room').value;
ajaxRequest.open("GET", "add_requi_ajax.php?count=" + count+"&type="+ type+"&sem="+sem+"&rid="+rid, true);
ajaxRequest.send(null);
};
</script>
Your code is syntactically and logically correct, which means that the problem is likely one of your input IDs is wrong (typo? Should room be rid?), or you call the function before the inputs are rendered on the page (use window.onload).
Verify each of your input IDs. If they all look correct, then comment them out and hard code the values to rule out your inputs as a problem. Watch the error console for any error messages. If an uncaught error is encountered, it can appear that the function isn't being called.
You probably need to urlencode your values.
I'm using the following to update a DIV called 'output'. This works fine with one exception, I would like echo entries to update the parent page.
<script type="text/javascript">
<!--
var divid = 'output';
var loadingmessage = '<img src="working.gif">';
function AJAX(){
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
function formget(f, url) {
var poststr = getFormValues(f);
postData(url, poststr);
}
function postData(url, parameters){
var xmlHttp = AJAX();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
document.getElementById(divid).innerHTML=loadingmessage;
}
if (xmlHttp.readyState == 4) {
document.getElementById(divid).innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", parameters.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(parameters);
}
function getFormValues(fobj)
{
var str = "";
var valueArr = null;
var val = "";
var cmd = "";
for(var i = 0;i < fobj.elements.length;i++)
{
switch(fobj.elements[i].type)
{
case "select-one":
str += fobj.elements[i].name +
"=" + fobj.elements[i].options[fobj.elements[i].selectedIndex].value + "&";
break;
}
}
str = str.substr(0,(str.length - 1));
return str;
}
//--></script>
This is called using :
<input type='button' name='Send' value='submit' onclick="javascript: formget(this.form, 'foo.php');">
The issue I have is foo.php runs a series of exec() commands, between each command is an echo statement that I would like to be displayed in the output div.
So it will do something like:
echo "archive files";
exec ("tar -cvf bar.tar bar.txt foo.txt");
echo "backing up /user";
exec ("tar -cvf /user.tar /user/*");
I would like the user to see the working.gif, but under it each echo statement from foo.php
Can that be done and how ?
Thanks
I can't say I've ever tried sending back chunks of data at separate times with a single AJAX request, so I'm not sure it's possible. What happens currently? Do you only get first echoed message, or do only get the entire response at the end?
Two things that I know will work:
Break your PHP script into multiple scripts and execute them in order with separate AJAX requests. This will only work if the separated scripts don't depend on each other or you find some other way to persist the state across the separated scripts.
Create an iframe and load the PHP script into it instead of using an AJAX request. Flushing the output of the PHP script should then work. (If you have ever used Wordpress, I believe they use this technique to show the progress of plugin updates.)
<html><head><title>Loses</title></head><body>
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var ajaxRequest;
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;
}
}
}
// Receive data from the server to update div
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.value = ajaxRequest.responseText;
}
}
// Get the value from user.
if (!target) target = document.getElementById("name");
var queryString = "?name=" + escape(target.value);
var url = "db.php" + queryString;
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
</script>
<form name="myForm">
Victim: <input type="text" id="name" name="name"/> <br/>
<br/>
<input type="button" onclick="getLoses()" value="Show Loses"/>
</form>
<div id="ajaxDiv">Results:</div>
<br>
</body></html>
Why doesn't this do anything?
I've tried it under apache and lightpd. I'm getting no complaints or errors, but it's just not doing anything.
If I call the backend manually, db.php?name=Player1 it works. So it can't be anything in db.php. Something is wrong with the code above and I just don't know what's missing. Can anyone help me?
You call a function getLoses() on button-click, but there is no such function(the name is ajaxFunction)
if (!target) target = document.getElementById("name");
there is no variable target, so the check for !target will result in a script-error.
Remove the if(!target) from that line or change the condition to :
if (typeof target=='undefined' || !target)
I posting my value through ajax and using the response the details will be displayed.I am getting the problem while retreiving the data.But i dono where i have mistaked,then this is the error getiing displayed frequently
"There was a problem while using XMLHTTP:\n";
in all browsers mainly in the chrome,could any one help me...
this is my code,
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer 6+
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// Internet Eplorer 5
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX. Download a newer browser to view this page.");
return false;
}
}
}
// insert server response into HTML element
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
MM_check_session(xmlHttp.responseText);
var b_gc = document.getElementById(insert).value;
document.getElementById(insert).value = xmlHttp.responseText;
var shippingid = getCheckedValue('checkout_form', 'shippingid');
closeMessage();
MM_calc_shipping(shippingid);
if (b_gc == xmlHttp.responseText) {
MM_register();
} else {
error = 1;
document.getElementById('payment_error').innerHTML = xmlHttp.responseText;
document.getElementById(insert).value = '';
}
} else {
closeMessage();
alert("We can't process your request.Please refresh(reload) the page to proceed further:\n"
+ xmlHttp.statusText);
}
}
}
displayStaticMessage(
'<img src=' + config_MM_loader_image_path + ' alt=\'loading...Please wait\'>',
false);
xmlHttp.open("POST", serverScript, true);
xmlHttp.setRequestHeader('Content-type',
'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader('Content-length', parameters.length);
xmlHttp.setRequestHeader('Connection', 'close');
xmlHttp.send(parameters);
any help
You seem to be incorrectly tagged as php. Also have you considered jQuery for the ease of ajax whilst using it.
as for your question could you post the code on the page where the ajax request is going to as the code here looks fine..
Edit:
Where is serverScript set?
change serverScript for the ajax page you are calling?
http://msdn.microsoft.com/en-us/library/windows/desktop/ms757849%28v=vs.85%29.aspx
I am using the below code to search a mysql database but cannot get the form to submit when the return key is pressed.
Does anybody have any ideas?
function ajaxFunction(){
var ajaxRequest;
{
// 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;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var kw = document.getElementById('kw').value;
var division = document.getElementById('division').value;
var queryString = "?kw=" + kw + "&division=" + division;
ajaxRequest.open("GET", "search/jsearch.php" + queryString, true);
ajaxRequest.send(null);
}
Form code is:
<form name='myForm'>
Keywords<input type='text' id='kw' /> <br />
<br />
<select id='division'>
<option value='0' selected="selected">window & door</option>
<option value="1">window</option>
<option value="2">door</option>
</select>
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
Where is your event code for the form? Are you using an onclick instead of onsubmit? I don't think we have enough code/information to answer this, but from what you describe your first step to make sure you are using an onsubmit event for the form so you can fire off the xhr.
EDIT:
Then the answer to this problem: "...cannot get the form to submit when the return key is pressed", is use onsubmit instead of onclick. You also need to attach the event to the form instead of the button, and if possible refrain from using inline js.
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
onclick fires when you click the button. You are pressing return, not clicking the button.
As mentioned earlier, you should use onsubmit which fires when the form is submitted. You will need to return false, ie use onsubmit="ajaxFunction();return false;", to prevent the normal submission from occurring.