CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Gregor Stopar
Gregor Stopar

Reputation: 181

JavaScript/JQuery not working in html loaded with load()

What I'm trying to do is, load an input form from another file (lets say that's new_machine.php) to my index.php. In this form I have an input with dropdown which gets options from MySQL database and lists them as anchors. And that works fine. I then want to control user's input with jQuery's .click() method, so when certain anchor is clicked I would be able to get it's text and set it to the value of dropdown button. However that doesn't happen since it seems that jQuery's actions are not triggered. So my question is how do I use jQuery in a partial .html/.php that I load in my index.php. My files look like this:

new_machine.php - the form - I know there is no input for dropdown, I just want to get the text shown in button so I know jQuery works.

<div class="tab-content">

... some text inputs

<label>
    Purchase date<span class="req">*</span>
</label>
<input type="date" required=""  />


<label>
    Machine<span class="req">*</span>
</label>

    <div class="dropdown">
        <button id="chosenGroup" class="dropbtn">Choose machine</button>
        <div class="dropdown-content" id="machineList" >
            <?php
                session_start();
                try {
                    $bdd = new PDO('mysql:host=******:****; dbname=track', '*****', '*****');
                } catch(Exception $e) {
                    exit('Unable to connect to db.');
                }

                $sql = "SELECT * FROM machinegroup WHERE UserID=:uid";
                $q = $bdd->prepare($sql);
                $q->bindParam(':uid', $_SESSION['valid_user']);
                $q->execute();
                while ($row = $q->fetch(PDO::FETCH_ASSOC))
                {
                    echo "<a href=\"#\" class=\"machineGroupClick\">". $row['Name'] ."</a>";
                }   
            ?>
        </div>
    </div>


<script>    
$(document).ready(function(){
    $('.machineGroupClick').click(function(){
        var name = $(this).html();
        $( '#machine-content' ).text('lalal');
        $('#chosenGroup').html(name);
    });
}); 
</script>           


</div>

index.php

<head>
...
<script src="https://code.jquery.com/jquery.js"></script>
<script src="machines/js/data.js"></script>
...
</head>

<body>
...
<a href="#" id="new-machine">...</a> 

...

<div id="machine-content" class="col-md-9" style="float:right">

...

</body>

data.js (this is jQuery script that handles click and other events in my index.php)

$('#new-machine').click(function(){ 
    $( '#machine-content' ).load('new_machine.php');
});

I did also try to put jQuery code from new_machine.php in index.php and in data.js but it never worked. So my question is what is the correct way to use jQuery when loading partial html/php? Am I missing something crucial? Dropdown works fine if the code is all index.php and is not loaded, but I want it to load inside page when user clicks "New machine". Cheers

Upvotes: 1

Views: 282

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

data.js should look like this:

$(document).ready(function(){
    $('#machine-content').on('click','.machineGroupClick',function(){//use event delegation here because your html is in the partial and it is loaded after the dom ready
        var name = $(this).html();
        $( '#machine-content' ).text('lalal');
        $('#chosenGroup').html(name);
    });
    $('#new-machine').click(function(){ 
    $( '#machine-content' ).load('new_machine.php');
    }); 
});

Upvotes: 3

Related Questions