Question

So, I’m dabbling in some jQuery today, and I come across an issue. I have a page that has a number of links in the following format:

<a class="a_link" id="a_id<#>" href="#">Click me</a>

Where <#> is a number generated in a for loop in the PHP that runs the page. At the top of the page, I have a script tag linking to the Google CDN for jQuery 1.7.2 minimized, and a div with id of “form_map”. After all the links have been displayed, I have the following script:

<script type="text/css">
    $(document).ready(function(){
        $('.a_link').click(function(){
            var c_id = $(this).attr('id');
            var task = 'read';
            var ajax_url = 'engine.php';
            alert('link pressed for id: '+c_id);
            $.get({
                url: ajax_url, 
                data: { 'task':task, 'c_id':c_id }, 
                success: function(res){ $('#form_map').val(res); } 
            });
        });
    });
</script>

Disregarding all that wonky Ajax calls (which also do not seem to work correctly), when I click a link nothing happens. It doesn’t even run the script. I tested this by setting a breakpoint and adding the alert. Nothing seems to even trigger this.

Any suggestions on what I am doing wrong?

Answer 1

use:

<script type="text/javascript">

instead of:

<script type="text/css">

also use:

$('#form_map').html(res);

instead of

$('#form_map').val(res);