Using jQuery to load a PHP Page in a div

Question

I have this script:

<script type='text/javascript' src='js/jquery-1.4.4.mi.js'></script>
<script type='text/javascript'>
 $('.filterMonth').change(function(){ 
alert('ijijiji');
$.ajax({ 
url: 'ajax/filterMandays.php', 
//type: 'GET', 
success: function(data){ 
  //data is returned back 
  $('#mandayTable').html(data); 
} 
}); 

}); 
</script>

and this html:

<select name ="filterMonth">
        <?php
        $array_month = array("January","February","March","April","May","June","July","August","September","October","November","December");

        foreach($array_month as $key => $month)
        {
            $value_month = $key+1;
        echo "<option value = '$value_month'>$month</option>";
        }

        ?>
        </select>
        -
        <select name = "filterYear" onChange = "filter(filterMonth.value, filterYear.value)">
        <?php
        $curYear = date('Y');
        for($i = 1990; $i<=$curYear+10; $i++)
        {
        if($i == $curYear)
        {
        echo "<option value = '$i' selected = 'selected'>$i</option>";
        }
        else
        {
        echo "<option value = '$i'>$i</option>";
        }
        }
        ?>
        </select>
        </td>
        </tr>
        </br>
        </br>
        <tr>
        <div id="mandayTable"></div>

and this php page:

<?php
include("all.php");


        $q = "SELECT md.mandays_id,md.employeenum,md.month,md.year,md.required_man_days,d.firstname,d.lastname 
        FROM tbl_mandays md,tbl_employee_details d 
        WHERE md.active = '1' 
        AND md.employeenum = d.employeenum 
        AND md.month = '10';";



        $res = $db->Execute($q);

        echo "<table border = 1>";

        echo "<tr><th>Employee Number</th><th>First Name</th><th>Last Name</th><th>Month-Year</th><th>Required Man Days</th><th>Edit/Delete</th></tr>";

        while($rows = $res->FetchRow()) 
        //for($i=0;$i<5;$i++)
        {
                        //iterating through // check if employee 
                        // // if(isset($row[])) {           }
                        $mandays_id = $rows[0];

                        $empnum = $rows[1];

                        $month_year = $rows[2] ."-" .$rows[3];

                        $required_man_days = $rows[4];

                        $firstname = $rows['month'];

                        $lastname = $rows[6];




                        //echo approvers here are not taken
                        //<a href=\"view_team.php?id=".$empnum."\" -> for someone to view the people beneath them (like org tree)
                        echo "<tr><td>".$empnum  . "</td><td>".$firstname ."</td><td>".$lastname ."</td><td>" . $month_year ."</td><td>" .$required_man_days  . "</td><td width = \"200\" align = \"center\"><a href = 'edit_mandays.php?mandays_id=$mandays_id');'>Edit/Delete</a></td></tr>";
        }



        echo "</table>";


        ?>

the script should basically load the php page in the div in the html once the "filterMonth" has been changed. but it doesn't work.

what seems to be the problem? :(

Are you sure that you are hitting the page? What happens when you visit the ajax page directly in your browser? Is the table printed properly? — Explosion Pills
– Explosion Pills, Commented Feb 23, 2012 at 7:16
Please define "doesn't work". The PHP is not running at all? The db query gives no result? Is there a Javascript error on the console? etc. — kapa
– kapa, Commented Feb 23, 2012 at 7:24
Is jQuery properly included? js/jquery-1.4.4.mi.js should possibly be js/jquery-1.4.4.min.js. — kapa
– kapa, Commented Feb 23, 2012 at 8:12

steveukx · Accepted Answer · 2012-02-23 08:10:41Z

4

The selector in your jQuery is $('.filterMonth') but your select box doesn't have the filterMonth class. You need to change it to $('select[name=filterMonth]').

In order for the jQuery selector to contain your select, you need to make sure that it runs after the Select element is in the DOM (ie: lower down the HTML), or run your JavaScript once the document has finished loading, for example:

<script type='text/javascript' src='js/jquery-1.4.4.mi.js'></script>
<script type='text/javascript'>
  jQuery(function() {
    // do your DOM selections here, this function only runs once the document is loaded
  });
</script>

edited Feb 23, 2012 at 8:10

answered Feb 23, 2012 at 7:43

steveukx

4,34321 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

prukuhkoo Over a year ago

i tried to change it but it still doesn't execute the jquery. the alert doesn't even appear. :(

steveukx Over a year ago

Are you running the script at the end of the page so that the select has definitely been added to the DOM before you attach the handlers to it?

prukuhkoo Over a year ago

The script tag is placed before the html tags where they are called.

steveukx Over a year ago

I've updated the answer so you can see how to make your scripts run once the document is loaded... if you have the script earlier in the DOM than the elements you are attempting to select, they won't yet be there so when jQuery queries the DOM it won't find any matching elements to bind your handlers to.

Collectives™ on Stack Overflow

Using jQuery to load a PHP Page in a div

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related