Button click pass argument to callback

Question

I have this code , very simple , not working :

$(function() {
    $(document).on('click', '#NetworkSearch', NetworkMarketSearching("NETWORK"));
    $(document).on('click', '#MarketSearch', NetworkMarketSearching("MARKET"));
    $(document).on('click', '#CableSearch', NetworkMarketSearching("CABLE"));
});

you can see - I am very simply using .on() to make NetworkMarketSearching() fire from a click, here is the function. This function works just fine on its own if called from the console.

function NetworkMarketSearching(types) {
    var name, searchType;
    if (types == 'NETWORK') { name = $('#NetworkName').val(); searchType = 0; }
    else if (types == 'MARKET') { name = $('#MarketName').val(); searchType = 1; }
    else if (types == 'CABLE') {name = $('#CableName').val();searchType = 2;}
    $.ajax({
        type: 'POST',
        url: '/Talent_/Common/NetworkMarketSearch',
        dataType: 'json',
        data: { 'name': name, 'searchType': searchType },
        success: function(data) {
        }
    });
}

The error is 'undefined is not a function' it repeatedly happens when putting NetworkMarketSearching('NETWORK') in the line of .on('click', ...

Answer 1

try this:

$(function() {
    $(document).on('click', '#NetworkSearch', function() { NetworkMarketSearching("NETWORK"); });
    $(document).on('click', '#MarketSearch', function() { NetworkMarketSearching("MARKET"); });
    $(document).on('click', '#CableSearch', function() { NetworkMarketSearching("CABLE"); });
});

The click method doessnt support the string parameter, it expects the event object parameter.

Answer 2

This NetworkMarketSearching("NETWORK") calls the function immediately and attempts to assign its return result (which is undefined) as the callback.

You can use the data argument to pass information to your function calls:

$(function() {
    $(document).on('click', '#NetworkSearch', { types: 'NETWORK' }, NetworkMarketSearching);
    $(document).on('click', '#MarketSearch', { types: 'MARKET' }, NetworkMarketSearching);
    $(document).on('click', '#CableSearch', { types: 'CABLE' }, NetworkMarketSearching);
});

Then the function definition would be:

function NetworkMarketSearching(event) {

and, within the function, the types would be referenced as

event.data.types

This is the way the jQuery docs specify passing arguments to the callback, but it can be done also with an inline anonymous function. That is to say, like this:

$(function() {
    $(document).on('click', '#NetworkSearch', function () {
        NetworkMarketSearching('NETWORK');
    });
    $(document).on('click', '#MarketSearch', function () {
        NetworkMarketSearching('MARKET');
    });
    $(document).on('click', '#CableSearch', function () {
        NetworkMarketSearching('CABLE');
    });
});

Answer 3

Are you sure the function exists at the moment you call it?

Try go simple, use this sample of jquery site ( http://api.jquery.com/on/ ):

function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

then you pass a parameter, if it works you move to your code.