Three scripts BAD

Hi Chaps,

I had a two similar scripts that uses a select option to pass a parameter to a php page, then returns options/values to a seperate select drop down.

Both of these scripts worked fine until I added another script. The new script is different, in that it checks the value of the original select option, then passes that value to a seperate php page, then, if a condition is met, an input field is displayed.

This new script works, but has resulted in the two original scripts doubling the values that they return.

I hope that makes sense, if anyone can spare anytime, I’ll gladly post the code and any other information . . . .

Cheers

IE DT sorted up right out. Excellent tool for debugging.
Script is working fine now:

<script type="text/javascript">
           $(document).ready(function(){
                $('#customer').change(function() {
                    var option = $(this).val();
					getCustContact (this);
					getCostCentreContact (this);
                    $.get('getCostCentre.php', {select:option}, function(data) {
                        $('#result').html(data).hide().fadeIn(1000);
                    });
                });
            });
</script>

If you do not post the source code of your scripts, nobody will be able to help you. The new script you wrote is obviously interfering with the old ones, but we need to see it in order to judge where.

If you really don’t know where to start, I would suggest that you comment out all of your new script, and start adding functionality one by one until you see the problem again. This will at least tell you WHERE your script is failing…

Hi, thanks for the code,
I’ve relpaced:

<script type="text/javascript">
            $(document).ready(function(){
                $('#customer').change(function() {
                    var option = $(this).val();
                    $.get('getCostCentre.php', {select:option}, function(data) {
                        $('#result').html(data).hide().fadeIn(1000);
                    });
                });
            });
</script>

with:

<script type="text/javascript">
var myAjax;
try {
	myAjax = new XMLHttpRequest();
	myAjax.open('GET', 'getCostCentre.php', true);
	myAjax.setRequestHeader('Content-Type', 'text/html');
}
catch (err) {
	myAjax = new ActiveXObject("Microsoft.XMLHTTP");
	myAjax.open('GET', 'getCostCentre.php', true);
	myAjax.setRequestHeader('Content-Type', 'text/html');
}
myAjax.onreadystatechange = function() {
	if (myAjax.readyState == 4) {
	var myResponse = myAjax.responseText;
	$('#result').html(myResponse).hide().fadeIn(1000);
}
}
myAjax.send(null);
</script>

The two original scritps are working (no dulpicates) but the input in getCostCentre.php isn’t showing, do I have to change something on the select input that triggers this script?

Hi dude, I haven’t written my own XMLHTTPRequest . . .I’m a complete newbie, I found and managed to tweek the scripts to suit my needs. It’s only since adding the latest script that I’ve run into problems . . .and haven’t a clue how to solve it. . . If you could guide me through it, I might be able to sleep easy!

Just as a test, have you tried doing the same writing your own XMLHTTPRequest? To me it seems as though the script gets fired twice; on readyState=2 and on readyState=4 .

If you write your own XMLHTTPRequest, and specify to only insert the HTML when readyState=4. then that would tell us that the $.get is doing something funny.

A hack for this problem would be to trap whether or not your fields have already been populated with the response data, and if yes then do nothing…

OK,

Here is the select, that triggers 3 scripts:

<select id="customer" name="FK_cust_id" onchange="getCustContact(this)">
<option value="">Select Customer</option>
            <?php
do {  
?>
	<option value="<?php echo $row_rsCustomer['cust_id']?>"><?php echo $row_rsCustomer['custname']?></option>
<?php
} while ($row_rsCustomer = mysql_fetch_assoc($rsCustomer));
  $rows = mysql_num_rows($rsCustomer);
  if($rows > 0) {
      mysql_data_seek($rsCustomer, 0);
	  $row_rsCustomer = mysql_fetch_assoc($rsCustomer);
	}
?>
</select>

As you can see, nothing wrong with this, the options are populated from a MySQL database.
Here is the first script:

<script type="text/javascript">
var ajax_CustContact = new Array();
function getCustContact(sel)
{
	var Customer = sel.options[sel.selectedIndex].value;
	document.getElementById('custcontact').options.length = 0;
	if(Customer.length>0){
		var index = ajax_CustContact.length;
		ajax_CustContact[index] = new sack();
		
		ajax_CustContact[index].requestFile = 'getCustomerContact.php?custid='+Customer;
		ajax_CustContact[index].onCompletion = function(){ createCustContact(index) };
		ajax_CustContact[index].runAJAX();
	}
}
function createCustContact(index)
{
	var obj = document.getElementById('custcontact');
	eval(ajax_CustContact[index].response);
}
</script>

This returns all the contacts for the selected Customer.

This is what the ‘custcontact’ select looks like:

Which is what I’m after. There is a similar script that does exactly the same, but populates a seperate select, I’m excluding this of this example.
Now, the problem I’m having is when I add this script:

<script type="text/javascript">
            $(document).ready(function(){
                $('#customer').change(function() {
                    var option = $(this).val();
                    $.get('getCostCentre.php', {select:option}, function(data) {
                        $('#result').html(data).hide().fadeIn(1000);
                    });
                });
            });
</script>

This works, in that it does what I asked it to do, the ‘getCostCentre.php’ echo’s an input if a particular customer is selected. However, it triggers a problem with the ‘custcontact’ select options, by repeating the list. Here is what it looks like after adding the above script:

I have played around with different options but nothing I’ve tried seems to work.
Any help would be most appreicated.

OK, here we go. You HTTPRequest should look something like this:

        var myAjax;
        try {
            myAjax = new XMLHttpRequest();
            myAjax.open('GET', 'getCostCentre.php', true);
            myAjax.setRequestHeader('Content-Type', 'text/html');
        }
        catch (err) {
            myAjax = new ActiveXObject("Microsoft.XMLHTTP");
            myAjax.open('GET', 'getCostCentre.php', true);
            myAjax.setRequestHeader('Content-Type', 'text/html');
        }
        myAjax.onreadystatechange = function() {
            if (myAjax.readyState == 4) {
                var myResponse = myAjax.responseText;
                $('#result').html(myResponse).hide().fadeIn(1000);
            }
        }
        myAjax.send(null);

If this does not generate double posts, then you know that $.get is tripping up somewhere…