.innerHTML not working?

kernelgpf · 01-25-2009, 04:14 PM

In a script, I'm first using a form to call a list of entries from my database. Then, next to each item on the list, a "enter this show" link shows up. In the next function, when the user clicks "enter this show", a dog_id and show_id are passed. Each URL on the page is labelled "showX" with "X" being the show ID. All my variables are working fine. When the show_id is passed to the second function, my Ajax request should return the simple text "show successfully entered" in "ajaxentershow.php", as that is all the file contains.

The problem is nothing happens when the "enter this show" link is clicked. No errors in Firebug, no messages, nothing. I'm at a loss.

Here's my script:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head>

<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script type="text/javascript">
function sendRequest() {
    

var showtype = document.test.showtype.options;
var chosen_showtype = showtype[showtype.selectedIndex].value;
var dog_id = document.test.dog_id.options;
var chosen_dogid = dog_id[dog_id.selectedIndex].value;


        new Ajax.Request("ajaxshowsearch.php",
                    {
                    method: 'post',
                    postBody: 'showtype='+chosen_showtype+'&dog_id='+chosen_dogid,
                    onComplete: showResponse
                    });
                
                }

            function showResponse(req){
                $('foo').innerHTML= req.responseText;
            }
            
            function replaceshow(show_id,dog_id) {
        new Ajax.Request("ajaxentershow.php",
                    {
                    method: 'post',
                    postBody: 'show_id='+show_id+'&dog_id='+dog_id,
                    onComplete: showResponse2
                    });
                }

            function showResponse2(req2){
                alert(req2);
                $('show'+show_id).innerHTML= 'done';
            }
</script>


<form name=test id=test onsubmit="return false;">
Dog:
HERE;
$query=mysql_query("select name,dog_id,breed from dogs where player_id='$player_id' and age < 108 and train_complete=1 and weight >= 90 and weight <= 110 and trust >= 50");
if(mysql_num_rows($query) != "0"){
    print "<select name=dog_id id=dog_id>";
while($row=mysql_fetch_array($query)){
    print "<option value=$row[dog_id]>$row[name] (#$row[dog_id]), $row[breed]</option>";
}
print "</select><br>";
}
else{
print "No dogs eligible for showing.<br>";
}

print "<select name='showtype' id='showtype'>
<option>Flyball</option>
<option>Obedience</option>
<option>Agility</option>
<option>HTM</option>
</select><br>";
if(mysql_num_rows($query) != "0"){
    print "<input type=submit name=submit value='Search Shows' onClick=sendRequest()>";
}
print "</form>";
?>


<div id="foo"></div></body></html>

the portion from the second Ajaxically called file that makes up the HTML:

Code:

while($row=mysql_fetch_array($query)){
    print "$row[name] | e: <b>$row[entry_fee]</b> | p: <b>$row[pot]</b> | runs: <b>$row[run_day]</b> | <b><a href='#' onClick='replaceshow({$row['show_id']},$dog_id)' id='show{$row['show_id']}'>enter this show</a></b><br>";
}

A URL: http://straydays.co.uk/shows.php?

HTML:

Code:

<script type="text/javascript">
function sendRequest() {
    

var showtype = document.test.showtype.options;
var chosen_showtype = showtype[showtype.selectedIndex].value;
var dog_id = document.test.dog_id.options;
var chosen_dogid = dog_id[dog_id.selectedIndex].value;


        new Ajax.Request("ajaxshowsearch.php",
                    {
                    method: 'post',
                    postBody: 'showtype='+chosen_showtype+'&dog_id='+chosen_dogid,
                    onComplete: showResponse
                    });
                
                }

            function showResponse(req){
                $('foo').innerHTML= req.responseText;
            }
            
            function replaceshow(show_id,dog_id) {
        new Ajax.Request("ajaxentershow.php",
                    {
                    method: 'post',
                    postBody: 'show_id='+show_id+'&dog_id='+dog_id,
                    onComplete: showResponse2
                    });
                }

            function showResponse2(req2){
                alert(req2);
                $('show'+show_id).innerHTML= 'done';
            }
</script>


<form name="test" id="test" onsubmit="return false;">
Dog:<select name="dog_id" id="dog_id"><option value="287">Coming Soon (#287), Dachshund</option><option value="288">Coming Soon (#288), Alaskan Malamute</option><option value="289">Coming Soon (#289), Basenji</option></select><br><select name="showtype" id="showtype">
<option>Flyball</option>
<option>Obedience</option>
<option>Agility</option>
<option>HTM</option>
</select><br><input name="submit" value="Search Shows" onclick="sendRequest()" type="submit"></form>

<div id="foo"><hr noshade="noshade">testing show | e: <b>99</b> | p: <b>6</b> | runs: <b>Wednesday</b> | <b><a href="#" onclick="replaceshow(3,287)" id="show3">enter this show</a></b><br>testing show | e: <b>99</b> | p: <b>6</b> | runs: <b>Wednesday</b> | <b><a href="#" onclick="replaceshow(4,287)" id="show4">enter this show</a></b><br></div>

ohgod · 01-26-2009, 04:06 PM

first of all... read my response at the end of your other thread.

http://www.codingforums.com/showthread.php?t=156677

if you're going to use prototype... why not use it to it's full extent? most of your code can be summed up with:

Code:

new Ajax.Updater( 'foo', 'ajaxshowsearch.php', 
			    { method: 'post', parameters: $('test').serialize()
				} );

which sure would cut down on debugging...

anyway, throw some alerts in there and see where it's breaking.

onComplete: showResponse

^^^ how is the return getting to the showResponse function if you don't send it there?