I have a main .cshtml view that uses jQuery $.Ajax to append returned PartialView result (e.g. return PartialView(partialView, model); ... from my controller action) to a div element on that main view page.
The main view page have inline javascript codes in it.
The partial view page also has some inline javascript codes in it.
The application runs OK. But at run time, I cannot see javascript codes from the partial view page with FireBug. I only see the javascripts of the main view page.
How can I see the javascript of the partial view page with FireBug? Please help.
Thank you.
you shouldn't put javascript code in a partial view since it gets inserted into the middle of the page. Put the javascript code for the partial into the main page. To fire events on that partial you need to tie them to the document
$(document).on('click', '.Class', function(){
// do something
});
where .Class is the selector for a field on your partial view. Let me know if you have any questions.
Related
I have javascript files defined in the <head> of both my layout decorator template and my individual pages which are decorated. When I update a thymeleaf fragment in one of my pages the javascript defined in the head of the parent page no longer works. Is there a standard way to 'refresh' these js files?
Thanks.
Additional clarification :
I have a form submitted by an ajax call which updates a table in the page. I have a Jquery onClick function targeting a button in the updated table. The javascript doesn't seem able to bind to the returned elements in the updated part of the page. I select by element class and can see that the selection works prior to the partial fragment render.
For me it is unclear what you mean by
javascript defined in the head of the parent page no longer works.
The page is created on the server. Normally it contains urls of the javascript files
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
In this case 'refreshing' the javascript files can happen only in the client.
Check the html of the page in the client.
Are the tags as expected ?
Are there tags for all expected javascript files ?
With the browser tools (for example Google Chrom developer tools ) check that all script files are actually loaded.
If this doesnt help, it could be that the order of the script tags has changed between the first and second load. This could cause a different behaviour of the javascript executed in the browser.
EDIT :
With the initial load you bind javascript callbacks to dom elements.
You do this directly or through Jquery or other libraries.
When a new dom element is loaded, it has no callbacks bound to it, even if it has the same id as a replaced dom element.
So after the load you have to bind your callbacks again.
If you bound them 'by hand', just bind it again.
If you are using a JQuery plugin, that made the bindings, look into the code or documentation, many of them have a function for that or you can call initialization again.
Once you added new content to the DOM you need to bind again the new content.
Let's say I have a button with some class, the event in binded to the class:
<button class="someclass">Button 1</button>
<script>
var something = function() {
// do something
};
$(".someclass").on("click", something);
</script>
If I add more buttons from the same class to the DOM, they will have not have the click event binded. So once you load the new content via ajax, also remove all binding and add again (you need to remove or you will have buttons with 2 events).
$(".someclass").off("click");
$(".someclass").on("click" , something);
The page that I'm working with has a couple tabs and the content of each tab is loaded in via ajax by requesting a partial view from the controller. The problem is that the partial view uses knockoutjs, so it is bound to a view model. In this particular scenario, the page is loaded up in its entirety first time through, so all of the bindings work fine. When you switch tabs, it requests a partial view and replaces the tab content area with the new page. When you switch back to the first tab, it'll successfully loads the partial, except it would appear that all of the knockout bindings have been lost so there is a lot of missing data.
I can't place the viewmodel declaration and model bind in the partial because jquery hasn't been loaded by that point. Or so it would seem ($ is not defined).
The view model is declared and bound on the main page that calls the partial view(s), not the partial view itself, so I thought the model would still be available and bind successfully, but it does not. I know I'm doing this wrong, and partial view are super wonky when it comes to javscript so I'm hoping to steal a bit of insight from you guys.
Here's the basic setup:
If you are able to bind to specific non-overlapping areas of the page, then you could choose to call ko.applyBindings(someViewModel, someDomElement) like in this answer: Can you call ko.applyBindings to bind a partial view?
However, if you have an overall view model bound to the page and then "islands" of content that are loaded via a partial that you want to bind later, then one option would be to go for something like this: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html. So, you would set up a binding on the container of where your partial goes that tells Knockout to keep its hands off of that area. Then when you load the partial, you can safely call ko.applyBindings(someViewModel, innerContainer).
The binding might look like:
ko.bindingHandlers.stopBinding = {
init: function() {
return { controlsDescendantBindings: true };
}
};
and you would use it like:
<div id="outerContainer" data-bind="stopBinding: true">
<div id="innerContainer">
...load your partial here
</div>
</div>
Then, ko.applyBindings(someViewModel, document.getElementById("innerContainer"));
I am working on ASP.Net MVC 3 website which uses Razor view engine and Jquery
On homepage (or any page for that matter) I want to load sections of content using ajax, something like iGoogle.
I mean on page load
I want to call some HttpGet action methods each of which returns some
Html content
Until I get response these Div's showing "loading" graphics.
I am aware of Ajax.BeginForm and Ajax.ActionLink but in both the cases I need to click some UI element; I do not know how to use them on page load/ document.Ready?
I will be thankful even if I get some direction and not exact/complete code.
Okay, lets give you some direction, I'm going to show some code in jquery because its easy enough. lets go.
Html
<div id="SomeContent"> </div>
In your view
$(function(){ // this runs on on page load
LoadData('#SomeContent', #Url.Action("ActionName","ControllerName"));
});
in a javascript library file
function LoadData(target, url){
$.ajax({
beforeSend: startAnimation(target),
url : url,
success : function(result){ $(target).html(result); },
complete : stopAnimation(target)
});
}
function startAnimation(target){
//..add a loading image on top of the target
}
function stopAnimation(target){
// remove the animation gif or stop the spinning, etc.
}
your server side code
public ActionResult ActionName() {
... do things to get your model populated ...
return PartialView("SomeView", yourmodel);
}
additional thoughts:
this rough code loads a partial view into a div. The asychonous call begins when the dom is ready.
see http://api.jquery.com/jQuery.ajax/ for jquery ajax documentation
i like to use spin.js to show a loading icon becuase it is so darn easy and small.
I load some PartialView in page as response to Ajax form post. This partial contains two Ajax.ActionLink by self. After response load ActionLinks doesn't work properly - it send request to server but doesn't updates UpdateTarget with returned content.
Seems like jquery-ui provided widgets (like draggable) can't bind to elements in way like this (code placed in partial view):
$(function(){ $('#target').draggable();});
I would appreciate for any solutions.
PS> ActionLinks starts work after target id correction, but jquery ui steel don't work
seems #target is not avilable when your code is binding the handler..
try using live(), or delegate(), or .on()
Solved by add named function in PartialView and call it in OnSuccess for Ajax.BeginForm. As I discover document.ready fires for ajax-loaded content before page is really updated.
In my MVC 3 application, I will have a view that will contain a partial view. The view itself will have a list of dynamically generated links. The link has to cause the partial view to render detailed information for that linked item.
Would I use Ajax for this? If so, since I haven't worked with Ajax before, is there any documentation for using it in a MVC 3 app?
Also when the view is first loaded, the partial view will either not be loaded or ideally show another separate partial view. Any thoughts on a good way of doing this?
Thanks for the help.
Create an action method which returns a PartialViewResult:
[HttpGet]
public ActionResult DetailedLinkInfo(int someIdentifier)
{
var detailedLinkInfo = GetFromSomewhere();
return PartialView(detailedLinkInfo );
}
Then create a partial view, strongly-typed to the type of detailedLinkInfo (let's say it's an DynamicLink.
#model WebApplication.Models.DynamicLink
#* bunch of HTML for the detailed info *#
Then use jQuery on the client-side. Give all your links a class so it makes it easier to hook up the event:
$(function() {
$('a.dynamic-link').click(function() {
$.get('/SomeController/DetailedLinkInfo', someIdentifier: $(this).attr('id'), function(data) {
$('#some-div').html(data);
});
});
});
End result: you click one of the links, the jQuery will perform an AJAX GET to your controller action, then bind the result to the div.
The easiest way of solving this problem that I found was using Ajax helpers that come with the MVC 3 framework. The Ajax video for MVC 3 on Pluralsight did a phenomenal job at succinctly explaining the basics of how to use this feature.