Click function behaving oddly

I have a site I am working on that I did not build and am having problems with an ajax / javascript call.

I was hoping someone with firebug could take a look. I have firebug but I am not a js guy.

http://www.ecfunctionbands.com/band-detail/motown-gold/

The big green button that says add to quote list is a link with an image BG. It should swap classes when clicked therefore changing the BG image to a red one as well as the text at the very top right of the screen swapping to add a number to the list of items in the quote list.

Sometimes it works… I think only the first time it is clicked, sometimes the text in the top right changes but the image does not etc. If you click it and it does nothing but the refresh the page then the class will change which is weird, it’s like it’s trying to switch but cant until you reload the page.

I don’t know anything about ajax, does anyone have any ideas on how to fix this?

Worked like a charm :wink:

try the fix and let me know if it works out.

Wow thanks for the thorough reply.

The whole site is a disaster not just the JS… it was outsourced to a company in india somewhere.

First let me note that the javascript used on this site is a disaster.

Now, back to the problem, there are 2 coding mistakes that are creating a problem. One of them is client side scripting (javascript), and the other one is server side scripting.

Problem 1: (javascript mistake)

It happens when you click more than one time on the green button before it switches to red. (if you click one time and wait, there will be no problem). If you click twice before it switches, the request is sent twice to the server who gets really confused and panics (of course if the server was better developed it wouldn’t have this problem).

Solution: Do not allow the javascript to send to identical requests to the server. This is done by fixing the code found in this link:

http://www.ecfunctionbands.com/wp-content/themes/earcandy-theme/js/GetAjaxhttp.js

Replace this code:


var ajax_value_file=ajax_folder+"GetAjaxValue.php?ajax_type=";

var quote_add_file=ajax_value_file+"getAddQuote";
var quote_remove_file=ajax_value_file+"getRemoveQuote";

with this code:


var ajax_value_file=ajax_folder+"GetAjaxValue.php?ajax_type=";
var quote_add_file=ajax_value_file+"getAddQuote";
var quote_remove_file=ajax_value_file+"getRemoveQuote";
var processed=false;

and replace this code:


function requestAddQuoteDetail(listId)
{
	var url = quote_add_file+"&listId="+listId;
		
	http_add_quote.open("GET", url , true);	
	http_add_quote.onreadystatechange = handleAddQuoteResponse;			
	http_add_quote.send(null);	
}
function handleAddQuoteResponse() 
{		
	if (http_add_quote.readyState == 4) 
	{	
		if(http_add_quote.status==200) 
		{
			//var results=http_add_quote.responseText;
			var results=http_add_quote.responseText.split("|");
			if(results!="")
			{	
				//window.location.reload();
				
				var quoteCnt=results[0];
				document.getElementById('quoteCount').innerHTML=quoteCnt;
				var quoteSpan=results[1];
				var quoteButton=results[2];
				document.getElementById(quoteSpan).innerHTML=quoteButton;
			}		
		}
  	}
}


with this code :


function requestAddQuoteDetail(listId)
{
        if(processed)return;
        processed=true;
	var url = quote_add_file+"&listId="+listId;
		
	http_add_quote.open("GET", url , true);	
	http_add_quote.onreadystatechange = handleAddQuoteResponse;			
	http_add_quote.send(null);	
}
function handleAddQuoteResponse() 
{		
	if (http_add_quote.readyState == 4) 
	{	
		if(http_add_quote.status==200) 
		{
                        processed=false;
			var results=http_add_quote.responseText.split("|");
			if(results!="")
			{	
				var quoteCnt=results[0];
				document.getElementById('quoteCount').innerHTML=quoteCnt;
				var quoteSpan=results[1];
				var quoteButton=results[2];
				document.getElementById(quoteSpan).innerHTML=quoteButton;
                               
			}		
		}
  	}
}


Problem 2: (php mistake)

It happens when the user refreshes the page after adding a quote. (He refreshes while the button is red). Once the new refreshed page opens, when he clicks on the red button to remove the quote, the button remains the same and only the text at the top of the screen changes.

This happens because the php script, before rendering the page, realizes that the user already has a quote and forgets to render a span element that is crucial to the button switching.

the link element:


<a class='quotebuttonsquareremove' style="display: block; width: 143px; height: 74px;" href="javascript:;" onclick="requestRemoveQuoteDetail('13');">

should be placed inside a span called quote_13. So this is the html that should be rendered instead :


<span style="position: relative; display: block; width: 143px; height: 74px;" id="quote_13">

<a class='quotebuttonsquareremove' style="display: block; width: 143px; height: 74px;" href="javascript:;" onclick="requestRemoveQuoteDetail('13');">

</span>

Fix these 2 problems and your site will be good as new :slight_smile:
let me know if you need me to better clarify something.