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);
}
Related
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();
}
}
I would like to retrieve the content of a link (e.g. http://pastebin.ca/raw/2314500 which is a binary image) in an AJAX request. How to read the binary string in Javascript? The following code doesn't work:
function httpGet(theUrl)
{
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)
{
return xmlhttp.responseText;
}
}
xmlhttp.open("GET", theUrl, false );
xmlhttp.send();
}
alert(httpGet("http://pastebin.ca/raw/2314500"))
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();
}
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();
}
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...