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.)
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.
In my MVC Razor view I have a partial view with <form> tag in it. I need to add another partial view in main view. As <form> is in 1st partial, I m not able to get input data from 2nd partial in action. Can you please suggest how I can get input data from 2nd partial view to action without client side manuplation (Java Script/ JQuery usage) ?
That will be the natural issue with the setup you have. Consider first not putting any form in the first partial, and keep the forms only within the main view. Then render the partials in the main view within the form... a push in the direction of a web forms setup, but it would work...
It's very easy for me to say this, but without seeing your code, I can't provide anything concrete.
i have two cshtml page one which has the link the makes the popup appear, and another with just the form data and would like to know how i would be able to display the form on the popup, as i am using MVC, to create the form, the plage which has link on is in the ~/views/client/index.cshtml while thr form is ~/views/fb/CreateOrEidt.cshtml the colller is called "FB" and the methos to call is edit, it take the parameter Id
I have tried #hmtl.renderpartial, #html.renderaction, #hmtl.partial, #html.action,
I have also tied these method with a { after the # and the end, doesnt give me a error bust still doesn't display information
The error which i get is razor canot convert type object to void
It's a little unclear what you're trying to achieve but from the error you've mentioned when calling Html.RenderAction you need to call using something like:
#{
Html.RenderAction("ACTIONNAME");
}
Calling the other methods against an action view won't work.
If you're trying to display a view inside a popup though you want to be careful that you don't end up including your layout page etc as this is potentially not the look you're going for..!
The pattern I generally implement for things like this is to simply partial out the form bit that I need to reuse and call renderpartial to display this where I need it. This renders just the html I'm after then and not the whole view (+ layout(s)).
I have an MVC view that contains a number of partial views. These partial views are populated using partial requests so the controller for the view itself doesn't pass any data to them. Is it possible to reload the data in one of those partial views if an action was triggered in another? For example, one partial view has a jqGrid and I want to refresh the data in another partial view when a user selects a new row in this grid.
Is there a code example for this scenario (in C#) that I can look at to see what am I doing wrong? I am using ajax calls to trigger a new request but non of the partial views are refreshed so I am not sure if the issue is with the routing, the controller, or if this even possible at all!
Thanks!
If your partial view action returns a ViewResult, the response contains an HTML chunk. However, an Ajax call does not automatically insert the result into the DOM, as the result can be in any number of formats and/or might need additional processing before the DOM is updated. So, in order to get your partial view refreshed, you need to take the result of the Ajax call and insert it in the right place in the DOM tree.
jQuery has a nifty load() method, that will encapsulate this process for you. It'll make the Ajax call, take the result and replace the inner HTML of the selected element. You can even pass it your own function to be executed before it inserts it in the DOM tree, if you need to transform the result in any way.
Side note: jQuery.load() strips scripts returned in the result. It does retain them for execution in certain sceanrios, but it does not even execute them in other scenarios. So, if your partial view contains scripts, you might consider updating the DOM tree yourself.
All that this has nothing to do with your C# code, which runs on the server side.
However, you do have the ability to make your action a little bit smarter by checking if the request is plain HTML, so the result will be rendered by the browser directly, or if it's an Ajax call and the result will be processed by your script before getting in the DOM. This check is done using the Request extension method IsAjaxRequest.