How convert anonymous jQuery code to named function and call it?

Question

Although I got through this thread regarding above captioned question,but still I am unable to solve my problem.

MY jQuery Code in seperate JS file [test.js]:-

jQuery(document).ready(function($){

$( "#category" ).change('select',function() 
{
    var category_id="category_id="+$("#category").val();

    $.getJSON("get_topic",category_id, function(topic)
    {
        $('#topic').empty();
        $('#topic').append("<option>--- Select Topic ---</option>");

        for(var t in topic) 
        {
            var option = $('<option />');
            option.attr('value', topic[t].id).text(topic[t].name);
            $('#topic').append(option);
        }

    });
});

});

Now I have added this js file in my PHP page header.

<script src="http://localhost.dev/public/js/test.js"></script>

This code is working fine for me. But I have converted this anonymous code to named function addTopic.

My new code modified [test.js]:-:-

 function addTopics() 
 {
    alert ('hi');
    $( "#category" ).change('select',function() 
    {
        var category_id="category_id="+$("#category").val();

        $.getJSON("get_topic",category_id, function(topic)
        {
            $('#topic').empty();
            $('#topic').append("<option>--- Select Quiz Topic ---</option>");

            for(var t in topic) 
            {
                var option = $('<option />');
                option.attr('value', topic[t].id).text(topic[t].name);
                $('#topic').append(option);
            }

        });
    });
 } 

Now I am calling this method in my PHP page:-

<select id="category" class="form-control" onchange="addTopics()" name="category">

Now new code is not working. Please help me on this issue.

Thanks in advance.

Edit:-

Problem Scope:

I have jQuery anonymous code. This is working fine.But I want to convert that anonymous jQuery code to named jQuery function. So that I can cal that jQuery function,where i need to call it, not automatically.

Answer 1

HTML:

Do not apply an event handler in your html.. It's just bad practice. Instead just use what you need

<select id="category" class="form-control" name="category">

JS:

Apply your event handler in your javascript like this:

$("#category").change('select', addTopics);

and define your function seperately as a named function. The event handler will call it now.

function addTopics() 
 {
    alert('hi');
    var category_id="category_id="+$("#category").val();

    $.getJSON("get_topic",category_id, function(topic)
    {
        $('#topic').empty();
        $('#topic').append("<option>--- Select Quiz Topic ---</option>");

        for(var t in topic) 
        {
            var option = $('<option />');
            option.attr('value', topic[t].id).text(topic[t].name);
            $('#topic').append(option);
        }

    });
} 

Answer 2

No, you don't want to call this onchange of the select element. You want to call it on page load:

<script src="… jQuery …"></script>
<script src="http://localhost.dev/public/js/test.js"></script>
<script type="text/javascript">
    jQuery(document).ready(addTopics);
</script>

If you wanted to put anything in the change listener of that element, it would need to be only the function() { var category_id=…; $.getJSON("get_topic",…); } function() { var category_id=…; $.getJSON("get_topic",…); } function() { var category_id=…; $.getJSON("get_topic",…); } part. But you shouldn't use that anyway .

Answer 3

Thanks all for help...Atlast my problem is solved.

 function addTopics() 
 {
   var category_id="category_id="+$("#category").val();

   $.getJSON("get_topic",category_id, function(topic)
   {
    $('#topic').empty();
    $('#topic').append("<option>--- Select Quiz Topic ---</option>");

    for(var t in topic) 
    {
        var option = $('<option />');
        option.attr('value', topic[t].id).text(topic[t].name);
        $('#topic').append(option);
    }

});
} 

Please guide me if this approach is wrong..waiting for someone's suggestion.

BTW Thanks once again to all.. :)

happy coding.