My project has a "HUD" on the front page that lists students that are in the process of switching course plans. It does this by doing an AJAX call to a seperate .ascx page that runs some SQL statements in C# and renders the HTML. It then delivers it back to the front page to be placed into a div named "dynamic". Here's the code on the front page that calls it:
function loadDynamic() {
var ControlName = "utilities/HUD.ascx";
$.ajax({
type: "POST",
url: "Default.aspx/Result",
data: "{controlName:'" + ControlName + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$('#dynamic').html(response.d);
},
failure: function (msg) {
$('#dynamic').html(msg);
}
});
}
This is done in order to facilitate multiple people working on the system and being able to get live updates (there's another script that re-calls the loadDynamic() function every 10 seconds, but that's irrelevant to this problem).
However, there can be quite a few students that are trying to change course plans at one time, so in order to save space on the page, we've decided to try putting in a "...and # more records" link (an < a > tag with a javascript call in the href) that would activate another javascript function to show a seperate list with all the students and hide the list with only the few students on it (this javascript function is located on the HUD.ascx page).
<script type="text/javascript">
function loadMorePending() {
this.document.getElementById(<% =pnlMorePending.ClientID %>).style.visibility = 'visible';
this.document.getElementById(<% =pnlPending.ClientID %>).style.visibility = 'hidden';
}
</script>
Now that you have the background, here's the problem:
The second code block shown above contains references to two asp:Panels, which contain the lists, located on the HUD.ascx page. When someone clicks the "...and more" link, it should simply hide one asp:Panel and show the other. However, when it goes to call the function, it throws a "Microsoft JScript runtime error: 'ctl01_pnlMorePending' is undefined". Upon further investigation (when looking at the html source after it's been rendered in the browser), even when the 'dynamic' div is populated with the data from the HUD.ascx page, it remains empty!
<div id="dynamic"></div>
While this would explain why the pnlMorePending couldn't be found, it doesn't give me any leads on how to rectify this. How am I supposed to reference something that doesn't exist on the page? I've tried substituting the panels for divs, but it still doesn't work. The problem, I think, lies in the fact that the script transfers over to the front page fine, but it doesn't run on the HUD.ascx page where it needs to. Is there a way to do this without having 2 different HUD.ascx pages and 2 different "loadDynamic()" functions (the second being called and populated into the 'dynamic' div when the "...and more" button is pressed)?
Sorry if it's a little hard to follow. First time posting and the problem is pretty in-depth.
You are missing quotes:
this.document.getElementById('<% =pnlMorePending.ClientID %>').style.visibility = 'visible';
Related
I have a MVC Controller with an Index that will cycle through multiple PartialView as the user goes through the form process.
Here is the Index:
#section pageMain {
<div id="partialView">
#Html.Partial("SelectAccount", SUPR.Models.Account.GetAccounts());
</div>
}
This works fine and I get the SelectAccount page just fine.
My issue is that I have an AJAX call that runs when the user selects a row in a table on the SelectAccount page. What is supposed to happen is that the PartialView is then replaced with another PartialView that displays the details of the selected row. This actually does work, but after about 1 second it cycles back to the SelectAccount PartialView with a query string attached, for some reason, to the URL.
Before
After
Here is the code for the AJAX call:
$.ajax({
type: "GET",
url: "/Review/GetReviewView",
data: { profitCenter: profitCenterNo }
}).done(function (data) {
$('#partialView').html(data);
});
The ONLY that is happening in the controller for GetReviewView is that I'm returning the PartialView with the PartialView name and model. This working because, in that brief moment that I can see the ReviewAccount view, the proper data is in the fields.
Any thoughts as to why this odd behavior is occurring?
Are you capturing the event in JS? If you are triggering off of a click event then add the event parameter to the method and then at the end of the method add:
event.preventDefault()
And see if it still happens. It sounds like a client side JS issue, not a C# issue.
The way you are doing this is actually fine. There used to be a Microsoft library called ASP-AJAX or something, don't remember because I didn't use it much. This library basically allowed you to decorate HTML elements with ASP-AJAX-METHOD , ASP-AJAX-REFRESH-TYPE and it would automatically do something similar to what you are doing now. Go to the Server and retrieve a PartialView.
I've come from a Classic ASP background and have started developing ASP.NET MVC 4 with C#.
Previously in classic ASP I would post the whole form and page to the resulting URL. However in MVC4 I've seen other ways of just updating the partial view.
Basically at the moment on the left hand side of my page I have three different combo boxes with some data in. I have a Submit button that when pressed, I want to search my database and return a list of results from the database to a partial view (I've already got the code working to search the database and populate a list of objects.), so that the whole page isn't refresh.
In addition, for partial views, can then handling paging. For example my query could return 100 records, but the user only wants to display 20 per page giving 5 pages of results. Is this possible ?
Can anybody offer any examples of what I'm trying to achieve.
for updating your partial view you should use an ajax call
$('.btnSubmit').on('click', function(){
$.ajax({
url: "#(Url.Action("Action", "Controller"))",
type: "POST",
cache: false,
async: true,
data: { combo1: $('.Combo1').val(), combo2: $('.Combo2').val(), combo3: $('.Combo3').val() },
success: function (result) {
$(".Content").html(result);
}
});
});
then on your view just put a div with class that matches where it will put the returned partial view. For paging I just use a jquery plugin. Here is a page that has some options http://plugins.jquery.com/tag/paging/ Let me know if you have any questions.
I have created a web calendar using HTML,CSS and C# in an MVC application. The HTML is in a view and I have a controller with an action that initializes the Calendar and displays the correct days on the view.
It works as intended but the problem comes from the fact that I want to embed this calendar to a couple of pages in unrelated Views controlled by different actions and with different models loaded.
I could copy paste the view code and make the necessary adjustments to the model but that would not be ideal. I tried with RenderAction but the problem is that when I use the buttons to navigate to different months I leave the initial view. e.g.:
#Html.ActionLink("‹", "Calendar",
new { month = Model.RequestedDateTime.Month - 1, year =
Model.RequestedDateTime.Year })
Is there a way to modify this behavior?
Thanks
Html.ActionLink, alway creates a normal link, with have the common behaviour. If you want to share your calender.
To avoid redundant code, you may redesign the calender as a partial view and replace the link by a label for example. Bind an ajax function to the label-click-event to refresh the calender. Something like:
#Html.Label("<", new { onclick="pageMonthBack("+Model.RequestedDateTime.Month - 1+", " Model.RequestedDateTime.Year+");" })
I would place the called ajax functions in a script which is loaded separately.
I solved the problem in a similar way, to what developer10214 proposed. I used a div and in that I used Render.Action. Then I used the following code
$(function () {
$("#cal").on('click', "#backwards", function () {
$.ajax({
url: "Home/Calendar?target=backwards",
cache:false,
type: "GET",
success: function (result) {
$("#cal").html(result);
}
});
});
});
in the including page. And I did not use ActionLink at all.
I managed to load a distinct page inside a div in another page using jquery ajax. The problem I am encountering is that when I click a button inside this sub page, it cause a postback to the whole parent page. How can I force it to just refresh the panel it resides in?
One more thing. I am not sure I am doing the right thing, but the parent page has its own form with runat=server settings, while the secondary page that is loaded inside the div has its own form. I cannot remove the form from the latter because it causes an error.
I have seen some asp.net ajax tutorials but they do not deal with loading sub pages that havbe their own .net controls. Can anyone guide me to some good tutorial?
Thanks!
You need to create a empty with an Id for example : ajaxDiv
Then you create a jquery script like this :
<script type="text/javascript">
// Called at the loading of a page
$(document).ready(function () {
//here you execute an ajax function
$.ajax({
url: 'the url to retrieve data as string ex : /Webservice/Test',
type: 'get',
async: true of false,
//if the request is successful, you load the content of your div with the strings you loaded
success: function (data) {
$("ajaxDiv").html(data);
}
});
});
</script>
the tips is to load your page into the ajax request.
OK, since you are using jQuery, let's set up that event manipulation.
I assume the following markup:
<button type="submit" id="mySubmitButtonId">Submit</button>
Then, on my page I have the following javascript:
$("#mySubmitButtonId").click(function(event) {
event.preventDefault();
// do here what you want to do instead including refresh of a section via ajax
});
I'm working on an asp.net c# empty web forms project. I have a SQL Server Compact database with a single table that I want to use to store information about an elements (x,y) coordinates.
The database should be updated with the new coordinates for a particular panel when the mouseup event is triggered on that panel (a div essentially). The solution doesn't need to be ajax, submitting the page will be ok.
The problem is that there is no mouseup type of event for an <asp:Panel> element and on the other side I'm not sure how I would trigger something server-side from jQuery. Getting the coordinates using jQuery is easy enough, but what would I do from there?
Are hidden inputs ok for this? Give me your best solution - I don't need to see code, just give me a better idea of what i should be doing.
Thanks!
First check what exactly asp:Panel is getting rendered in browser by firebug, suppose it renders as div then you can use jquery's .mouseup() function and bind this event to what ever element that panel is rendered. Suppose if that asp:panel is rendered as div then look this below code for sample.
<div id="asp_panel">
Click here
</div>
$('#asp_panel').mouseup(function() {
$.ajax({
url: "HelloWorld.asmx/Hello",
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{}", // if your method takes any parameter pass it in here in json format.
dataType: "JSON"
success: function(msg) {
alert(msg);
}
});
});