This question already has an answer here:
join 2 same almost same function into 1 [closed]
(1 answer)
Closed 9 years ago.
function showRole(str,x)
{
if (str=="")
{
document.getElementById("txtHintrole"+x+"").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("txtHintrole"+x+"").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://localhost/tes/index.php/form/role/"+str,true);
xmlhttp.send();
}
function showUser(str,x)
{
if (str=="")
{
document.getElementById("txtHint"+x+"").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"+x+"").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://localhost/tes/index.php/form/hint/"+str,true);
xmlhttp.send();
}
can i join this 2 function into 1
because i need both of them to show data
and i dont know how to set 2 function with this
newcell.childNodes[0].setAttribute("onchange","showUser(this.value,"+xx+");");
Sure, just create a wrapper function:
var showBoth = function(str, x) {
showRole(str, x);
showUser(str, x);
};
Related
im going to get some data from database by using Ajax.
could you please let me know the way that i can trigger two function() by change a value of specified dropdown list using "OnChange"
note: most of the time system show only showhistory() function output
my existing codes
.............................................
<select name="po_no" onchange="showsize(this.value);showhistory(this.value);">
........................................................
<script>
function showhistory(str)
{if (str=="")
{
document.getElementById("txtHistory").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("txtHistory").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethistory2.php?s="+str,true);
xmlhttp.send();
}
</script>
<script>
function showsize(str)
{
if (str=="")
{
document.getElementById("sizeHint1").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp1=new XMLHttpRequest();
}
else
{
xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp1.onreadystatechange=function()
{
if (xmlhttp1.readyState==4 && xmlhttp.status==200)
{
document.getElementById("sizeHint1").innerHTML=xmlhttp1.responseText;
}
}
xmlhttp1.open("GET","getsize5.php?q="+str,true);
xmlhttp1.send();
}
</script>
You are overriding the onChange's first value (showSize()) by reassigning the method showHistory(). To avoid this scenario, wrap it up into a single function which invokes both the calls as shown below :
function showAll(strValue) {
showAll(strValue);
showSize(strValue);
}
Finally call like as shown here :
<select name="po_no" onchange="showAll(this.value);">
call your second function on success of the first function
<select name="po_no" onchange="showhistory(this.value);">
<script>
function showhistory(str)
{if (str=="")
{
document.getElementById("txtHistory").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("txtHistory").innerHTML=xmlhttp.responseText;
showsize(str);
}
}
xmlhttp.open("GET","gethistory2.php?s="+str,true);
xmlhttp.send();
}
function showsize(str)
{
if (str=="")
{
document.getElementById("sizeHint1").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp1=new XMLHttpRequest();
}
else
{
xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp1.onreadystatechange=function()
{
if (xmlhttp1.readyState==4 && xmlhttp.status==200)
{
document.getElementById("sizeHint1").innerHTML=xmlhttp1.responseText;
}
}
xmlhttp1.open("GET","getsize5.php?q="+str,true);
xmlhttp1.send();
}
</script>
This is my Ajax script... I want to combined the first and the second ...
1st
<script>
function Ajax()
{
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("myDiv").innerHTML=xmlhttp.responseText;
setTimeout('Ajax()',3000);
}
}
xmlhttp.open("GET","Home.php",true);
xmlhttp.send();
}
window.onload=function(){
setTimeout('Ajax()',3000);
}
</script>
2nd
<script>
function Ajax()
{
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("myDiv2").innerHTML=xmlhttp.responseText;
setTimeout('Ajax()',3000);
}
}
xmlhttp.open("GET","Home2.php",true);
xmlhttp.send();
}
window.onload=function(){
setTimeout('Ajax()',3000);
}
</script>
<body>
<div id="myDiv"></div>
<div id="myDiv2"></div>
</body>
Assuming you want to use jQuery (since you tagged your question with it), this would be your answer:
function jQueryGet1(){
$.get('Home.php', function(data){
$('#myDiv').html(data);
setTimeout(jQueryGet1, 3000);
});
}
function jQueryGet2(){
$.get('Home2.php', function(data){
$('#myDiv2').html(data);
setTimeout(jQueryGet2, 3000);
});
}
$(window).load(function(){
setTimeout(jQueryGet1, 3000);
setTimeout(jQueryGet2, 3000);
});
Note: Since your Ajax calls are to 2 different locations, you can not combine these two functions. Each must be implemented separately.
You need setInterval to refresh them every 3 seconds. function Ajax should be declared only once.
//Create a function to pass URL to call
//and a function which will execute on sucess
function Ajax(url, callback) {
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
callback(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
window.onload = function() {
setInterval(function() {
//Call first url and set response text of div 1
Ajax("Home.php", function(responseText) {
document.getElementById("myDiv").innerHTML = responseText;
})
//Call other url and set response text of div 2
Ajax("Home2.php", function(responseText) {
document.getElementById("myDiv2").innerHTML = responseText;
})
}, 3000);
}
As jquery is tagged, this can be used
$(function() {
setInterval(function() {
$('#myDiv').load('Home.php');
$('#myDiv2').load('Home2.php');
}, 3000);
});
I am trying to display two javascript function when page load. But seems one is overwriting another one.
here is javascript code:
function welcome(){
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("welcome").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","php/display_welcome.php", true);
xmlhttp.send();
}
function testimonial(){
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("testimonial").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","php/display_testimonial.php", true);
xmlhttp.send();
}
window.onload = function() {
welcome();
testimonial();
};
I have 2 div id in the html page.
Also I am using IE9, when I run only one function it works fine, when run two it doesnt return the data.
Hope someone could help me.
A lot could have gone wrong:
Non-responsive server
Bad copy-pasted code
Syntax errors
etc.
Anyways, to avoid repepetive code and possible errors even if both code looks the same, I suggest you do this. Since both basically use the same operation, let's factor it out into a single reusable function:
function load(url,callback) {
var xmlhttp;
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
callback(xmlhttp.responseText);
}
}
xmlhttp.open('GET', url);
xmlhttp.send();
}
window.onload = function () {
load('php/display_welcome.php',function(response){
document.getElementById("welcome").innerHTML = response;
});
load('php/display_testimonial.php',function(response){
document.getElementById("testimonial").innerHTML = response;
});
};
You declared xmlhttp without var which gives it global scope, that is why it gets over written when you call the second function. Declare it locally and that will not happen. Use var and declare it locally.
var xmlhttp;
I have a simple script im testing which calls a HTML file. In that html file is a div with the id "test2".
I am then trying to add content to its innerHTML but it acts like it don't exist, even though the div shows in the browser.
This is how I have approached the idea:
<script>
function call_file(file,div_id){
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(div_id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",file,true);
xmlhttp.send();
}
window.onload = function() {
file = 'test.html';
div_id = 'test';
call_file(file,div_id);
document.getElementById('test2').innerHTML = 'Hi';
};
</script>
<div id="test" class="outer""></div>
Content of "test.html":
<div id="test2" class="inner"></div>
Why does it not find id "test2" with this error, even though i see the div with my own eyes:
Cannot set property 'innerHTML' of null
You're making an asynchronous call, so send() will return before the response is received and added into the DOM. Any code that depends on the received data should be in your onreadystatechange function, or somehow triggered by it, so that it won't execute until the response data has been received.
You Cannot set it because it doesn't exist, yet. You need to wait until it's loaded.
You can do that with a callback function.
function call_file(file,div_id, callback){
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(div_id).innerHTML=xmlhttp.responseText;
return callback();
}
}
xmlhttp.open("GET",file,true);
xmlhttp.send();
}
window.onload = function() {
file = 'test.html';
div_id = 'test';
call_file(file,div_id, function () {
document.getElementById('test2').innerHTML = 'Hi';
});
};
I've got an Interval which runs a function every 3 Seconds.
intervalStepper = window.setInterval('intervalTick()','3000');
function intervalTick() {
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) {
gotResult(xmlhttp.responseText);
}
}
xmlhttp.open('GET','index.php?ajax=true',true);
xmlhttp.send();
}
function gotResult(res) {
alert(res);
}
Also, I have just another Ajax Call, which runs on button click.
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) {
agentDetailGotten(xmlhttp.responseText);
}
}
xmlhttp.open('GET','index.php?anotherPage=true',true);
xmlhttp.send();
Now, if I run the second code just in time when the interval ticks and executes the first call, the calls actually run at about the same time. But then it seems like the interval dies somehow - he doies not tick anymore.
Is this a known problem or am I just not seeing something big...
Thanks for help!
Try to clear and set your interval again:
intervalStepper = window.setInterval('intervalTick()',3000);
function intervalTick() {
window.clearInterval(intervalStepper);
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) {
gotResult(xmlhttp.responseText);
}
}
xmlhttp.open('GET','index.php?ajax=true',true);
xmlhttp.send();
intervalStepper = window.setInterval('intervalTick()',3000);
}
function gotResult(res) {
alert(res);
}
I've solved it just now.
It seems this is something like a firefox bug (found on bugzilla.mozilla.org)
NS_ERROR_NOT_AVAILABLE
This one was not shown to me, but I've just found now. It appears when Firefox tries to execute two calls at the same time.
For more Information, I found a blog entry here
I solved it that if one call is running, the other one waits.