Feel bad as this is my first post...but I really need some help.
Does anyone know how I can combine the 2 scripts below. I have difficulty with Ajax, much better at PHP so I'll make sure i'll help someone out in that area.
Script 1.
<script language="javascript" type="text/javascript">
function changebgcolor(id,color) {
var xmlHttp
function getattribimage(attribfield,width,height,products_options_values_id,products_id)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="attrib_prod_info.php";
url=url+"?width="+width+"&height="+height+"&products_options_values_id="+products_options_values_id+ "&products_id="+products_id;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
var product_color_image=xmlHttp.responseText;
if(product_color_image!=''){
document.getElementById('productMainImage').innerHTML = product_color_image;
}
}
}
//--------------------------------------------------------
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
________________
Script 2
$load = true; // if any of the PHP conditions fail this will be set to false and DPU won't be fired up
define('DPU_PRODUCT_FORM', 'cart_quantity'); // this should never change
define('DPU_PRICE_ELEMENT_ID', 'productPrices'); // this is the ID of the element where your price is dieplayed
$load = true;
$pid = (!empty($_GET['products_id']) ? intval($_GET['products_id']) : 0);
if (0==$pid) {
$load = false;
} elseif (zen_get_products_price_is_call($pid) || zen_get_products_price_is_free($pid) || STORE_STATUS > 0) {
$load = false;
}
$pidp = zen_get_products_display_price($pid);
if (empty($pidp)) $load = false;
if ($load) {
?>
<script language="javascript" type="text/javascript">
// Hidey codey <![CDATA[
// Set some global vars
var theFormName = '<?php echo DPU_PRODUCT_FORM; ?>';
var theForm = false;
var theURL = '<?php echo DIR_WS_CATALOG; ?>dpu_ajax.php';
var _secondPrice = '';
var objSP = false; // please don't adjust this
var request = new Array();
function objXHR()
{ // scan the function clicked and act on it using the Ajax interthingy
var url; // URL to send HTTP requests to
var timer; // timer for timing things
var XHR; // XMLHttpRequest object
var _responseXML; // holds XML formed responses from the server
var _responseText; // holds any textual response from the server
var request; // associative array to hold requests to be sent
request = new Array();
this.createXHR();
}
objXHR.prototype.createXHR = function () { // this code has been modified from the Apple developers website
this.XHR = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) { // decent, normal, law abiding browsers
try { // make sure the object can be created
this.XHR = new XMLHttpRequest();
} catch(e) { // it can't
this.XHR = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) { // this does stuff too
try {
this.XHR = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
this.XHR = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
this.XHR = false;
}
}
}
}
objXHR.prototype.getData = function(strMode, resFunc) { // send a request to the server in either GET or POST
strMode = (strMode.toLowerCase() == 'post' ? 'post' : 'get');
var _this = this; // scope resolution
this.createXHR();
if (this.XHR) {
this.XHR.onreadystatechange = function () {
if (_this.XHR.readyState == 4) {
// only if "OK"
if (_this.XHR.status == 200) {
_this._responseXML = _this.XHR.responseXML;
_this._responseText = _this.XHR.responseText;
_this.responseHandler(resFunc);
} else {
alert('Status returned - ' + _this.XHR.statusText);
}
}
}
this.XHR.open(strMode.toLowerCase(), this.url+(strMode.toLowerCase() == 'get' ? '?' + this.compileRequest() : ''), true);
if (strMode.toLowerCase() == 'post') this.XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
this.XHR.send(this.compileRequest());
} else {
var mess = "I couldn't contact the server!\n\nIf you use IE please allow ActiveX objects to run";
alert (mess);
}
}
objXHR.prototype.compileRequest = function () {
// parse the request array into a URL encoded string
var ret = ''; // return request string
for (var e in request) {
ret += e + '=' + request[e] + '&';
}
return (ret.substr(0, ret.length - 1));
}
objXHR.prototype.responseHandler = function (theFunction) { // redirect responses from the server to the right function
request = new Array();
eval('this.'+theFunction);
}
objXHR.prototype.getPrice = function () {
this.url = theURL;
var n=theForm.elements.length;
for (var i=0; i<n; i++) {
var el = theForm.elements[i];
switch (el.type) { <?php // I'm not sure this even needed as a switch; testing needed ?>
case 'select':
case 'select-one':
case 'text':
case 'hidden':
request[el.name] = escape(el.value);
break;
case 'checkbox':
case 'radio':
if (true == el.checked) request[el.name] = escape(el.value);
}
}
this.getData('post', 'handlePrice()');
}
objXHR.prototype.handlePrice = function () {
var thePrice = document.getElementById('<?php echo DPU_PRICE_ELEMENT_ID; ?>');
var type = this._responseXML.getElementsByTagName('responseType')[0].childNodes[0].nodeValue;
if (type == 'error') {
this.showErrors();
} else {
var temp = this._responseXML.getElementsByTagName('responseText');
for(var i=0, n=temp.length; i<n; i++) {
var type = temp[i].getAttribute('type');
switch (type) {<?php // the 'type' attribute defines what type of information is being provided ?>
case 'priceTotal':
thePrice.innerHTML = temp[i].childNodes[0].nodeValue;
if (_secondPrice !== false) updSP();
break;
case 'quantity':
with (temp[i].childNodes[0]) {
if (nodeValue != '') {
thePrice.innerHTML += nodeValue;
updSP();
}
}
break;
}
}
}
}
function updSP() {
// adjust the second price display; create the div if necessary
var flag = false; // error tracking flag
if (_secondPrice !== false) { // second price is active
var centre = document.getElementById('productGeneral');
var temp = document.getElementById('<?php echo DPU_PRICE_ELEMENT_ID; ?>');
var itemp = document.getElementById(_secondPrice);
if (objSP === false) { // create the second price object
if (!temp || !itemp) flag = true;
objXHR.prototype.showErrors = function () {
var errorText = this._responseXML.getElementsByTagName('responseText');
var alertText = '';
var n=errorText.length;
for (var i=0; i<n; i++) {
alertText += '\n- '+errorText[i].childNodes[0].nodeValue;
}
alert ('Error! Message reads:\n\n'+alertText);
}
var xhr = new objXHR;
function init() {
var n=document.forms.length;
for (var i=0; i<n; i++) {
if (document.forms[i].name == theFormName) {
theForm = document.forms[i];
continue;
}
}
var n=theForm.elements.length;
for (var i=0; i<n; i++) {
switch (theForm.elements[i].type) {
case 'select':
case 'select-one':
theForm.elements[i].onchange = function () { xhr.getPrice(); }
break;
case 'text':
theForm.elements[i].onkeyup = function () { xhr.getPrice(); }
break;
case 'checkbox':
case 'radio':
theForm.elements[i].onclick = function () { xhr.getPrice(); }
break;
}
}
xhr.getPrice();
}
<?php
// the following statements should allow multiple onload handlers to be applied
// I know this type of event registration is technically deprecated but I decided to use it because I haven't before
// There shouldn't be any fallout from the downsides of this method as only a single function is registered (and in the bubbling phase of each model)
// For backwards compatibility I've included the traditional DOM registration method ?>
try { // the IE event registration model
window.attachEvent('onload', init);
} catch (e) { // W3C event registration model
window.addEventListener('load', init, false);
} finally {
window.onload = init;
}
// Endy hidey ]]></script><?php } ?>
The problem is when both modules are installed together the price updater stops working. I'm guessing because they both use a global XMLhttrequest which is conflicting. Both modules work until the page stops loading which once loaded locks the scripts down allowing only one to function.
Uf! I still can not find any variables nor objects conflicting between the 2 scripts,
but only an unknown reason for repeating of function GetXmlHttpObject() within script #1.
You might delete one of them, but I guess that would not solve the problem.
Script2 declares ajax object xhr, different from script1's, xmlHttp.
Each objects could then send their own requests, and each shall receive own responses.
So if there are any ajax request-response overriding, in your case,
would come from xhr itself.. overriding previous xhr request,
or from xmlHttp.. overriding previous xmlHttp request.
Is there any demo where I could see this conflicting effects?
So if there are any ajax request-response overriding, in your case,
would come from xhr itself.. overriding previous xhr request,
or from xmlHttp.. overriding previous xmlHttp request.
Sorry, I was wrong about it.
Only script1's xmlHttp does self-overriding, not script2's xhr.
How does script1's function getattribimage() get called from your page?
Is it from onclick / onkeyup / onchange events ?
function getattribimage() is called onChange activated by a drop down menu.
The scripts are used on a canvas site. A canvas size is selected and the main image is replaces by the size reference. And the price should update with which ever canvas they select. I will PM the site address.
The extra function GetXmlHttpObject() in script 2 I remember is a mistake. Only one is needed. If you download the mods from the links given in my previous code, perhaps its something also causing it to conflict.
BTW, I was just changing the size of your "Heath Ledger - The Joker Canvas Art",
got the priced well updated, but not main image. And also got a Firefox warning Empty string passed to getElementById().
So that might be generated from the line within function stateChanged(); that there was no ajax response at all.
To capture what causing it, we could add a bit script to this function:
Code:
function stateChanged(){
if (xmlHttp.readyState==4){
if (xmlHttp.status==200){
var
product_color_image=xmlHttp.responseText;
if(product_color_image!=''){
document.getElementById('productMainImage').innerHTML = product_color_image;
}
}
else{
with (xmlHttp){
window.alert("HTTP Status="+status+":"+statusText);
}
}
}
}
...no error is alerted which means its sending a response? but not updating the image.
Yes, you are right. It is just to check, not updating images.
And it also means no HTTP error has occured during request and response.
But why the product_color_image as a response is an empty string?
Quote:
...And also got a Firefox warning Empty string passed to getElementById().
... since there is no request for image updating?
So here's a solution (hope I'm right)...
Since script2 (price updater) has always registered its onchange event first,
we'll adjust script1's (image updater) by writing different code for <div class="back">.
It will now look like following:
The code that you show above, where should this be placed. Is that part of the original script in the thread or part of another script within one of the mods that I linked?
Is it possible that attrib-2 isnt declared as an elementbyid? how could i change this?
It is there to detect the <select> HTML element... why?
Just a note:
I still see the a piece of source code of your page as:
...document.getElementById(id[2]).addEventListener(...
where it should be:
...document.getElementById("id[2]").addEventListener(...
Before you post, read our: 
