SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Functions not working in IE! ()

    This code works fine in in FireFox but not in IE... it's written in Javascript & AJAX but I'm pretty sure the JavaScript is the problem...

    Basically what this script is supposed to do is when you select a Product Option, it uses AJAX to fill out the Value drop down box with choices. That works fine.

    You then select something from the Value drop down box and it then uses AJAX again to fill out the details into the Weight and Price text boxes... This is where it goes wrong.

    Like I said, it works fine in FireFox but in IE, it only reads the first function (getProductOptionValueWeight(this)) and not the second function (getProductOptionValuePrice(this))... I need it to read both functions...

    Here's the HTML simplified for easy reading:

    Code:
    Product Option: 
    <select id="option" name="option" onchange="getProductOptionList(this)">
     <option value="">-- Select One --</option>
    <option value="2">Colour</option>
    <option value="3">Size</option>
    </select>
     
     <br><br>
     
     Value: 
    <select id="value" name="value" onchange="getProductOptionValueWeight(this);getProductOptionValuePrice(this);">
     		
     </select>
     
     <br><br>
     
     Weight: 
    <input type="text" name="weight" id="weight" value="0" size="10">
     
     <br><br>
     
     Price: 
    <input type="text" name="price" id="price" size="10" value="0.00" />
    Here's the functions from javascript.js:

    Code:
    	var ajax = new sack();
     	var ajaxtwo = new sack(); // so the ajax doesn't get stuffed when we run two queries
     	
     	function getProductOptionList(sel)
     	{
     		var optionid = sel.options[sel.selectedIndex].value;
     		document.getElementById('value').options.length = 0;	// Empty city select box
     		document.getElementById('weight').value = '0';
     		document.getElementById('price').value = '0.00';
     		if(optionid.length>0){
     			ajax.requestFile = 'modules/listings/ajax-option_values.php?optionid='+optionid;	// Specifying which file to get
     			ajax.onCompletion = createProductOptionList;	// Specify function that will be executed after file has been found
     			ajax.runAJAX();		// Execute AJAX function
     		}
     	}	
     	function createProductOptionList()
     	{
     		var obj = document.getElementById('value');
     		eval(ajax.response);	// Executing the response from Ajax as Javascript code
     		getProductOptionValueWeight(obj); // Update price & weight after a new Option is selected
     		getProductOptionValuePrice(obj);
     	}
     
     	function getProductOptionValueWeight(sel)
     	{
     		var valueWeight = sel.options[sel.selectedIndex].value;
     		document.getElementById('value').value = '';
     		if(valueWeight.length>0){
     			ajax.requestFile = 'modules/listings/ajax-option_values.php?weight='+valueWeight;	// Specifying which file to get
     			ajax.onCompletion = createValueWeight;	// Specify function that will be executed after file has been found
     			ajax.runAJAX();		// Execute AJAX function
     		}
     	}
     	function getProductOptionValuePrice(sel)
     	{
     		var valuePrice = sel.options[sel.selectedIndex].value;
     		document.getElementById('value').value = '';
     		if(valuePrice.length>0){
     			ajaxtwo.requestFile = 'modules/listings/ajax-option_values.php?price='+valuePrice;	// Specifying which file to get
     			ajaxtwo.onCompletion = createValuePrice;	// Specify function that will be executed after file has been found
     			ajaxtwo.runAJAX();		// Execute AJAX function
     		}
     	}
     	function createValueWeight()
     	{
     		document.getElementById('weight').value = ajax.response;	// Insert the response into text box
     	}
     	function createValuePrice()
     	{
     		document.getElementById('price').value = ajaxtwo.response;	// Insert the response into text box
     	}
    Any ideas where I've gone wrong?

  2. #2
    SitePoint Enthusiast lucius910's Avatar
    Join Date
    Jul 2004
    Location
    Providence, RI
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not familiar with your AJAX lib but this is worth a try:
    Code:
    function createValueWeight()
     {
     	document.getElementById('weight').value = ajax.responseText;
     }
     function createValuePrice()
     {
     	document.getElementById('price').value = ajaxTwo.responseText;
     }
    But it depends on how your AJAX lib is returning the response I guess. responseText is how that response string is access if you're just writing you own bare bones AJAX jargon.

  3. #3
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't work. You sure it is my AJAX? It works in FF...

    This is my AJAX code which I didn't write:

    Code:
    /* Simple AJAX Code-Kit (SACK) v1.6.1 */
    /* 2005 Gregory Wild-Smith */
    /* www.twilightuniverse.com */
    /* Software licenced under a modified X11 licence,
       see documentation or authors website for more details */
    
    function sack(file) {
    	this.xmlhttp = null;
    
    	this.resetData = function() {
    		this.method = "POST";
    		  this.queryStringSeparator = "?";
    		this.argumentSeparator = "&";
    		this.URLString = "";
    		this.encodeURIString = true;
    		  this.execute = false;
    		  this.element = null;
    		this.elementObj = null;
    		this.requestFile = file;
    		this.vars = new Object();
    		this.responseStatus = new Array(2);
    	  };
    
    	this.resetFunctions = function() {
    		  this.onLoading = function() { };
    		  this.onLoaded = function() { };
    		  this.onInteractive = function() { };
    		  this.onCompletion = function() { };
    		  this.onError = function() { };
    		this.onFail = function() { };
    	};
    
    	this.reset = function() {
    		this.resetFunctions();
    		this.resetData();
    	};
    
    	this.createAJAX = function() {
    		try {
    			this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e1) {
    			try {
    				this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (e2) {
    				this.xmlhttp = null;
    			}
    		}
    
    		if (! this.xmlhttp) {
    			if (typeof XMLHttpRequest != "undefined") {
    				this.xmlhttp = new XMLHttpRequest();
    			} else {
    				this.failed = true;
    			}
    		}
    	};
    
    	this.setVar = function(name, value){
    		this.vars[name] = Array(value, false);
    	};
    
    	this.encVar = function(name, value, returnvars) {
    		if (true == returnvars) {
    			return Array(encodeURIComponent(name), encodeURIComponent(value));
    		} else {
    			this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
    		}
    	}
    
    	this.processURLString = function(string, encode) {
    		encoded = encodeURIComponent(this.argumentSeparator);
    		regexp = new RegExp(this.argumentSeparator + "|" + encoded);
    		varArray = string.split(regexp);
    		for (i = 0; i < varArray.length; i++){
    			urlVars = varArray[i].split("=");
    			if (true == encode){
    				this.encVar(urlVars[0], urlVars[1]);
    			} else {
    				this.setVar(urlVars[0], urlVars[1]);
    			}
    		}
    	}
    
    	this.createURLString = function(urlstring) {
    		if (this.encodeURIString && this.URLString.length) {
    			this.processURLString(this.URLString, true);
    		}
    
    		if (urlstring) {
    			if (this.URLString.length) {
    				this.URLString += this.argumentSeparator + urlstring;
    			} else {
    				this.URLString = urlstring;
    			}
    		}
    
    		// prevents caching of URLString
    		this.setVar("rndval", new Date().getTime());
    
    		urlstringtemp = new Array();
    		for (key in this.vars) {
    			if (false == this.vars[key][1] && true == this.encodeURIString) {
    				encoded = this.encVar(key, this.vars[key][0], true);
    				delete this.vars[key];
    				this.vars[encoded[0]] = Array(encoded[1], true);
    				key = encoded[0];
    			}
    
    			urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
    		}
    		if (urlstring){
    			this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
    		} else {
    			this.URLString += urlstringtemp.join(this.argumentSeparator);
    		}
    	}
    
    	this.runResponse = function() {
    		eval(this.response);
    	}
    
    	this.runAJAX = function(urlstring) {
    		if (this.failed) {
    			this.onFail();
    		} else {
    			this.createURLString(urlstring);
    			if (this.element) {
    				this.elementObj = document.getElementById(this.element);
    			}
    			if (this.xmlhttp) {
    				var self = this;
    				if (this.method == "GET") {
    					totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
    					this.xmlhttp.open(this.method, totalurlstring, true);
    				} else {
    					this.xmlhttp.open(this.method, this.requestFile, true);
    					try {
    						this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    					} catch (e) { }
    				}
    
    				this.xmlhttp.onreadystatechange = function() {
    					switch (self.xmlhttp.readyState) {
    						case 1:
    							self.onLoading();
    							break;
    						case 2:
    							self.onLoaded();
    							break;
    						case 3:
    							self.onInteractive();
    							break;
    						case 4:
    							self.response = self.xmlhttp.responseText;
    							self.responseXML = self.xmlhttp.responseXML;
    							self.responseStatus[0] = self.xmlhttp.status;
    							self.responseStatus[1] = self.xmlhttp.statusText;
    
    							if (self.execute) {
    								self.runResponse();
    							}
    
    							if (self.elementObj) {
    								elemNodeName = self.elementObj.nodeName;
    								elemNodeName.toLowerCase();
    								if (elemNodeName == "input"
    								|| elemNodeName == "select"
    								|| elemNodeName == "option"
    								|| elemNodeName == "textarea") {
    									self.elementObj.value = self.response;
    								} else {
    									self.elementObj.innerHTML = self.response;
    								}
    							}
    							if (self.responseStatus[0] == "200") {
    								self.onCompletion();
    							} else {
    								self.onError();
    							}
    
    							self.URLString = "";
    							break;
    					}
    				};
    
    				this.xmlhttp.send(this.URLString);
    			}
    		}
    	};
    
    	this.reset();
    	this.createAJAX();
    }

  4. #4
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Figured it out! And it was the Javascript, not the ajax. Instead of runnign two scak() functions, I decided to merge them both into one... My code:
    Code:
    	function getProductOptionValue(sel)
    	{
    		var optionValue = sel.options[sel.selectedIndex].value;
    		document.getElementById('value').value = '';
    		if(optionValue.length>0){
    			ajax.requestFile = 'modules/listings/ajax-option_values.php?optionvalue='+optionValue;	// Specifying which file to get
    			ajax.onCompletion = createProductOptionValueDefaults;	// Specify function that will be executed after file has been found
    			ajax.runAJAX();		// Execute AJAX function
    		}
    	}
    	function createProductOptionValueDefaults()
    	{
    		var string = ajax.response;
    		var newstring = string.split("|");
    
    		document.getElementById('weight').value = newstring[0];	// Insert the response into text box
    		document.getElementById('price').value = newstring[1];	// Insert the response into text box
    	}
    This is what saved the day:

    var string = ajax.response;
    var newstring = string.split("|");
    document.getElementById('weight').value = newstring[0];
    document.getElementById('price').value = newstring[1];

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •