ajax function not opening a page

Question

i don't understand why ajax is not working. my code:

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    function edit_row(id)
    {
        $.ajax({
            method:'get',
            url:'form.php',
            success:function(data)
            {
              $('#form_div').html(data);
            }
        });

    }

<?php
   echo '<td style='.$style.'>'.$status.'<a href="" title="Edit"  onClick=edit_row('.$data['type_id'].')><img src="images/pencil.png" width="30px" height="30px"></a></td></tr>';
?>

its not opening form.php onclick what is the problem please help me!!!

Answer 1

You click the link. The JavaScript runs. The link is followed. A new page (with the same URL because you have href="" ) loads. The JavaScript stops because its environment has gone away.

Use a button instead.

Answer 2

you have to put

href="javascript:void(0)"

instead of

href=""

else it will reload the page without calling the ajax

Answer 3

You are not passing the 'id' to you form.php I guess you need to pass it:

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    function edit_row(id)
    {
        $.ajax({
            method:'get',
            url:'form.php',
            data: {id: id },
            success:function(data)
            {
              $('#form_div').html(data);
            }
        });

    }
</script>

Answer 4

I would do something like this (does not use onClick attribute):

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(function() {
        $('a.edit').click(function(e) {    // or: $.on('click', 'a.edit', function(e) {
            e.preventDefault();
            var id = $(this).attr('id');
            $.ajax({
                method:'get',
                url: 'form.php',
                data: {id:id},
                success: function(data) {
                    $('#form_div').html(data);
                }
        });
    });
</script>

<?php
    echo '<td style="$style">$status
          <a href="#" id="' . $data['type_id'] . '"  title="Edit" class="edit">
          <img src="images/pencil.png" width="30px" height="30px">
          </a></td></tr>';
?>