write one jquery function to replace repeatedly code in asp.net mvc view

Question

I have this block of code in my view in many places repeatedly:

$.get('@Url.Action("ActionOne", "Home")',
    { masterContractItemId: masterContractItemId },
    function(result) {
       $('#addSubContractItemModal .modal-body').html(result);                                       
       $('#addSubContractItemModal').modal('show');
    }).done(function() {
       $("#addSubContractItemModal .datepicker").datepicker();
       $('#addSubContractItemModal .chzn-select').chosen({ search_contains: true, width: '70px' });                                                
       createBootstrapSuccessMessage("Some text here", "#addSubContractItemModal #message");
});

And this:

$.get('@Url.Action("ActionTwo", "Home")',
        { contractItemId: contractItemId },
        function(result) {
           $('#addContractItemModal .modal-body').html(result);                                       
           $('#addContractItemModal').modal('show');
        }).done(function() {
           $("#addContractItemModal .datepicker").datepicker();
           $('#addContractItemModal .chzn-select').chosen({ search_contains: true, width: '70px' });                                                
           createBootstrapSuccessMessage("Some another text here", "#addContractItemModal #message");
    });

What I want to do is to write one function in which I will pass actionName, parameterName, parameterValue, modalName and messsageText to invoke this function insted of these lines of codes.

Can you please help to do this?

ADD: I wrote the following method:

function RenderModalWindow(actionName, parameterName, parameterValue, modalId, messageText) {
        var url = '/Area/Home/' + actionName + '?' + parameterName + '=' + parameterValue;
        $.get(url,           
             function(result) {
                 $(modalId + ' .modal-body').html(result);
                 $(modalId).modal('show');
             }).done(function() {
                 $(modalId + " .datepicker").datepicker();
                 $(modalId + ' .chzn-select').chosen({ search_contains: true, width: '70px' });
                 createBootstrapSuccessMessage(messageText, modalId + " #message");
             });
    }

Then I invoke it in the script:

RenderModalWindow("AddCategoryForContractItem", "masterContractItemId", masterContractItemId, "#addSubContractItemModal", "Text message here!");

But got an error: localhost/Area/Home/AddCategoryForContractItem?masterContractItemId=19669 404 (Not Found)

However I have target method in the controller:

public ActionResult AddCategoryForContractItem(int masterContractItemId)

I'm voting to close this question as off-topic because Asking to write a code for some purpose is off topic to SO. put some effort on it. Do share the code. No one will blame you even if it is a very worst code. But your effort is very important — Sagar V
– Sagar V, Commented Jun 14, 2017 at 7:07

Jeremy Thille · Accepted Answer · 2017-06-14 07:08:31Z

1

I would do it this way (untested code) :

const func1 = result => {
  $('#addContractItemModal .modal-body').html(result);                     
  $('#addContractItemModal').modal('show');
}

const func2 = text => {
  $("#addSubContractItemModal .datepicker").datepicker();
  $('#addSubContractItemModal .chzn-select').chosen({ search_contains: true, width: '70px' });     
    createBootstrapSuccessMessage(text, "#addSubContractItemModal #message");
}

$.get('@Url.Action("ActionOne", "Home")',
    { masterContractItemId: masterContractItemId },
     func1)
	.done(function() { func2("Some text here") });

$.get('@Url.Action("ActionTwo", "Home")',
        { contractItemId: contractItemId },
        func1)
	.done(function() { func2("Some other text here") });

answered Jun 14, 2017 at 7:08

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

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

Comments

Basanta Matia · Accepted Answer · 2017-06-14 07:29:55Z

How about like this,

Bellow codes will be inside script.

var actionName = "";
var controllerName = "";
var parametersValue = "";
var messsageText = "";
var modalPopUp = "";
if(foo) //check here which one you want to load
{
 actionName = "myAction";
 controllerName = "myController";
 parametersValue = "myParameters";
 messsageText = "myMessage";
 modalPopUp = "myModalPopUp";     
myMethod(actionName,controllerName,parametersValue,messsageText,modalPopUp);
}
else
{
 actionName = "myAction";
 controllerName = "myController";
 parametersValue = "myParameters";
 messsageText = "myMessage";
 modalPopU  = "myModalPopUp";
myMethod(actionName,controllerName,parametersValue,messsageText,modalPopUp);
}

function myMethod(actionName,controllerName,parametersValue,messsageText,modalPopUp)
{
 $.get('@Url.Action(actionName, controllerName)',
      { 
        Id: parametersValue }, //See Here I changed the parameter name to Id
        function(result) {
        $('#addSubContractItemModal .modal-body').html(result);                                       
        $('#addSubContractItemModal').modal('show');
      }).done(function() {
        $("#addSubContractItemModal .datepicker").datepicker();
        $('#addSubContractItemModal .chzn-select').chosen({ search_contains: 
        true, width: '70px' });                                                
  createBootstrapSuccessMessage(messsageText, "'#' + modalPopUp                                  
                                #message");
      });
}

You just need to define a function only once and call it accordingly.

Hope it helps :)

Collectives™ on Stack Overflow

write one jquery function to replace repeatedly code in asp.net mvc view

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related