How do run javascript after loading PartialView in ASP.NET MVC?

Question

I'm trying to get jQuery plug-in meioMask to work in a MVC Partial View.

As a trial, the following works:

<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.meio.mask.min.js" charset="utf-8"></script>
<script type="text/javascript">
    jQuery(function($) {
        $('#StartTimeText').setMask('time');
});
</script>
</head>

<body>
<input type="text" id="StartTimeText" />
</body>

The text edit box gets a mask edit applied. However, my text edit box is in a MVC partial view that gets shown when user clicks on an item in the main view. In the main view's <head> I added the following:

<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.meio.mask.min.js")" type="text/javascript"></script>

In CustomFormPartialView.cshtml, I have the following:

<script type="text/javascript">
    jQuery.ajax(
      function ($) {
        $('#StartTimeText').setMask('time');
      }
    );
</script>

<input type="text" id="StartTimeText" />

But the text box remains a regular text box with no edit mask applied. I assume this is because the setMask function isn't getting run. I've tried using jQuery.get and jQuery.post as well, none of them made any difference.

Sorry if this has already been asked, I've tried other solutions without any luck. I'm a bit new in this area, so if someone can post as complete code example as possible it'll be greatly appreciated. Thanks.

EDIT:

Following JasCav's suggestion, I've put the following in the <head> section of the file. As far as I can tell, the ajax function isn't getting run at all. This is using DevExpress's MVC Scheduler if that's any help. I'm not getting any errors in FireBug.

<script type="text/javascript">
  jQuery.ajax({
    url: '/WebTMS_MVC/Calendar/SchedulerPartial',
    type: 'POST',
    success: function (data, textStatus, xhr) {
      $('#StartTimeText').setMask('time');
    }
  });
</script>

JasCav · Accepted Answer · 2012-12-06 05:04:06Z

1

You can use jQuery's ajax function provides a number of callbacks that you can use to perform specific actions after completion of the ajax call (success and complete are two). See more at jQuery's documentation for the ajax function.

$.ajax({
  url: yourUrl,
  type: "GET",
  data: formData,
  success: function(data) {
    // Do your stuff here.
});

answered Dec 6, 2012 at 5:04

JasCav

34.7k21 gold badges117 silver badges175 bronze badges

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

1 Comment

Robo Over a year ago

Thanks, still not working unfortunately. I've edited my original question to post the changes I made.

Collectives™ on Stack Overflow

How do run javascript after loading PartialView in ASP.NET MVC?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related