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
