I need to display a name in the textbox with id = txtName using an ajax function, but it won't work. The following is my ajax function:
function showName(str) {
if (str.length == 0) {
document.getElementById("txtName").innerHTML = "";
return;
}
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("txtName").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getname.php?q="+str, true);
xmlhttp.send();
}
You have to chnage the innerHTML to value, since the former will be changing the value of the element having the id "txtName".
Hope this helps.
function showName(str)
{
if (str.length==0)
{
document.getElementById("txtName").innerHTML="";
return;
}
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("txtName").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getname.php?q="+str,true);
xmlhttp.send();
}
Try using jquery , why still using the old fashioned ajax
Related
I'm trying to run multiple AJAX calls on the same page and seem to be having trouble. I'm new to this so I don't really understand what's going on. I have a drop down menu and I want it to update the content in two different places when the selection changes. Each of these works on their own but when I try running them together it only updates whichever script I run last. Any help would be greatly appreciated
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../php/get_org.php?q="+str,true);
xmlhttp.send();
}
</script>
<script>
function list(str)
{
if (str=="")
{
document.getElementById("list").innerHTML="";
return;
}
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("list").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../php/list_org.php?q="+str,true);
xmlhttp.send();
}
</script>
The reason is simple, you are using same global variable for both requests xmlhttp.
Use var when declaring variables like this var xmlhttp = new XMLHttpRequest();.
Your code initializes xmlhttp and requests for some page. Before the request is done you run some another function, which uses xmlhttp again. It is reinitialized and new onreadystatechange handler is set and another request is made. So only the last response handler set is actually executed.
i use this code for get each teacher lesson list this code work fine in all browser but in ie10 cant get lesson list and return blank selection list .
function get_lesson(lesson)
{
var getid=lesson;
document.getElementById("ajax_msg").innerHTML='<span style="color:red">Update</span>';
var xmlhttp;
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("ajax").innerHTML=xmlhttp.responseText;
document.getElementById("ajax_msg").innerHTML='Now Select';
}
}
xmlhttp.open("GET","subpage/ajax_lesson.php?id=" + getid + "&tnow="+ (new Date()).getTime(),true);
xmlhttp.send();
}
IE 10 seems having issue with ajax.
Please Refer:
http://code.gishan.net/code/solution-to-ie10-ajax-problem/
HTH,
This is a script I learnt from w3schools to load in AJAX.
document.getElementById("sendInvoiceButton").innerHTML = '';
var xmlhttp;
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("invoiceIDStatus").innerHTML = '';
document.getElementById("invoiceIDStatus").innerHTML=xmlhttp.responseText;
}
}
var invoiceID = document.getElementById("cred_form_4684_1_wpcf-ticket-invoice-id").value;
var text = "invoiceID=" + encodeURIComponent(invoiceID);
document.getElementById("invoiceIDStatus").innerHTML = '<img src="http://www.lessons.com.sg/freshbooks/demo_wait.gif" />';
xmlhttp.open("POST","/freshbooks/getInvoice.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(text);
}
I can only output 1 xmlhttp.responseText;
I want to send the invoice number to a textbox too. How can I do that?
the simple way
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
...
document.getElementById("yourTextboxId").innerHTML=xmlhttp.responseText;
}
or if with textbox you mean textfield
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
...
document.getElementById("yourTextfieldId").value=xmlhttp.responseText;
}
I suggest to use jquery, is more simple and cross browser compatible
with jquery this would be
$.ajax({
url:'/freshbooks/getInvoice.php',
method:'POST',
data: {invoiceID: $('#cred_form_4684_1_wpcf-ticket-invoice-id').val()},
success: function(data) {
$('#invoiceIDStatus').html(data);
$('#yourTextfieldId').val(data);
}
});
I'm not sure of the structure of data that you are receiving but you could send it html formatted and then use find() to split it and put in different input fields.
$('.sizeSelect').change(function(size) {
sizeId = $(this).attr('id');
size = $('#' + sizeId).val();
lastChar = sizeId.substr(5);
addBtn = "#btn_" + lastChar;
shipId = "shipping_" + lastChar;
if (size=="")
{
document.getElementById(shipId).innerHTML="";
return;
}
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(shipId).innerHTML=xmlhttp.responseText;
var response = xmlhttp.responseText;
if (response == 0.00) {
$(addBtn).addClass('invisible');
}
else if (response > 0.00) {
$(addBtn).removeClass('invisible');
}
}
}
xmlhttp.open("POST","cart.php?size="+size+"&shipId="+lastChar, true);
xmlhttp.send();
});
Can anyone tell me why this works in Chrome, Firefox and safari and not in IE. I read somewhere that it had to do with forcing ie not to cache and that changing the the request from a get to a post would help... it didnt :(
Any ideas?
Have you tried using jQuery? Have you checked how IE is handling the response - perhaps it sees "0.00" as text you have to parseFloat?
the trick is use separate code XML for IE browsers or that are version of less than 10 .
so every time Ajax is call a method parseXml is called with input parameter XML Dom or text, depending on browser .... and if current browser is IE, it upload XML doc, process it according to Microsoft standards and return XML and rest of processes in Ajax carries on as expected!!
note : browser.msie is not supported in jQuery 1.9 but you can add jquery-migrate-1.2.1.min.js in order to make it compatible or use userAgent and find which is current browser
$.ajax({
type: 'GET',
url: 'XML_file.xml',
dataType: ($.browser.msie) ? "text" : "xml",
success: function (xml) {
var processedXML = parseXml(xml);
$(processedXML).find('my record').each(function () { //code }
});
function parseXml(xml) {
if ($.browser.msie) {
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", "XML_file.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
xml = xmlDoc;
}
return xml;
}
I want to write a code to login, the login ajax will send username and password to server and then server will return the result back. My problem is I cannot split the responeText from xmlhttp...
My js:
function kiemTraDangNhap(usrname, pass) {
var xmlhttp;
//
if (usrname == "" || pass == "") {
return;
}
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) {
var kq = xmlhttp.responseText.split("--");
document.getElementById("notice").innerHTML = kq[0];
}
}
xmlhttp.open("POST", "LoginAjax.aspx", true);
//
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("un="+usrname+"&"+"pass="+pass);
}
The LoginAjax.aspx:
//Do some thing with databse, example it respone this:
Response.Write("Info--Success");
the document.getElementById("notice").innerHTML = kq[0]; don't show anything.
Any idea?