How to use jquery callback functions in if statement?

Question

I have a function whinch performs something and it works great. Now i want to add a bootstrap modal and execute the same code when modal closes. But my problem is that i have to check for user status. Is there a way how to execute this code and not to copy everything twice?

if(USERTYPE == 0) {
  $("#fastRegisterModal").modal('show');
  $("#fastRegisterModal").on('hidden', function() {
    //Code for registration and upload code
  }
} else {
  //upload code
}

I want to include this into multiple jquery function (mostly .live functions) and i don't want to move "upload code" into normal js function (I got the .js file writen as it is and i don't want to change 70% of the file)

Is this even possible in this or any other way?

EDITED

Here is some more code:

$('.someAction').live('click', function(event) {
// Init section
var data1 = $(".getData1").val();
var data2 = $(".getData2").val();

// I want to add this modal check before exsisting code

if(USERTYPE == 0) {
    $("#fastRegisterModal").modal('show').on('hidden', function() {
        var email = $(".getModalEmail").val();
        var pass = $(".getModalPass").val();

        $.ajax({
            url: "actions/fastRegister",
            type: 'POST',
            data: {email: email, pass: pass}, 
            success: function(data) {
                if (data.success == 1) {
                    // continue with existing block of code
                }
            }
        });
    });
}

// Existing block of code

$.ajax({
    url: "actions/someAction",
    type: 'POST',
    data: {data1: data1, data2: data2}, 
    success: function(data) {
        if (data != '') {
            // show success
        }
    }
});
});

I hope this explaings my situation bether :)

Can you show more code. It doesn't make sense why you don't want to use a "normal" js function. — Popnoodles, Mar 08 '13 at 12:22
For me, create a function is the only way to call the same code in multiple function... Maybe you prefer to create a new jQuery method? Like http://stackoverflow.com/questions/4709822/add-jquery-function-to-specific-elements — JoDev, Mar 08 '13 at 12:26
@popnoodles, the up&down votes here are weird. Maybe I'm missing something here though. — gdoron, Mar 08 '13 at 12:30
I have added some more code. I hope it explains my situation better. — BoonZ, Mar 08 '13 at 13:19
You haven't explained why you see the refactoring into a function to be a problem. — djna, Mar 08 '13 at 13:36

djna · Accepted Answer · 2013-03-08T13:35:15.103

Create the function.

How much more work is it than two lines of code and a cut and paste?

Resisting refactoring tends to lead to long term pain.

Doesn't something like this work? How much effort is it to get there from what you have?

var doSomeAction = function () {
    $.ajax({
          url: "actions/someAction",
          type: 'POST',
          data: {data1: data1, data2: data2}, 
          success: function(data) {
              if (data != '') {
                // show success
              }
          }
     });

 };

 if(USERTYPE == 0) {
    $("#fastRegisterModal").modal('show').on('hidden', function() {
       var email = $(".getModalEmail").val();
       var pass = $(".getModalPass").val();

       $.ajax({
          url: "actions/fastRegister",
          type: 'POST',
          data: {email: email, pass: pass}, 
         success: function(data) {
            if (data.success == 1) {
                doSomeAction();
            }
          }
      });
    });
} else {
   doSomeAction();
}

Popnoodles · Answer 2 · 2013-03-08T12:41:17.117

So let's assume there's a good reason that you don't want to write a "normal" js function.

You could extend jQuery.

$.fn.extend({
    doSomething: function(){
        // do something with $(this)
    }
});

and then

if(USERTYPE == 0) {
  $("#fastRegisterModal").modal('show').on('hidden', function() {
    $(this).doSomething();
  }
} else {
  $("#fastRegisterModal").doSomething();
}

Or you can create a custom bind and trigger it.

$("#fastRegisterModal").on('doSomething', function(){
     // do something with $(this)
});

if(USERTYPE == 0) {
  $("#fastRegisterModal").modal('show').on('hidden', function() {
    $(this).trigger('doSomething');
  }
} else {
  $("#fastRegisterModal").trigger('doSomething');
}

The comments in your code show two different things want to happen

if(USERTYPE == 0) {
  $("#fastRegisterModal").modal('show');
  $("#fastRegisterModal").on('hidden', function() {
    //Code for registration and upload code
    $(this).trigger('doRegistration').trigger('doUpload');
    // or $(this).doRegistration().doUpload();
  }
} else {
    //upload code
    $(this).trigger('doUpload');
    // or $(this).doUpload();
}

But he's still creating a function and moving his code into it? — djna, Mar 08 '13 at 12:42
With the small amount of code given this MAY be appropriate. Avoiding copy-paste which is paramount, these two options are the only alternatives (that I know of) to creating a "normal" js function. — Popnoodles, Mar 08 '13 at 12:44

How to use jquery callback functions in if statement?

EDITED

2 Answers2