Reusing ajax function - javascript

I want to reuse this function but I want to change the id everytime (in this case brand), do I have to make the function all over again each time or is there another way?
This is the function:
function showUser(str)
{
if (str=="")
{
document.getElementById("brand").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("brand").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","inc/form_rest.php?q="+str,true);
xmlhttp.send();
}

Pass in the id as a parameter of the function?

You can pass the id as parameter...
function showUser(str, id) {
if (str=="") {
document.getElementById(id).innerHTML="";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","inc/form_rest.php?q="+str,true);
xmlhttp.send();
}

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();
}
}

Repeat function

Hello how are you?
I need to repeat this code 100 times. If you look only changes "showuser []" and "cargarproducto []". As I can do to not have to write it 100 times?
Someone can help me? thank you very much
function showUser1(str){
if (str==""){
document.getElementById("cargarproducto1").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("cargarproducto1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","catalog/model/catalog/obtendatos.php?q="+str,true);
xmlhttp.send();
}
function showUser2(str){
if (str==""){
document.getElementById("cargarproducto2").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("cargarproducto2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","catalog/model/catalog/obtendatos.php?q="+str,true);
xmlhttp.send();
}
function showUser3(str){
if (str==""){
document.getElementById("cargarproducto3").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("cargarproducto3").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","catalog/model/catalog/obtendatos.php?q="+str,true);
xmlhttp.send();
}
You can write generic function pass URL, Parameters and destination div ID to it.
function makeRequest(url, str, div_id) {
if (str==""){
document.getElementById(div_id).innerHTML="";
return;
}
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
http_request.overrideMimeType('text/xml');
// http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
if (!http_request) {
alert('Your browser does not support AJAX!');
return false;
}
http_request.onreadystatechange = function(){
if (http_request.readyState==4 && http_request.status==200){
document.getElementById(div_id).innerHTML=http_request.responseText;
}
http_request.open('GET', url + str, true);
http_request.send(null);
}

Create unique getElement ID

I am trying to make txtHint unique or different each time it passes. Any help on creating a counter or increment would be much appreciated. Thanks
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;
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?q="+str,true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
var count = 0;
function showCustomer(str) {
count++;
Then replace: "txtHint" with "txtHint" + count

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();
}

ajax show 2 data request with onclick

hello i am still new on ajax i wanted show 2 data in different place.
here the code
<li onclick="showPost(this.value);" value="*digit*" >lala</li>
the javascript
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function showPost(hal)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("gallekanan").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../wp-content/themes/koolfort/example.php?pal="+hal,true);
xmlhttp.send();
showJudul(hal);
}
function showJudul(hal)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("eventjudul").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../wp-content/themes/koolfort/example1.php?pal="+hal,true);
xmlhttp.send();
}
</script>
when i running the code just the showJudul running and the showPost is Aborted.
Move showJudul(hal); just after document.getElementById("gallekanan").innerHTML=xmlhttp.responseText;
Try having individual control of each function rather than calling them one within another one.. ie.. have it as
<li onclick="showPost(this.value); showJudul(this.value);" value="*digit*" >lala</li>
and
<script>
function showPost(hal)
{
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("gallekanan").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../wp-content/themes/koolfort/example.php?pal="+hal,true);
xmlhttp.send();
}
function showJudul(hal)
{
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("eventjudul").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../wp-content/themes/koolfort/example1.php?pal="+hal,true);
xmlhttp.send();
}
</script>
Also try using try{}catch{} where you try to initialize xmlhttp - the function might give error if there is no such object available...

Categories