Dealing with partial views and javascript

Question

I have set up a partial view to render in an index page. The partial view gets posted using Ajax to the server when a user clicks a sort button. This is so the entire page won't refresh just the partial view table.

The problem is after the first sort, the JavaScript in the index page is no longer effective. I worked around this by putting the js in the partial view itself to persist the events, but this produces js errors to saying 'continue' or 'ignore'.

Shyju · Accepted Answer · 2013-03-08 16:27:08Z

2

It is because your newly injected elements ( via ajax) is not aware of the events bounded. So those event bindings are not availabel to them.

You should change your event bindings to use on so that it handles the current elements and future elements (added to DOM dynamically via ajax or so)

for example, if you want to handle the click event for elements with css class someCssClassSelector,

Change

$(".someCssClassSelector").click(function(){
  //do something
});

to

$(document).on("click",".someCssClassSelector",function(){
  //do something
});

edited Mar 8, 2013 at 16:27

answered Mar 8, 2013 at 16:18

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

2 Comments

Rayshawn Over a year ago

that works, what if I need to persist a 'scroll' event is that possible, that's the other feature that needs to persist. I will update the question.

Shyju Over a year ago

@RayEatmon: Do not update the question. Post as a new question with relevant details

Collectives™ on Stack Overflow

Dealing with partial views and javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related