To call 2 ajax functions on an onchange event - javascript

I want 3 ajax functions to be called simultaneously on an onchange event of a dropdown.
I tried like calling the 2nd function inside if (xmlhttp1.readyState==4 && xmlhttp1.status==200) of the 1st function and 3rd function inside if (xmlhttp1.readyState==4 && xmlhttp1.status==200) of the 2nd function.
But only the 1st function is called ,even second function is not called.
Any other ways to achieve it ?
Below are the functions:
function list1(ob){
var id= ob;
var xmlhttp1;
if (window.XMLHttpRequest){//for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp1=new XMLHttpRequest();
}else{//for IE6, IE5
xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp1.onreadystatechange = function(){
if (xmlhttp1.readyState==4 && xmlhttp1.status==200){
alert("ajax1");
list2(id);
}
}
xmlhttp1.open("POST","/ajax/listSites.php",true);
xmlhttp1.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlhttp1.send("id="+id);
}
function list2(obb){
var idd=obb;
var xmlhttp;
if (window.XMLHttpRequest){// 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){
alert("ajax2");
list3(idd);
}
}
xmlhttp.open("POST","/ajax/access_points_do_actions.php",true);
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlhttp.
send("sel_system_id="+idd+
"&action="+'LIST_SLAVE_FOR_ACCESS_POINT');
}
// only alert ajax1 is displayed

You can just chain asynchronous calls like this:
onchange="Function1(); Function2();"
Update:
Your code:
<select id="se" onchange="javascript:list1(this.value); //this is current code
should be something like:
<select id="se" onchange="Javascript: list1(this); list1(this);">

Related

Send ajax GET request if condition is met

This is my JS code. However, it only executed the last ajax request. Is there anyway to put them in If statement so that
if (main-content.html is loaded), it will execute xmlhttp.open("GET","main-content-city.php?q="+str,true)
xmlhttp.send();
elseif (child-content is loaded), execute: xmlhttp.open("GET","child-content-city.php?q="+str,true);
xmlhttp.send();
<script>
function sortResult(str)
{
if (str=="")
{
document.getElementById("result").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("result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","main-content-city.php?q="+str,true);
xmlhttp.send();
xmlhttp.open("GET","child-content-city.php?q="+str,true);
xmlhttp.send();
}
</script>
My index.php file is like this and using GET method to navigate between main-content.html and child-content.html.
<?php
include('header.html');
include('main-content.html');
include('footer.html');
?>
My main-content and child-content is like this:
<div id="result">
Content displayed here
</div>
Take all the following code which will be identical for both ajax calls and make a separate function i..e
function ajaxCall (){
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("result").innerHTML=xmlhttp.responseText;
}
}
}
Then when you call ajaxCall you simply add relevant SEND:
function whatEver(){
if (main-content.html is loaded)
{ ajaxCall();
xmlhttp.open("GET","main-content-city.php?q="+str,true);
xmlhttp.send();
}
else if (child-content is loaded)
{
ajaxCall();
xmlhttp.open("GET","child-content-city.php?q="+str,true);
xmlhttp.send();
}
}

Combine AJAX request to load new page with variables

I currently have three stored JS variables (wordChoiceOne, wordChoiceTwo, wordChoiceThree). Now that I have these stored, I want to run a function called saveUsername(). This function should do the following:
Take the jQuery variables above and pass them into PHP and load the file register-form.php into the div register-login-form
So I currently have the following AJAX request, but this only handles the reloading of the form. I've never combined jQuery with PHP before so how can I add the part in this to pass the three variables?
function saveUsername(wordChoiceOne, wordChoiceTwo, wordChoiceThree){
{
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("login-register-form").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","register-form.php",true);
xmlhttp.send();
}
What do I add to this to pass the three variables and convert them to PHP vars like with a $ sign?
function saveUsername(wordChoiceOne, wordChoiceTwo, wordChoiceThree){
{
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("login-register-form").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","register-form.php?one="+wordChoiceOne+"&two="+wordChoiceTwo+"&three="+wordChoiceThree,true);
xmlhttp.send();
}
Then PHP side, use $_GET['one'], $_GET['two'] and $_GET['three']

2 functions onchange event at same time separately

So what i'm looking for is a way to trigger 2 function events onchange with my first option, i've looked up a few examples on other sites an neither of them works. But what i want is when this.value is selected, for the function to open 2 separate options via the selection.
So if category is Dogs it does showSub(Dogs) and showSize(Dogs) at the same time and sends to 2 different php page calls, IF thats possible.
//index.php
<select name="category" onChange="showSub(this.value);showSize(this.value)" style="width:200px;">
<option value="">Select Category</option>
Send to php to get actual options.
</select>
//foo.js
function showSub(str)
{
if (str=="") {
document.getElementById("txtSub").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("txtSub").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getSub.php?q="+str,true);
xmlhttp.send();
}
function showSize(str)
{
if (str=="") {
document.getElementById("txtSize").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("txtSize").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getSize.php?q="+str,true);
xmlhttp.send();
}
//rest of index.php
<div id="txtSub"></div>
<div id="txtSize"></div>
Use var to declare all variables. Your showSub() and showSize() functions both use a variable xmlhttp that is not declared with var, which makes it global - so when you call showSize() it overwrites the xmlhttp object from showSub() (which is why you get the effect mentioned in a comment where "with the current code, the showsize only shows").
So add this line to the start of each function:
var xmlhttp;
And better yet, move the if/else out into a separate function that returns an xmlhttp object rather than repeating that code in both functions:
function getXMLHttp() {
return window.XMLHttpRequest ? new XMLHttpRequest() // newer browsers
: new ActiveXObject("Microsoft.XMLHTTP"); // old IE
}
// and then within your other functions:
var xmlhttp = getXMLHttp();

multiple ajax calls using only javascript

isn't it possible to execute multiple ajax calls using javascript only and without using Jquery. I tried the below javascript code with two ajax calls but the code is not working when I place the second ajax call
<script type="text/javascript">
var class1;
var class2;
var sec1;
var sec2;
function func()
{
class1 = document.getElementById('selcla');
class2 = class1.options[class1.selectedIndex].value;
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("secdiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getsec.php?q="+class2,true);
xmlhttp.send();
}
function funcsec()
{
sec1 = document.getElementById('selsec');
sec2 = sec1.options[sec1.selectedIndex].value;
alert("selecting class and section details " + class2 + " " + sec2 );
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)
{
alert("successfully received " );
document.getElementById("studiv").innerHTML=xmlhttp.responseText;
}
else
alert("unsuccessful ajax second call ");
}
xmlhttp.open("GET","getstu.php?x="+class2"&y="+sec2,true);
xmlhttp.send();
}
It is, but you need a different "xmlhttp" handler for each request you make.
Setup a new xmlhttp object and make a second request with the new object.
My suggestion is to break out the part with you initializing the xmlhttp object, into a standalone function, and use it to create a few instances of those objects.
However I must advise against such an approach. It is better to use a library for ajax requests.

Display all nodes inside a tagname with JavaScript

I'm trying to use the loadXMLDoc() JavaScript function to load data from an XML document and show it on my page's DIV when a button is clicked. So far I can't get any content in my DIV, I want to load all elements within an specific tagname.
Here's the XML:
<?xml version="1.0" encoding="UTF-8"?>
<Fruits>
<Cell>Apples</Cell>
<Cell>Bananas</Cell>
<Cell>Strawberries</Cell>
</Fruits>
<Vegetables>
<Cell>Lettuce</Cell>
<Cell>Tomatoes</Cell>
<Cell>Carrots</Cell>
</Vegetables>
Here's the JavaScript:
function fruits()
{
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)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("fruits");
}
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
}
function vegetables()
{
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)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("vegetables");
}
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
}
And here's the HTML:
<button type="button" onclick="fruits()">Fruits</button>
<button type="button" onclick="vegetables()">Vegetables</button>
<div id="food">Please select your favorite</div>
Your function fruits() is not closed properly, and your function vegetables() has ended up inside function fruits(),
the same goes for defining the function xmlhttp.onreadystatechange=function()
so these functions will not even be available until fruits() is called.
Your code should look like this:
function fruits()
{
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)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("fruits");
}
}
//something went wrong here : this code ended up in the function that was to be called when xmlhttp was done with its GET operation.
//consequently it was never called
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
} // <-- this here bracket was missing
function vegetables()
{
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)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("vegetables");
}
}
//the same thing happened here
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
}

Categories