Calling a jquery function within a view B from a view A

Question

I have a view in my asp.net mvc4 web app from which user can configure some things related to it. When user click on a button in this view, let's say, configure view, I want to call a jquery function in another view, let's say, main view. This jquery function is in charge of modifying an element in the main view.

In the configure view where button is, I have below code, some input textboxes and the button (this calls to action AddItem in Configure controller):

   @using (Html.BeginForm("AddItem", "Configure", FormMethod.Post))
   {   
        @Html.DropDownListFor(m => m.CustomViewModel.SelectedItemId, Model.CustomViewModel.ListItems)
        @Html.TextBox(...)
        <input id="submitAdd" type="submit" value="@Resource.ButtonTitleAdd" />
   }

So how to do call a jquery function in main view from the above code when user clicks on the button on configure view?

Also I need to pass to this jquery function the value select in the dropdown list of configure view. For example, if dropdown list contains:

"something1" "something2" "something3"

I need to pass the value of the item selected in the dropdownlist. For example, if user selects "something1" and its value is 1, 1 should be passed to this jquery function. This dropdown list is populated with a model.

score 3 · Accepted Answer · answered Oct 02 '13 at 09:30

3

I would have solved it with a custom event, which you can trigger and listen to from where ever you like.

Trigger it like this:

$.event.trigger('customStuff', [arg1, arg2, argN]);

And "listen" for it like this:

$(document).on('customStuff', function (e, arg1, arg2) { });

answered Oct 02 '13 at 09:30

Johan

35,120
54
178
293

Ok, so in my main view I listen for this event, and from configure view where button is, I trigger it. But how to trigger this event on button click in my code posted? where do i have to put that line? sorry i am new on it... – user304602 Oct 02 '13 at 09:49
@user304602 Sorry, was afk for a while. Did you manage to figure it out? – Johan Oct 02 '13 at 11:19
I think you can listen the submit event (add a name to your form like this: `Html.BeginForm("AddItem", "Configure", FormMethod.Post, htmlAttributes: new {@name="somename"})` and use it like this: `$('form[name="somename"]').submit(function() { _trigger event_ })`, getting the datas like in this post for example : http://stackoverflow.com/questions/2276463/get-form-data-with-javascript-jquery – Eli Oct 02 '13 at 12:21
and what is the difference between this last solution and the first you commented?which one is more correct? – user304602 Oct 02 '13 at 13:33
@user304602 I have only posted one solution. I would say that this is more generic than simply listening for the submit event. This can be added anywhere. – Johan Oct 02 '13 at 13:48

score 1 · Answer 2 · answered Oct 02 '13 at 09:19

As you are using jQuery. I think something like pubsub is your best bet & it encourages event based loose coupling. For example:

(function($) {

  var o = $({});

  $.subscribe = function() {
    o.on.apply(o, arguments);
  };

  $.unsubscribe = function() {
    o.off.apply(o, arguments);
  };

  $.publish = function() {
    o.trigger.apply(o, arguments);
  };

}(jQuery));

Now you can use this code as following:

// You can pass your custom data here
$.subscribe("firefunction", function(e, a, b, c) {
  console.log(a + b + c);
});

$.publish("firefunction", [ "a", "b", "c" ]);
// logs: abc

// Unsubscribe all handlers for this topic
$.unsubscribe("firefunction");

Calling a jquery function within a view B from a view A

2 Answers2