...

View Full Version : Three scripts BAD



koolsamule
06-11-2010, 01:27 PM
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

tomws
06-11-2010, 02:48 PM
Don't ask to post the code - just post it. No one (aside from a clairvoyant) can help without seeing what you're talking about.

koolsamule
06-11-2010, 03:00 PM
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:
http://www.balthasar.co.uk/transfer/before.jpg
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:
http://www.balthasar.co.uk/transfer/after.jpg
I have played around with different options but nothing I've tried seems to work.
Any help would be most appreicated.

tomws
06-11-2010, 04:05 PM
I wonder if the multiple change events on the same element (#customer) have confused it.

What do getCustomerContact.php and getCostCentre.php return? Just <option> tags? Something else?

koolsamule
06-11-2010, 04:23 PM
Hi Tom,

getCustomerContact.php returns select options

and getCostCentre.php returns a couple of table cells and an input field

What do you suggest I try?

tomws
06-11-2010, 05:31 PM
Without knowing what's going on, I would try a bit of re-arranging that change event to test whether the multiple event calls are part of the problem. That would involve:
1) removing the onchange attribute from the select tag.
2) putting that original function call into the jquery (before or after?) the ajax call there
- should look something like: getCustContact($(this)), I think

koolsamule
06-11-2010, 06:46 PM
Hi Dude,

Thanks for the advice, will try it out on Monday. Will shout you then . . .

Cheers

koolsamule
06-14-2010, 10:09 AM
Hi Dude,

I removed the onChange attribute from the select, so now the jQuery call works but the other two scripts do not (as nothing is triggering them).
I've tried to insert the original function into the jQuery call, but if I add it before or after the call, nothing works.
This is what I have:

<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>

<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>
What do you suggest I try?

tomws
06-14-2010, 01:52 PM
<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>


There's no call to getCustContact() there. If nothing works when you put it in, debug.

koolsamule
06-14-2010, 02:50 PM
Hi Tom,

Yeah, that's the bit I don't understand. . .I'm a complete newbie with these things.

I understood that the onChange() attribute on the select triggered the script, but now we have taken that attribute off, I don't know how to call the getCustContact() bit into the 'getCostCentre' script!

tomws
06-14-2010, 03:15 PM
Again, try it in the jquery. It might look like this:

$(document).ready(function(){
$('#customer').change(function() {
getCustContact();
var option = $(this).val();
$.get('getCostCentre.php', {select:option}, function(data) {
$('#result').html(data).hide().fadeIn(1000);
});
});
});

koolsamule
06-14-2010, 03:37 PM
OK, thanks Tom, I've tried that, my script looks exactly like your latest code. Now nothing works, what else can I try?

tomws
06-14-2010, 03:40 PM
Why doesn't it work? Debug. Do you have Firebug installed? If not, get it. Then see what error(s) it's reporting.

koolsamule
06-14-2010, 03:53 PM
Hi Tom, I'm using IE8 not Firefox . . .so I guess it's IE Developer Tools? Haven't a clue what I'm supposed to be looking for!

koolsamule
06-14-2010, 04:02 PM
OK, checked out the IE DT, it looks like the getCustContact() is being called, but the error stops:

var Customer = sel.options[sel.selectedIndex].value;
document.getElementById('custcontact').options.length = 0;

Error message states:

'options' is null or not an object

koolsamule
06-14-2010, 04:09 PM
Top stuff Tom, 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>

tomws
06-14-2010, 04:12 PM
*head slap* Yep, I forgot to pass the value.

You should try Firefox with Firebug. IE's tools tend to be a steaming load of fecal matter. Firebug is pretty nice.

koolsamule
06-14-2010, 04:14 PM
I would if I could, I'm using a variety of different scripts, css, etc that Firefox can't cope with. Thanks for the advice though, this has helped me out no end. Cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum