如何从动态ajax生成的表中获取ROW id（PHP，JQuery，MySQL）

Okay so I have been working on this small project, I have done this before; using jquery when clicking on table row gives an ID/value, but not with php or ajax. So I'm kinda lost, before the ajax query the table has a preset row with information in it. When I click on it everything works fine, but after selecting a source from the drop down menu (the source is a name to search for all rows containing a certain name) and it load all related rows into the table. Clicking on a row jquery does nothing on the generated data, but when clicking on the thead it launches the test alert I have set up. I am using HotKeys to open hidden popup windows for the user to interact with the form/page.

jquery-1.7.1.js.js
jqueryhotkeys.js

External JS File:eval.js

好的,所以我一直在研究这个小项目,我以前做过这个;单击表行时使用jquery给出ID /值,但不使用php或ajax。所以我有点迷失,在ajax查询之前,表中有一个包含信息的预设行。当我点击它时一切正常,但从下拉菜单中选择一个源(源是一个名称来搜索包含某个名称的所有行)后,它将所有相关的行加载到表中。单击行jquery对生成的数据不执行任何操作,但是当单击thead时,它会启动我已设置的测试警报。我正在使用HotKeys打开隐藏的弹出窗口,供用户与表单/页面进行交互。 jquery-1.7.1.js.js jqueryhotkeys.js外部JS文件:eval.js

var s,
    Joe = {
        settings: {                 
        winWidth:       $(window).width(),
        winHeight:      $(window).height(),
        entriesPopW:    $('#overlay_entries').width(),
        entriesPopH:    $('#overlay_entries').height()
    },
    init: function() {
        s = this.settings;
        this.bindUIActions();
    },
    bindUIActions: function() {                 
        $(document).bind('keydown.f7',function (evt){
            //View Previous Entries
            $("#overlay_entries").fadeIn(1000);Joe.entries();Joe.loadEntries();
            $("#assList").change(function(e){
                assSelect = $("#assList").val();
                Joe.entryTable(assSelect);
            });
            $("#table-2 tr").click(function() {
                alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
            });
            $(".f7button").click(function(x){$("#overlay_entries").fadeOut(500);return false;});
            return false; 
        });             
    },
    //shows or hides hidden window
    entries: function(){if(!$("#overlay_entries").is(':visible')){return;} $("#overlay_entries").css({  left: (s.entriesPopW/2)+50 ,top: (s.entriesPopH/2)+50,position:'fixed'   }); },
    //populates table after drop down menu selection
    entryTable: function(a){
        var jac = a;
        $.ajax({
            type: "GET",
            url: "joe_functions.php?select="+jac,
            error: function() {alert('error');},
            success: function (data) {
                $("#table-2 tbody").ajaxComplete(function () {
                    $(this).html(data);                    
                });
            }
        }); 
    },
    //this loads the dropdown menu with names
    loadEntries: function(){
        $.ajax({
            type: "GET",
            url: "joe_functions.php?content=dropdown",
            error: function() {alert('error');},
            success: function (data) {$("#assList").ajaxComplete(function () {$(this).html(data);});}
        });
    }
};

HTML File

<head>
    <title>The Eval Form</title>
    <script src="jquery-1.7.1.js"></script>
    <script src="jquery.hotkeys.js"></script>
    <script type="text/javascript" src="eval.js"></script>
    <script>
        (function() {Joe.init();})();
    </script>
<style>
</style>

</head>

<body>
<div id="overlay_entries" style="display:none">
    <h2> Previous Entries:</h2>
    <center>
        <select name="" id="assList"></select><br/><br/>    
        <table id="table-2">
            <thead>
                <th class="entryColOne">Associate</th>
                <th class="entryColTwo">Eval Date</th>
                <th class="entryColThree">Score</th>
                <th class="entryColFour">Overall</th>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Smith</td>
                    <td>johnsmith@example.com</td>
                    <td>http://www.example.com</td>
                </tr>
            </tbody>
        </table>
        <br/>
        <input type="submit" class="f7button" value=""/>
    </center>
</div>
</body>
</html>

PHP File: joe_functions.php

PHP文件:joe_functions.php

<?php
require 'db_connect.php';

if(isset($_GET['select']) && !empty($_GET['select'])){
    $passed = $_GET['select'];
    //$test = '<tr><td colspan=4">'.$passed.'</td></tr>';
    $sqlb   = 'SELECT * FROM joe_eval WHERE wmid ='.$passed.' ORDER BY id';
    $queryb     = mysql_query($sqlb);
    $numb   = mysql_num_rows($queryb);

    $tableData = '';
    $ib = 0;
    if(!$queryb){
        $query_error = '<tr><td colspan="4">MySQL Error: '.mysql_error().'</td></tr>';
        $tableData .= $query_error;
    }else{
        while($ib <$numb){
            $wmid   = mysql_result($queryb,$ib,'wmid');
            $person     = mysql_result($queryb,$ib,'employee'); 
            $id = mysql_result($queryb,$ib,'id');
            $date       = mysql_result($queryb,$ib,'date');
            $score      = (mysql_result($queryb,$ib,'dm1')+mysql_result($queryb,$ib,'dm2')+mysql_result($queryb,$ib,'dm3')+mysql_result($queryb,$ib,'dm4')+mysql_result($queryb,$ib,'dm5')+mysql_result($queryb,$ib,'dm6')+mysql_result($queryb,$ib,'dm7'))/7;
            $numFormat = number_format($score, 2, '.', '');
            $overall    =   '';

            if ($numFormat >= 1 && $numFormat < 1.6) {$overall = 'Below Needs';
            }else if ($numFormat >= 1.6 && $numFormat < 2.7) {$overall = 'Improvment Needed';
            }else if ($numFormat >= 2.7 && $numFormat < 3.6) {$overall = 'Good Performer';
            }else if ($numFormat >= 3.6 && $numFormat < 4.6) {$overall = 'Exceeds Expectations';
            }else if ($numFormat >= 4.6 && $numFormat <= 5) {$overall = 'Top Dog';}

                // HERE IS WERE THE ROW ID IS BEING INSERTED
                // WHICH WILL LATER BE USED TO LOAD FORM
                $tableData .= '<tr id="'.$id.'"><td>'.$person.'</td><td>'.$date.'</td><td class="score">'.$numFormat.'</td><td>'.$overall.'</td></tr>';
            $ib++;
        }
    }
    // Send back the tbody HTM
    echo $tableData;
}else{
    $tableData .= '<tr><td colspan="4"><b>YOU MUST SELECT A NAME FROM THE LIST ABOVE!</b></td></tr>';
}
?>

So I'm not sure if it might be an error in the JS file, or if I should be adding something in the PHP file to generated along with the data that's sent to the ajax request.

所以我不确定它是否可能是JS文件中的错误,或者我是否应该在PHP文件中添加一些内容以及发送到ajax请求的数据。

2 个解决方案

#1

One thing you can do is use jquery .on(), which is used to bind event handlers on dynamically generated data, in your case the data received from ajax call,

您可以做的一件事是使用jquery .on(),它用于绑定动态生成的数据上的事件处理程序,在您的情况下是从ajax调用接收的数据,

So instead of

而不是

$("#table-2 tr").click(function() {
      alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

you could do something like this

你可以做这样的事情

$("#table-2 tr").on("click", function() {
      alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

Let me know if that helps.

如果有帮助,请告诉我。

You can also read about jquery .on() here

你也可以在这里阅读jquery .on()

#2

Thanks to Mandeep Jain for the tap on the shoulder to look in a different direction, this was a quick and easy fix.

感谢Mandeep Jain肩膀上的水龙头向不同的方向看,这是一个快速简单的解决方案。

First Try:

$("#table-2 tbody tr").click(function() {
     alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

Second Try:

$("#table-2 tbody tr").on("click", function() {
     alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

Third and Final WORKING Fix:

$("#table-2 tbody tr").live("click", function() {
     alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

JQuery Documentation:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

从jQuery 1.7开始,不推荐使用.live()方法。使用.on()附加事件处理程序。旧版jQuery的用户应该使用.delegate()而不是.live()。

This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page.

此方法提供了将委托事件处理程序附加到页面的文档元素的方法,这可以在将内容动态添加到页面时简化事件处理程序的使用。

#1

One thing you can do is use jquery .on(), which is used to bind event handlers on dynamically generated data, in your case the data received from ajax call,

您可以做的一件事是使用jquery .on(),它用于绑定动态生成的数据上的事件处理程序,在您的情况下是从ajax调用接收的数据,

So instead of

而不是

$("#table-2 tr").click(function() {
      alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

you could do something like this

你可以做这样的事情

$("#table-2 tr").on("click", function() {
      alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

Let me know if that helps.

如果有帮助,请告诉我。

You can also read about jquery .on() here

你也可以在这里阅读jquery .on()

#2

Thanks to Mandeep Jain for the tap on the shoulder to look in a different direction, this was a quick and easy fix.

感谢Mandeep Jain肩膀上的水龙头向不同的方向看,这是一个快速简单的解决方案。

First Try:

$("#table-2 tbody tr").click(function() {
     alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

Second Try:

$("#table-2 tbody tr").on("click", function() {
     alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

Third and Final WORKING Fix:

$("#table-2 tbody tr").live("click", function() {
     alert("You clicked ROW:\n\nID:  " + $(this).attr('id'));
});

JQuery Documentation:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

从jQuery 1.7开始,不推荐使用.live()方法。使用.on()附加事件处理程序。旧版jQuery的用户应该使用.delegate()而不是.live()。

This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page.

此方法提供了将委托事件处理程序附加到页面的文档元素的方法,这可以在将内容动态添加到页面时简化事件处理程序的使用。

秒客网

如何从动态ajax生成的表中获取ROW id（PHP，JQuery，MySQL）

2 个解决方案

#1

#2

First Try:

Second Try:

Third and Final WORKING Fix:

#1

#2

First Try:

Second Try:

Third and Final WORKING Fix:

相关文章