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.

Changing an anonymous function into a named function is one thing but why are you trying to remove perfectly good unobtrusive JavaScript and replace it with inline JavaScript? — Nope, Sep 03 '14 at 16:25
In my project there is concept of master page. In master page tag I am calling all js,css files. These js files will be automatically added in all child page of the master page..SO i want to use named jquery function. — game of matrix, Sep 03 '14 at 16:46

Brett Weber · Accepted Answer · 2014-09-03T16:58:27.897

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);
        }

    });
}

edited Sep 03 '14 at 16:58

answered Sep 03 '14 at 16:22

Brett Weber

1,839
18
22

Thanks for quick reply..But this code is not working for me..It is not adding generating AJAX request on change event.. :( – game of matrix Sep 03 '14 at 16:47
I'm afraid that goes beyond the question posted. If the alert box is shown, then the requirements of this question have been filled. If you would like to post another question, possibly in [Code Review](http://codereview.stackexchange.com/), I'm sure you will get a solution. :) – Brett Weber Sep 03 '14 at 16:57
bro i have added alert box just for testing purpose,whether my code is working or not...Sorry for confusion – game of matrix Sep 03 '14 at 16:58
I understand that it is intended for testing. If it shows, you have an answer to the question "How convert anonymous jQuery code to named fuction and call it?". If you need anything outside of that question, please post another question in the appropriate place. I would suggest taking this to [Code Review](http://codereview.stackexchange.com/). That part of stack exchange is set up specifically for questions like "getJSON response is not being populated into a select list". If you have received an adequate solution to your original problem, please mark an answer. Good luck! – Brett Weber Sep 03 '14 at 17:05

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

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",…); } part. But you shouldn't use that anyway.

edited May 23 '17 at 10:33

Community

1
1

answered Sep 03 '14 at 16:23

Bergi

630,263
148
957
1,375

2

But how is this any different than what OP had originally? What is the value of naming the function? (This is less about your answer than it is about OP's goal being confusing.) – Evan Davis Sep 03 '14 at 16:24
Actually, I think the OP does, considering that the change will load in a new set of topics according to the catagory selected in the select element – Brett Weber Sep 03 '14 at 16:24
1

@Mathletics: It's not very different, as he said the code was working initially. He only wanted to put it in an external script as I understood. – Bergi Sep 03 '14 at 16:28

score 0 · Answer 3 · answered Sep 03 '14 at 16:57

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.

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

3 Answers3