CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
user1058359
user1058359

Reputation: 183

adding elements dynamically and handling events

I was attempting to create a simple combo box but perhaps the logic for JQuery integration may not be correct, I wanted to know if there was a more logical way to do this that I might not be seeing.

I have this code that populates a dropdown based on a php pull from mysql: 

                       echo "<td width=\"150\">
                        <div class=\"select\"><select name=\"levelDrop\" class=\"openForm\" id=\"levelDrop\">
                        <option value=\"NULL\">--- Select Level ---</option>";
                        include("***/phpFunctions/****.php");
                        $sql = "SELECT * From EXAMPLETABLE where COLUMNAMEEXAMPLE = HARDCODEDNUMBER";
                        $result = mysql_query($sql);

                        while($row = mysql_fetch_array($result)){
                            echo "<option value=\"".$row['PRIMARYKEY']."_".$row['NUMBER']."\">".$row['NAME']."</option>";
                        }
                        mysql_close($link);
                    echo "</select></div>
                </td>
                <td id=\"expandBtn\">
                    <input type=\"button\" class=\"expandBtn\" id=\"expandBtn\" value=\"Expand\"/>
            </td>";

This basically has a dropdown menu and depnding on the value of the select, on expand it will pull up another select box that was a result of a query from a php script and mysql query

 $("#expandBtn").click(function(){
        i++;
        var checkSelect = $("#levelDrop option:selected").val();
        if(checkSelect !== "NULL"){
            var itemSelected = $("#levelDrop option:selected").val();
            alert(itemSelected);
            $.ajax({ url: '****/phpFunctions/actions/getSelectList.php',
            data: {w: itemSelected, x: i},
            type: 'GET',
            success: function(output) {
                  alert(output);
                $("#expandBtn").remove();
                $("#levelsRow").append(output);

              }
        });
        }//end if check select 
        //send the variable to getFeatures list and have it reuturn in the divison and print the value in application. 
    });

the output of the php has the exact same fields and fieldnames. This should be applicable for X amount of select and expands, the only issue is that the button won't work after the second input.

Upvotes: 0

Views: 71

Answers (2)

eL-Prova
eL-Prova

Reputation: 1094

I would suggest to make use of an href. You can call the function in your href.

So for example:

<?php
echo "<a href="javascript:functionToExpand(" . $row["ID"] . ");" class='your_style_class'>Expand</a>";
?>

In your javascript you can do this: (this is within the script tags)

<script type="text/javascript">
function functionToExpand(id_of_row) {
  //Do what you want to do
  //Can be same implementation of $("").click(function() { //this code });
}
</script>

Now you dont need jquery to bind events!

Upvotes: 0

Venkata Krishna
Venkata Krishna

Reputation: 15112

For dynamically generated elements, use event delegation using .on() like below

$(document).on('click', '#expandBtn', function(){

instead of 

$("#expandBtn").click(function(){

Upvotes: 1

Related Questions