I have an MVC view that after the client click a button a partial view is rendered.
I want to use: window.scrollTo(0, document.body.scrollHeight); after the partial view is fully rendered, so the client will "jump" to the result of the click.
the thing is: it fires before the partial view is rendered and goes to the bottom of the screen as is before the page height is extanded...
how can I force it to wait untill the partial view is fully rendered?
Thank you!
If you use $().load your can use the callback to do whatever you want when load is done.
$('#___').load('/Home/___?departmentId=' + departmentId, function() {
alert( "Load was performed." );
});
Simply place that
<script type="text/javascript">
function ScrollTobottam() {
window.scrollTo(0, document.body.scrollHeight);
}
</script>
at bottom of partial view then it will load only after partial view is loaded fully
Related
I am trying to use an MVC Partial to render a JavaScript grid. To do so, I have to load & utilize jQuery. However, I keep getting the following error:
$ is not defined
This should be simple...but apparently...it isn't.
THE PARTIAL LOOKS LIKE:
<h2>Inside the Partial</h2>
<div id="grid"></div>
<script type="text/javascript" defer>
// ERROR: $ is not defined
$(document).ready(function () {
// Awesome JavaScript Grid Stuff Will Go Here
});
</script>
THE VIEW LOOKS LIKE:
#using Web.Areas.Administration.ViewModels
#model LookupsViewModel
<h1>View Title</h1>
#Html.Partial(Model.PartialPath, Model.PartialModel)
Here are two main things that will help you solve your problem.
Make sure that your reference of the jQuery files is correct. Most you could had problem in the path.
Don't ever put JavaScripts in the partial views. Put those in parent view before the partial view where it has been called.
If you're loading jquery through script after the Partial view, you will be trying to run jquery variables before they are loaded and defined. Ensure that any jquery that you run (whether inline or not) is run after the page has requested and loaded jquery itself.
See: Can you write jQuery code inline before loading jQuery?
I'll give a bit more reason why you shouldn't put javascript in your partial views. If you use the Partial more than once, you risk having repeated javascript. That could mean variables are redefined, eventlisteners are added more than once, etc. causing some confusing bugs.
I have one normal view with two views components inside. Normal view have also a button and the both views components have a button too.
How i can refresh the views components after clicking on button from normal view?
And how i can refresh second view component after clicking on botton from first view component?
I already tryed to find a way, but without success!
Best regards
Ultimately view components generate HTML markup when razor executes that code. If you want to update some part of your HTML page (like a partial page update), you may consider using jQuery and ajax to do that.
Something like this.
$(function(){
$("#SomeButton").click(function(e){
e.preventDefault();
//make the ajax call and get new data/markup for the
// div rendered by your first view component and update it
var url="TheUrlToActionMethodWhichReturnsPartialMarkup";
$("#DivIdA").load(url);
});
});
You can do the same thing for updating other parts of your page ( markup generated by view component 2) as well. Update the url to an action method which returns a partial view result.
I tried this:
`$("#buttonrefresh").on("click", function () {`
`$.ajax({`
`type: "GET",`
`url: '#Url.Action("VCTest")'`
`(function (result) {`
`$("#show").html(result);`
`});`
`});`
This script is to refresh one view component after clicking on button from normal view.
VCTest is the name of the view component.
show is the name of the div where the view component is called.
I am using MVC C# along with Jquery.
I have a partial view in a rather large page that has a number of tabs.
On a click of a checkbox, I like to update the partial view WITHIN the form.
What I am getting instead is just the partial view
Here is my code in Jquery:
$('#activelist,#inactivelist').change(function () {
var status = 'inactive';
window.location.href = '#Url.Action("Skits","KitSection")' + '?id=' + id+ '&status=' + status;
});
Any idea on how I could update the partial view within a form in terms of how I would make a call to it?
Here is the code for the PartialView
return PartialView(Kits);
As mentioned, what I see is just the partial view displayed and not the whole form.
window.location.href will reload the entire page. You need to reload some part of your page without a complete reload. We can use jQuery ajax to do this. Let's Find out what jQuery selector you can use to get the Partialview.
For example , Assume your HTML markup is like this in the main form ( view)
<div>
<p>Some content</p>
<div id="myPartialViewContainer">
#Html.Partial("_FeaturedProduct")
</div>
<div>Some other content</div>
</div>
And here the DIV with ID myPartialViewContainer is the Container div which holds the content of the partial view.So we will simply reload the content of that div using jQuery load method
$(function(){
$('#activelist,#inactivelist').change(function () {
var id="someval";
var status = 'inactive';
$("#myPartialViewContainer").load('#Url.Action("Skits","KitSection")' + '?id=' + id+ '&status=' + status)
});
});
You are redirecting the user, via the window.location.href property, to the URL of your partial, hence only displaying that partial.
You should instead do an AJAX call to the partial to retrieve it's HTML and then use something like the .append method to add it to whatever container element you want it to be added to.
EDIT: The .load() jQuery ajax method is actually better for this specific situation.
I'm working on an application that uses asp.NET mvc3.
I created a partial view, and I call this partial view in a view, so that I can update a div without reloading the page.
I use setTimeout (but I also tried setInterval) to define the refreshing time.
The problem is that it does not work, it refreshes the div randomly, not following the time I set, and there is no logic that I can understand in it, sometimes it refreshes it twice, sometimes it waits, but never longer then the time I set.
This is the code of the partial view. In the View I just call the partial view.
<script type="text/javascript">
var st;
function updateDiv() {
st = null;
clearTimeout(st);
console.log("posting");
$.post('#Url.Action("RefreshSelfUpdatingPartial")', function (data) {
$('#SelfUpdatingPartialDiv').hide().slideDown("slow").html(data);
//wait 15 seconds
st = setTimeout(updateDiv, 15000);
});
}
updateDiv();
</script>
<div id="SelfUpdatingPartialDiv">
test
</div>
"This is the code of the partial view. In the View I just call the partial view."
If all of the above code is in the partial view, doesn't that mean that the $.post() is going to then load all of the above into the <div>, resulting in a second copy of the above nested inside itself? As the timeouts run it'll just keep nesting more and more copies inside itself.
I'd suggest you move all of the above into your main view, then the partial view should return only whatever text you want to see in the <div> (and no JavaScript).
(If that's not what you meant by the statement I quoted then please update your post to explain more clearly where the above code sits and what the $.post('#Url.Action("RefreshSelfUpdatingPartial")) actually returns.)
(Plus, like Alex said, don't set your st variable to null before you pass it to clearTimeout() - though I think you can delete both lines because you don't need to clear a timeout after it's already triggered.)
i've created a upload form for 1 image. after the image is stored on the filesystem i want to refresh the partial view (which then should display the image).
After uploading a image, jQuery runs the Url.Action but doesn't render the partial view which gets returned from the Action "WebAuftragImageRefresh"...
Maybe you have an idea?
Regards,
float
BTW. Why is the code-block not ignoring html tags?
View:
http://codepaste.net/co1gu9
Partial-View:
http://codepaste.net/1rxq2d
Controller:
http://codepaste.net/j8kugj
In your view you're doing:
$.get('#Url.Action("WebAuftragImageRefresh", ViewContext.RouteData.Values["Controller"].ToString(), new { id = ViewBag.AuftragGUID })', {...
But where exactly is this piece of jQuery code getting the ViewBag.AuftragGUID from which is actually being set in the WebAuftragImageRefresh ActionResult?