Question

I am dynamically loading question content into a div using jquery . This is my first attempt and it does load when I click the “Get Question”-button. However, the “Get Question”-button disappears when the question loads. I want the button to stay and eventually use it as a next question button.

Here is the jquery code:

<script type="text/javascript" src="../jquery/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(
$("#GetQuest").click(function(){
    $.post("CCRN/question.php", {num : parseInt($("input#q_num").val()) + 1}, function (data) {
        $("div#question").html(data);
        $("input#q_num").val() =  parseInt($("input#q_num").val()) + 1;
    });
});
});
</script>

<input type="button" id="GetQuest" value="Get Question" />
<input type="hidden" id="q_num" value=1 />
<p>Question: <div id="question"> </div></p>
<p>Answer: <div id="answer"> </div></p>

Here is the question creating code (though the question loads and display fine)

<table width="100%"><?php
$i = $q_num;
if ($row["image"] <> NULL) { ?>
 <tr align="center">
    <td colspan="2" align="center">
        <img src="<?php $pic = $row["image"]; echo $base_path . $pic; ?>" />
    </td>
 </tr><br />
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<?php
 } ?>
<tr id="Qu<?php echo $i; ?>" class="Qu<?php echo $i; ?>">
<td width="7%"><?php echo $i.") " ?></td>
<td width="93%" ><?php echo $row["question"]; ?></td>
</tr>

<?php 
for ($j=1;$j<=6;$j++) { 
$bracket= "answer_" . $j;
if ($row[$bracket] !== NULL) {?>
    <tr>
        <td align="center" class="row<?php echo $j % 2; ?>" width="7%">
            <input type="radio" <?php echo ($_POST["Q".$i] == $j) ? 'checked="checked"' : '' ; ?> name="Q<?php echo $i; ?>" value="<?php echo $j; ?>" /><?php echo chr(64 + $j); ?>
        </td>
        <td class="row<?php echo $j % 2; ?>" width="93%">
            <?php echo $row["answer_".$j]; ?>
        </td>
    </tr> <?php
}
} ?>
</table><hr size="2" width="95%">

I do not understand why the button disappears when I load the question content. I am SURE it is something embarassing simple, which is why I am coming to a safe haven to minimize the ridicule! 🙂

Live test site http://www.GrowingSpeakers.com/index2.php to see the disappearing button.

Answer 1

You are using div with id “question” before.

<div class="TabbedPanelsContent" id="question"> 

and

<p>Question: <div id="question"> </div></p>

It does not matter even though the id’s come from different files as long as they are displayed in the same DOM tree – they will be treated as one and the same.