I am currently developing a kind of Football Website.
I have 2 external files included on my main file. One for the ajax post data (ajax.php), and another with a form (form.php).
PS: All the scripts are on main file (main.php)
On my main file i use <?php include 'form.php'; ?> to call the form page.
On that form.php file i have a Dropdown Menu with all the countries retrieved from database.
In main.php (where all the scripts are) i use jQuery to get the countryID that user clicked, then i post it to my ajax file so it can return all the teams from a specific country.
Ajax file return:
<li><a href='#' rel='$row->id' class='res1' id='$row->name' name='res1'> $row->name </a></li>
And then i append it to another Dropdown menu on form.php.
The problem is when i try to know which team user clicked (to show image team at bottom) it does not recognize it. I already tried $(document).ready(function(){ ... } but it still does not work.
I use this code to get the click:
$(".res1").click(function(ev){
var rel = $(this).prop('rel');
var name = $(this).prop('id');
$.ajax(
{
type: "POST",
url: "ajax.php",
data: {
subid: rel,
postName: 'res1'
},
success: function (result) {
$('#imageE1').empty();
$('#imageE1').append('<h1>IMAGE</h1>');
}
});
ev.preventDefault();
});
I think the problem is that all the script are on my main.php file, and it can't reach the form.php dropdown when ajax.php returns the list. But when i move the scripts to form.php file they simply stop working.
