Question

I have this small tabbed system developed in PHP/JavaScript.

For form submissioni, I bind a JQuery function to the ‘submit’ event that sends an Ajax query to the server, avoiding to reload the page (and losing other tabs). I have coded one function for every form, but realized that they are the same (take the inputs, send the Ajax query, show the returning message) so I decided to make a general jquery function with arguments that define each form).

I have this function:

function submit_search(entity){
        $('#'+entity.name+'_searchform').submit(function(){
            var url = public_path+entity.name+'/search';
            var key = $('#'+entity.name+'_search_key').val();

            $.ajax({
                type: 'POST',
                url: url,
                data: {search_key: key},
                success: entity.submit_search(result)
            }); 

            return false;
    });
}

Where entity is a JS object with the name of the entity and the success function I want to execute. This function is written in a script that loads once when the main page is loaded. And when the tab is loaded, I simply call submit_search() with the actual entity.

This seems logical to me. But it doesn’t work. And the problem is that jquery doesn’t recognize the elements, by example, after var key = $('#'+entity.name+'_search_key').val();, key is null.

What am I doing wrong?

Answer 1

Your success function will be executed before request

  $.ajax({
            type: 'POST',
            url: url,
            data: {search_key: key},
            success: *entity.submit_search(result)*
        })

I suppose submit_search doesn’t return a pointer to a function so
you need to pass the pointer to submit_search

  $.ajax({
            type: 'POST',
            url: url,
            data: {search_key: key},
            success: *entity.submit_search*
        })

And about reconginzing the elements – be sure that you wrote correct selector. Try to hardcode expected experssion in browser’s debug/watch tool and check if it’s ok, like

$('#EntityNameValue_search_key').length > 0