How do i convert this jQuery code into jQuery function?

Question

I have some jQuery codes, which is repeated again and again, i would like to reduce the code i am writing that is by converting it into functions. here is the codes i am using.

$('form#save-user button[name="save-user"]').click(function() {
    var formData = 'option=saveuser&'+$('form#save-user').serialize();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: formData,
        success: function(msg){
            if(msg === 'empty') {
                alert('Required Values Missing');
            } else if(msg === 'duplicateEmail'){
                alert('Email already exist');
            } else {
                window.location = "index.php?users&option=edit&user_id="+msg+'&msg=success';
            }
        }
    });
});

$('form#save-user button[name="save-user-close"]').click(function() {
    var formData = 'option=saveuser&'+$('form#save-user').serialize();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: formData,
        success: function(msg){
            if(msg === 'empty') {
                alert('Required Values Missing');
            } else if(msg === 'duplicateEmail'){
                alert('Email already exist');
            } else {
                window.location = 'index.php?users';
            }
        }
    });
});

$('form#save-user button[name="save-user-new"]').click(function() {
    var formData = 'option=saveuser&'+$('form#save-user').serialize();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: formData,
        success: function(msg){
            if(msg === 'empty') {
                alert('Required Values Missing');
            } else if(msg === 'duplicateEmail'){
                alert('Email already exist');
            } else {
                window.location = 'index.php?users&option=create';
            }
        }
    });
});

I would like to know few things,

a) With reference to above code, how do i convert it to function, as the code have very few changes like, selector name and url of window.location.

b) what do i call the code below, is it the function? function on the go? or dynamic function?

$('selector').event(function(){
     //jQuery Code in wake of event being triggered.
});

Matt · Accepted Answer · 2011-07-29 13:08:04Z

5

I would write a small plugin for it:

(function ($) {

jQuery.fn.myClick = function (destination) {
    this.click(function () { 
        var formData = 'option=saveuser&'+$('form#save-user').serialize();
        $.ajax({
            type: 'POST',
            url:  'process.php',
            data: formData,
            success: function(msg){
                if(msg === 'empty') {
                    alert('Required Values Missing');
                } else if(msg === 'duplicateEmail'){
                    alert('Email already exist');
                } else {
                    window.location = destination(msg);
                }
            }
        });
    });
}

}(jQuery));

Then to call it you would simply do:

$('form#save-user button[name="save-user-close"]').myClick(function() {
    return 'index.php?users&option=create';
});

and

$('form#save-user button[name="save-user"]').myClick(function (msg) {
    return "index.php?users&option=edit&user_id="+msg+'&msg=success';
});

You should be able to see where we're going here; we're adding parameters to the small method we've created, where you can specify what changes between each call.

Because in this instance, the window.location depends on the AJAX response (and we don't know the response when we invoke the function!), we can't simply provide a string (or something similar) as the parameter. Instead, we pass a function which we invoke once the AJAX response is received, provided the msg as a variable; and rely on the function to provide a string which we set to the window.location.

As for your second question, you pass an event handler to the jQuery event methods; an event handler will be a function reference (usually a reference to an anonymous function)

edited Jul 29, 2011 at 13:08

answered Jul 29, 2011 at 13:01

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

abhijit Over a year ago

i was about to post my answer but i saw this cool answer..thanks for sharing..+1

Ibrahim Azhar Armar Over a year ago

yeah, i was looking for this kind of answer, i am willing to make a plugin out of the code.

Mrchief · Accepted Answer · 2011-07-29 13:07:09Z

4

a) I would start by taking the changing fields as params:

function doPost(redirectUrl) {
    var formData = 'option=saveuser&'+$('form#save-user').serialize();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: formData,
        success: function(msg){
            if(msg === 'empty') {
                alert('Required Values Missing');
            } else if(msg === 'duplicateEmail'){
                alert('Email already exist');
            } else {
                window.location = redirectUrl.indexOf("{0}") >= 0 ? redirectUrl.replace("{0}", msg) : redirectUrl;
            }
        }
    });
}

$('form#save-user button[name="save-user"]').click(function() {
    doPost("index.php?users&option=edit&user_id={0}&msg=success");
});

$('form#save-user button[name="save-user-close"]').click(function() {
    doPost("index.php?users");    
});

b) I would call it an anonymous eventhandler (function).

edited Jul 29, 2011 at 13:07

answered Jul 29, 2011 at 13:00

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

3 Comments

Ibrahim Azhar Armar Over a year ago

this doesn't seems like jQuery function instead to me it looks like native javascript function, i know this will work, but is it considered a good practice to go this way?

grodzi Over a year ago

You may as well bind the button : doBind(buttonName) which bind the button onclick to doPost.

Mrchief Over a year ago

Sorry, didn't realize you wanted a plugin out of this. I would have changed my answer but then @Matt's already has posted it :).

Sparkup · Accepted Answer · 2011-07-29 13:04:35Z

1

This should do it for you :

JQuery :

function saveuser(formData) {
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: formData,
        success: function(msg){
            if(msg === 'empty') {
                alert('Required Values Missing');
            } else if(msg === 'duplicateEmail'){
                alert('Email already exist');
            } else {
                window.location = "index.php?users&option=...';
            }
        }
    });
}

HTML :

<element onClick="saveuser('the-form-data')"></element>

answered Jul 29, 2011 at 13:04

Sparkup

3,7522 gold badges38 silver badges50 bronze badges

2 Comments

Ibrahim Azhar Armar Over a year ago

i do not want to add onClick() event in my html element field, instead i would like to go with jQuery plugin kind of thing :)

Sparkup Over a year ago

Was reading Matt's solution, seems like a much better solution, with or without the onClick() issu.

Collectives™ on Stack Overflow

How do i convert this jQuery code into jQuery function?

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related