I am working on a webapplication in asp.net mvc 5. I call a View from a action.
But this view is not displayed. In the developer-tools ( FF and Chrome) I can see a correkt answer in the html-Tab. But not in the browser.
Can anybody explain that?
Thats what is displayed:
Displayed
thats the answer in html-Tab of the dev-tools:
Answer
Many thanks for your help
P
Are you calling this Action / View via an AJAX call? Since you are using a Grid I would be inclined to think that is likely.
If so, you'll want to ensure that you are actually setting the results of your contents within the callback function :
// Call a controller action via an AJAX call
$.ajax('controller/action', { id: 42 }, function(results){
// results should be your actual View HTML
$('#result-area').html(results);
});
If you are using some type of third-party components for performing this, there should be some documentation for how to handle your callbacks from your Controllers.
Related
I have a custom view to display breadcrumbs for the current model navigation on a page, here's how it looks in my template (which is the singular model template):
<div class="breadcrumbs">
{{view Mdm.BreadcrumbView}}
</div>
Here's what my view looks like to render out the breadcrumbs:
App.BreadcrumbView = Ember.View.extend
templateName: 'breadcrumb'
penultimate: (->
content = #get('controller.content.self_and_ancestors')
content[content.length - 2]
).property('controller.content')
last: (->
content = #get('controller.content.self_and_ancestors')
content[content.length - 1]
).property('controller.content')
Here's the breadcrumb template that renders the data:
<ul class="breadcrumb">
{{#if view.penultimate}}
<li>{{#linkTo group view.penultimate}}Back{{/linkTo}}</li>
{{/if}}
<li>{{view.last.name}}</li>
</ul>
My model that the view is using (controller.content) has nested data self_and_ancestors that hold the breadcrumb data that I need for the current page I'm on. I'm only interested in seeing the last object in that array and the one just before it to navigate one page back (that's what the penultimate and last are displaying). The breadcrumbs render perfectly and I can navigate fine until I click the 'Back' (penultimate) link. When I hit that I got the following error:
Uncaught TypeError: Cannot read property 'length' of undefined
For some reason the content is undefined, but I'm not exactly sure why. Any thoughts?
Edit:
Welp, here's an example http://jsbin.com/ejazin/2. It is, however, working in this example, which makes me thing something else may be the problem. Basically every time you click a breadcrumb link in my app, the router does a find based on the ID which makes an ajax call to find the current group for that route and all sub groups. Maybe the view is trying to pull out the sub_groups data before it's come back from the server... Is there any way to check / prevent this?
Edit Edit:
This might convey what I'm trying to do a bit more - http://jsbin.com/obazus/1/.
Edit Edit Edit:
Ok, the issue is definitely the fact that the view is rendering and calling penultimate before the ajax request has finished in the model. That being said - what's the best way to make sure it renders after the ajax request for the model is finished?
After looking more closely at your use case, what might help is to check out the new router facelift here. It's still not wildly documented and should soon appear on the ember website as a blog post, but it's already merged into ember-latest so you will have access to the new implementation. Especially the beforeModel & afterModel hook's seam to be relevant for you.
For example in the afterModel hook you can do stuff like:
App.PostsIndexRoute = Ember.Route.extend({
afterModel: function(posts, transition) {
if (posts.length === 1) {
this.transitionTo('post.show', posts[0]);
}
}
});
Hope it helps.
I don't have so much experience using AJAX in a MVC application, in fact is my first facing. Please check the below image and note the rectangles.
The image is just an example that I took from internet.
The biggest rectangle is a partial view in my application and I have to render it when the user press Continue or Continuar button. The application should replace the current view for another without refresh the page.
This is the code which I'm testing, note first that I'm passing the first element of a list, but when the user press the button, render the view with the next element index = 2.
public ActionResult DoTest()
{
if (!Request.IsAjaxRequest())
{ }
List<Worksheet> worksheets = new List<Worksheet>()
{
new Worksheet("Hoja 1", ...),
new Worksheet("Hoja 2", ...)
};
return View(worksheets[0]);
}
Can orient me a little bit to know how to implement this feature? I just know that I need to use Ajax.
Have a look through the tutorials and examples here. There's plenty of other material around on the web with information on this subject.
There are many different ways you can achieve this. One way would be to write a custom paging Helper (HtmlHelper) that accepts new content upon the post event. You can view all about Helpers here : Custom HTML Helpers
Another way could be to use partial page rendering to achieve the partial page update upon post event.
If I was you I would combine a partial view with a jquery function to update the content. You can view some help on that here: Change dive content with Jquery
I'm using a fresh iPad split-view template application in Xcode. I've added a sample data array and the data shows up just fine in the Popover view. However, when it's tapped, it doesn't call any methods from DetailViewController.m (setDetailItem in particular) like I'd expect it to.
Am I missing something here?
(I'm not sure what code I should post for this particular question, so I'll wait on you guys to ask for it.)
Thanks SO much in advance!
To troubleshoot this issue, you should check the method called didSelectRowAtIndexPath in the delegate for the table view. I remember that was called RootViewController by default and exists in the RootViewController.m file.
It should call the setDetailItem method. Check if it does so.
Posting the didSelectRowAtIndexPath method body here will help better.
just need tips on how to make forms where request are submitted via AJAX with a loading progress image. I am using update panels with AJAX framework. I would like to know about the recommended approach. Through JQuery or AJAX toolkit ?
Please advice, examples would be an added bonus for me.
1- Prepare a client side div with "display:none" style property. put your loading image inside.
2 - when the user or page submits a request, change that divs display property to "block".
3- Add some kind of "information received" sign to the response and check this response from the client side and then change that divs display property back to "none"
I would like to know about the
recommended approach
Well, that depends on what you are doing, what parts of the form are you updating, how big is the form, what values are you sending to the server.
Generally speaking, if you want to update something simple (dropdownlist, listbox, etc), youd generally use JavaScript (or jQuery) to call an AJAX-enabled web service. This way, you're only sending to the server the data it needs, things like ViewState/cookies are not sent over the wire. You also have full control over the pre/post execution events (so you can add your loading images, call the WS, then clear them).
However, if you want to asynchronously update an entire form (which has a lot of controls), you're probably right in using an UpdatePanel. Things like a GridView are a good case for an UpdatePanel (as you usually need to handle editing, binding and paging all asynchronously).
The progress image is made easy with the following code:
<ProgressTemplate>
<img src="someloadingimage.gif" alt="Loading" />
</ProgressTemplate>
Stick that inside your UpdatePanel, and whenever an AJAX call is made, the loading image will be shown.
HTH
If you use JQuery for AJAX request then you can use the following events -
$.ajax({ url: "test.html",
type: "GET",
beforeSend: function(){
-----load your loader here-----
});,
success: function(){
------remove your loader here -----------
Remaining code
}});
You can also use POST. in above example i have used GET.
For detailed documentation you can refer - http://api.jquery.com/jQuery.ajax/
Create a small plug-in for your loader like so.
$.fn.ShowLoader = function(on){
switch(on)
{
case true:
$(this).show();
break;
default:
$(this).hide();
break;
}
}
then use the following:
$('form').submit(function(){
var Form = $(this);
$('.loader',Form).ShowLoader(true);
//Gather some params
Location = Form.attr('src');
Data = Form.Serialize();
$.post(Location,Data,function(result){
result = result || false;
if(result)
{
$('.loader',Form).ShowLoader(false); //Disable the loader
//Process result
}
});
})
html would just be a regular form, with an image / div inside with the class of loader
I've inherited some code that I need to debug. It isn't working at present. My task is to get it to work. No other requirements have been given to me. No, this isn't homework, this is a maintenance nightmare job.
ASP.Net (Framework 3.5), C#, jQuery 1.4.2. This project makes heavy use of jQuery and AJAX. There is a drop down on a page that, when an item is chosen, is supposed to add that item (it's a user) to an object in the database.
To accomplish this, the previous programmer first, on page load, dynamically loads the entire page through AJAX. To do this, he's got 5 div's, and each one is loaded from a jQuery call to a different full page in the website.
Somehow, the HTML and BODY and all the other stuff is stripped out and the contents of the div are loaded with the content of the aspx page. Which seems incredibly wrong to me since it relies on the browser to magically strip out html, head, body, form tags and merge with the existing html head body form tags.
Also, as the "content" page is returned as a string, the previous programmer has this code running on it before it is appended to the div:
function CleanupResponseText(responseText, uniqueName) {
responseText = responseText.replace("theForm.submit();", "SubmitSubForm(theForm, $(theForm).parent());");
responseText = responseText.replace(new RegExp("theForm", "g"), uniqueName);
responseText = responseText.replace(new RegExp("doPostBack", "g"), "doPostBack" + uniqueName);
return responseText;
}
When the dropdown itself fires it's onchange event, here is the code that gets fired:
function SubmitSubForm(form, container) {
//ShowLoading(container);
$(form).ajaxSubmit( {
url: $(form).attr("action"),
success: function(responseText) {
$(container).html(CleanupResponseText(responseText, form.id));
$("form", container).css("margin-top", "0").css("padding-top", "0");
//HideLoading(container);
}
}
);
}
This blows up in IE, with the message that "Microsoft JScript runtime error: Object doesn't support this property or method" -- which, I think, has to be that $(form).ajaxSubmit method doesn't exist.
What is this code really trying to do? I am so turned around right now that I think my only option is to scrap everything and start over. But I'd rather not do that unless necessary.
Is this code good? Is it working against .Net, and is that why we are having issues?
A google search for
jquery ajax submit
reveals the jQuery Form Plugin. Given that, is that file included on your page where the other code will have access to the method? Does this code work in Firefox and not IE?
Seems like there was too much jQuery fun going on. I completely reworked the entire code block since it was poorly designed in the first place.