trigger jquery from ajax loaded partial view in mvc3

Question

I am loading a partial view into a main view using ajax but struggling to get the jquery to fire within the partial view.

Basically I am trying to allow a partial view to load that contains a button that allows me to open up a dialog window.

My partial view contains this small piece of js

    <script type="text/javascript">
    $(document).ready(function () {
        alert('ready');
        $('#edit-note').click(function () {
            //$('#dialog').dialog('open');
            alert("alert displayed from jquery");
        });
    }); 

</script>

However it is never fired.

What do I need to do to enable jquery to work from a dynamically loaded partial view?

Where is the piece of code that you've shown us located? Is it in the main view, or in the partial view? — Joseph Silber
– Joseph Silber, Commented Aug 28, 2011 at 20:05

Joseph Silber · Accepted Answer · 2011-08-28 20:01:50Z

4

Your code that starts with $('#edit-note').click(function () {, is run when the document is ready. At that point in time, you have not yet loaded your partial view, so $('#edit-note') is an empty collection.

jQuery allows you to bind events to elements that are not yet on the page, via its live method:

$('#edit-note').live('click', function () {
    alert("alert displayed from jquery");
});

answered Aug 28, 2011 at 20:01

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

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

3 Comments

Diver Dan Over a year ago

Hi Joseph, I had the above code in the partial view that was loaded dynamically not the actual page. Ideally I dont want the above code in the actual page I would prefer to keep it in the loaded partial view. <br/>I tried your suggestion however it doesnt get triggered.

Joseph Silber Over a year ago

@Diver Dan: Did you wrap it in $(document).ready? You shouldn't. Since you're using live, there's no need for $(document).ready.

Diver Dan Over a year ago

Your right. I moved everything out of the actual page into a global js file and all is good. Thank you

Chris - Haddox Technologies · Accepted Answer · 2012-05-09 17:34:23Z

Another thing you can do is use an @Ajax.ActionLink and in the AjaxOptions use the OnSuccess event to call a JavaScript function that executes the JQuery you are trying to execute. ie.

@Ajax.ActionLink("Create New", "Create", "Employee", new AjaxOptions()
{
UpdateTargetId = "divAction",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnSuccess = "createNew_Success"
}, new { id = "btnAdd", @class = "newButton", OnClick = "$('#divAction').slideDown();" })

Then in your Javascript:

<script type="text/javascript">
function createNew_Success() {
$('.button').button();
}
</script>

What this does is loads a PartialView into a div and after it loads successfully, it applies JQuery styling to objects with the class of button

Collectives™ on Stack Overflow

trigger jquery from ajax loaded partial view in mvc3

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related