script not working in Ajax returned value

Question

I am displaying item id and title.there is also a link "show items of this member".while clicking on it it will display the items of that user.I am using ajax for this.There is a script for detecting the order of clicking on checkbox.This working properly for first listed items.but not working for ajax returned items

<table id="result" width="100%">
<?php 
if($tot1>0){
while($row5=mysql_fetch_array($result1))
{
?> 
<tr class="detail9txt" height="30"> 
<td width="2%"><input type="checkbox" name="item" value="<?=$row5[item_id];?>"></td>
<td align="center" width="12%" style="vertical-align:baseline;"><a href=""><?=$row5['item_title'];?></a>
</td> 
</tr>
<tr><td colspan="6" align="right"><a href="javascript:callfunc(<?= $row5[user_id]; ?>)" style="font-size:10px;">Show items for this Member</a></td></tr>
<?php
}}
?>
</table>
<input name="hidden_field" type="hidden" id="hidden_field"/>
<input type="image" name="submit" src="images/submito.gif" value="submit">

script code and ajax is

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

//alert(str);
if (str.length==0)
{ 
document.getElementById("result").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdetails.php?cid="+str,true);
xmlhttp.send();
}
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
<!--
$(document).ready(function () { 

    var array = []; 
    $('input[name="item"]').click(function () { 

        if ($(this).attr('checked')) { 
            // Add the new element if checked: 
            array.push($(this).attr('value')); 
            alert(array);
            //hidden_field.value = array.join(',');
            //hidden_field.value = array.join(',');
            document.getElementById('hidden_field').value=array.join(',');
        } 
        else { 
            // Remove the element if unchecked: 
            for (var i = 0; i < array.length; i++) { 
                if (array[i] == $(this).attr('value')) { 
                    array.splice(i, 1); 
                } 
            } 
        } 


    }); 
});
//-->
</script>

getdetails.php code is

<?php
require 'include/connect.php';
$cid=$_GET['cid'];

$sql="select * from table where user_id=$cid";
$res=mysql_query($sql); 
$tot=mysql_num_rows($res);
if($tot>0){
while($row=mysql_fetch_array($res))
{
echo '<tr class="detail9txt" height="30"> 
<td width="2%"><input type="checkbox" name="item" value="'.$row[item_id].'"></td>
      <td align="center" width="12%" style="vertical-align:baseline;">
        <a href="">'.$row['item_title'].'</a>
      </td> </tr>';
}}
?>

Missing `}` at end of getdetails.php – Musa Jan 02 '13 at 06:26 — Musa, Jan 02 '13 at 06:26

score 2 · Answer 1 · answered Jan 02 '13 at 06:32

2

You are not calling onclick function in your ajax generated code. In getdetails.php Change

<input type="checkbox" name="item" id="item" value="'.$row[item_id].'">

to

<input type="checkbox" onclick="javascript:call_check()" name="item" id="item" value="'.$row[item_id].'">

Also id attribute of any html tag should be unique. This may not create any problem, but definitely not a good practice.

answered Jan 02 '13 at 06:32

Sree

635
4
10

i don't want call_check() function – asitha Jan 02 '13 at 06:40
You must call the function for detecting order of clicking on checkbox, after loading ajax results. Create a separate function for that and call it once ajax call is completed – Sree Jan 02 '13 at 06:46

score 0 · Answer 2 · answered Jan 02 '13 at 06:29

0

You should probably change click in script to on

answered Jan 02 '13 at 06:29

WooCaSh

5,180
5
36
54

i didn't get you.what you mean? – asitha Jan 02 '13 at 06:40
i tried $('input[name="item"]').on("click", function(event){ but no effect – asitha Jan 02 '13 at 06:46

score 0 · Accepted Answer · answered Jan 02 '13 at 09:36

Use this script

<script type="text/javascript">
var array = []; 
    $('#item').live('click', function() {
if ($(this).attr('checked')) { 
            // Add the new element if checked: 
            array.push($(this).attr('value')); 
            document.getElementById('hidden_field').value=array.join(',');
        } 
        else { 
            // Remove the element if unchecked: 
            for (var i = 0; i < array.length; i++) { 
                if (array[i] == $(this).attr('value')) { 
                    array.splice(i, 1); 
                } 
            } 
        } 


});

</script>

script not working in Ajax returned value

3 Answers3

Linked

Related