MVC3, switching between Views in the same page - javascript

I am working on a MVC project that is supposed to have one page only, with two zones. On one zone I have a Google Map with markers, and the second zone is populated with the selected marker's details.
The details view has a button that when clicked should change the entire view into edit mode without refreshing the page or redirecting it. I have used two views, for details and edit and with the help of ajaxForm function I am switching back and forth between these two views. I'm adding the ajaxForm on documentready for edit view.
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#currentDiv').ajaxForm(function(data) {
$('#currentDiv').html(data);
});
});
</script>
The problem appears when on server-side an error appears while trying to save data from edit view and I want to return to the same edit view with the errors displayed. The ajaxForm handler is not added any more and even if the new values that will try to be saved are ok, the detail view is loaded in another page.
Unfortunately, the use of ajaxForm creates some other problems because I don't have control over the cases when the ajax call fails.
Any ideas on how could I fix this? Is it some other solution to switch between those two views without using ajaxForm and without refreshing the page?

I think there are a couple of different questions that you are asking.
First off, you add jquery handlers to deal with the case when you get a 500 type error from the server.
Something like the following. I suggest taking a look at the docs for more info.
$(document).ajaxError(function(event,jqXHR,ajaxSettings,thrownError){
if (jqXHR.status != 0){
window.location = <error page>
}
}
The second problem seems to stem around error handling of known errors (say invalid input). In this case I suggest the following workflow.
1) User clicks on edit button, taken to edit screen
2) User enters in data, use client side validation to do initial check
3) User submits, user is then taken to the view screen and is shown a
success or error message.
The server response could look like:
public ActionResult Edit(EditModel model){
if (!ModelState.IsValid)
{
return Json(new {successful = false, message = "Failed.."});
}
...
}
On the client side, your form callback should now handle the message and the fact it was successful or not. In my implementation, I used knockoutjs to create a "message" area that I could update and clear. (I created templates, etc).
Remember to use client side validation for the easy field validation stuff.... This will save a trip back to the server.
Yours could be quite simple, by popping up the message returned from the server.
Lastly, document ready only fires when the original document is done loading, never again for an ajax call (at least that is my understanding). Just put that code that is the document.ready at the bottom of the edit page. It will fire after the html it is targeting has already been rendered.
Hope that helps!

I have begun to move away from the asp.net views available in ASP.Net MVC due to some incompatibilities and/or unnecessary complexities when trying to achieve functionalities expected of AJAX enabled sites of the day.
I would recommend moving towards a design where you use "dumb" HTML files, use jQuery to download them using AJAX and drop them into a container (personally I use a div) and then use another AJAX call to gather the data from a controller. There are a number of advantages to this approach:
It establishes a real (not fake) separation between client side and server side code.
Html files can be cached on the client cutting down on the amount of data transmitted.
Binding of the Html elements becomes a client side task achieved using jQuery offloading processing cycles from the server.
Controllers essentially become collections of web methods which means they can be untilized by iPhone and Android apps making mobile deployment easier.
I realize this probably isn't the exact answer you're looking for and this may not be an option for you but my hope is that it will help someone at some point make a decision to move away from mixing HTML and server side code.

Related

Node.js form update with and without ajax

What would be the "best" approach to dealing with forms which have to work without and with JavaScript enabled?
Would it be better to create different routes for each, like
AJAX request: route "API/contact" and return res.send("message")
without JavaScript: route "contact"and return a redirect with a query param of "message"
Or in one route and detect xhr and render it depending on this?
Or is there a better way of dealing with the problem of taking the user to the res.send("") when the JavaScript isn't enabled to give the user feedback on the submit?
To clarify:
I have a site which is working with AJAX requests for its forms to avoid full page loads. It lacks the fallback when JavaScript is not enabled and thus when a user clicks submit on a form, he receives the data from the post back with res.send and it replaces the whole page, instead of the desired effect which would be to just update a label with the "success/fail" message. The question then remains as above which would be the neat way of dealing with this?
Probably the best thing to do would be to check the X-Requested-With header and check that it contains XMLHttpRequest (but this might get deprecated as the new fetch API will slowly come into browser.
Based on that value, you might want to return a JSON payload, or eventually trigger a server side rendering, therefore returning an HTML page ready-to-be-consumed.
As an alternative, you can return a redirect response with a particular query string value; once the page is loaded, you will check for that value (using qs for example, or deparam in jquery and manipulate the client side accordingly.
Your server routes have nothing to do with client-side javascript. You don't need javascript to receive a "res.send" message.

Javascript control page and user view page

Currently I'm working on a project where a user enters a lot of data constantly for a hour long window. I'm looking to have one user control all the data via some control panel and then have a link they can distribute to other users that will allow them to view that data without the ability to edit it.
Right now I'm doing some extremely weird methods. I have an XHR request on the control page that fires whenever a field is finished being edited. From there the data is sent to a php file that converts the data into a simple text file. Then the distributed link file will load that file one time and translate it into the necessary format.
Some potential problems I've run into are it seems odd that I'm sending starting as javascript data then going to a php file then to a text file then translating the data all the way back into javascript data again. Another problem I've come into is I'm not sure of a way to force users to reload the page when a field is edited in the control panel after the user has opened the view page.
Have I totally gone overboard here? What are some better concepts I could employ to accomplish this task?
If i understand what you want to do this is how i will do this:
First the data entry
if you have lot of fields you better use a form wizard, i don't have a particular one in mind right now but there is lot of them just search jQuery Form wizard
Here is an example:
http://i.stack.imgur.com/Luk2b.jpg
The concept of the form wizard is to guide user via multiple page and also validate the data. And click save when and the end.
Then save date in database.
Display content
All you need to do is to create a global separate page to display your content.
Let see something like: http://yourserver.com/view/{id}
where id is the identifier of the particular row in your database.
i'm not sure if i totally understand what u about to do. i'm trying to make your work description shorter here:
want to build a website that one person can edit a single page's content in 1 hour, and others can view the content change in that 1 hour.
if this is what u want to build, here's the module:
teacher: the one who can edit the page
student: the one who can only view the page
server: information center
teacher client edits page -> teacher client sends update data to server -> server saves data -> server sends update notice to student client -> student client receives update notice -> student fetches update data from server
to make this module work well, i suggest try socket instead of http reqeust, just like online games or IMs do.
well, try socket.io

HTML inside JS? Or in separate html file(load via $.ajax or $.load)

What would be the better/best solution? previously all my markup were all initialized in an html file,
index.php:
//login block
<div id="login">
form ...
</div>
so whenever I logged in, I have to remove/hide these login block by using $.ajax to check if there's an existing session then hide the whole login markup ( .hide() ) and show a different markup for logged in users.
The problem with this is that, it waits for the whole document to load before it executes the script, so the unintended/hidden markup will show and then vanished quickly upon page load.
I also tried putting the markup inline inside javascript, but I think it violates the "Unobtrusive" idea in js.
e.g.
var markup_arr = [
'<h4>Login</h4>',
'<form></form>'
];
var markup = markup_arr.join('');
So I end up with this
Current solution: separate html file and loading it using jQuery's $.load()
What are you using, which are the best practices and which one loads fast? Or are there any better solution out there that you can suggest? Thanks.
EDIT:
These are all javascript/ajax processes, so I'm not looking for a server side solution(include,require_once)
There's no correct answer to this. My view is you want to deliver the minimum amount of data to your users, in the minimum number of requests. It's all about finding the right balance. Depending on your users the balance will change to.
For me, I'd prefer sending two files that are 5kB each, rather than four that are 2kB. You're sending more data, but as there are less requests it should be just as quick. I'd think that delivering it as part of the Javascript might be best. Note it doesn't necessarily need to be the same file, although I'd deliver it as one - have a simple (PHP etc) script which joins the code file and the data file into one, then passes it out
The other thing I'd make sure is that you're caching everything as best you can. Having a slightly bigger file isn't generally an issue if you only have to download it once and it caches for a year. If your users are downloading a larger file every day, or worse, every page view it becomes an issue.
What I would do is check server side if the session exists, and include your separate "html" (php/rb/py/asp/whatever really) file if the session exist, and the login form if not. When the user logs, ajax would answer the same "html" file. (if I understand your problem correctly, and the login form is a single line in the page header).

A brief question about JavaScript or AJAX

I have been finding ways around this for a long time but think it's time I addressed it.
If I have a page that has a dropdown menu, is there anyway I can select a value which will subsequently load other values further down.
Can this be done without a page reload?
I will give you an example.
Say I was making some tools for an admin panel, but first of all they needed to select a member to work with.
They would select the member and then below, the fields about that member would be populated based on what was selected in the first menu.
As I have already asked, can this be done without a page reload?
Thanks for reading.
Yes it can be done without AJAX. When the page is rendered pass all the collections that will be used by the dropdown lists as JSON objects into the HTML:
var collection = [{ id: 1, name: 'John' }, { id: 2, name: 'Smith' }];
...
Then register for the change event of the first drop down and based on the selected value go and fetch the data from the other collections. Of course if you have lots of data this might not be practical as your pages will become very large and in this case AJAX woulld be more appropriate.
Answer YES it can be done.
Firstly you'll need an event, in this case you need to take action on the onChange event for the selectBox. So when an item changes you run a function.
Now you have 2 choices. You can do this using AJAX or NOT, it really depends on the complexity / security of your application.
In the following I refer to
Users : those using the application
Hidden Client Side Data : Data sent to the client during page load, but not visible to all users, however using view source, or downloading JS files, the Data is not secured.
Method 1 - NO AJAX
Basics: You send all the possible display options down initially when the page is first loaded, but display only the sections relevant to the user during selectbox onchange events.
Recommended when: No security condiderations if hidden client side data is detected (or won't be detected, or you simply trust your audience to use the app in the intended manner). Lastly when your total view permutations are low.
Method 2 - AJAX
Basics: You send down initially only the page skeleton, when the user changes the value of the select box, you then do an AJAX request to the server - grab the new view info thats relevant to that user, send it back down to a script which will inject that user data into the DOM.
Recommended when: You have a public site, or a site where security is a consideration. Where you have lots of view permutations or want more customizations per user than in scenario 1.
As you see both methods do not require a repost - method 1 ships everything upfront, method 2 uses AJAX to fill in data when required. Both methods are valid depending on your requirement.
Yes. Ajax is mainly used for that i.e. (without a page reload)
You have to use following step to achieve
Create a link and call a JavaScript function on it's onchange function
In the JavaScript function you have to call Ajax request.
Update the div in your ajax response.

ASP.Net, Drag-n-Drop, Postbacks, and Control IDs

The title attempts to summarize the problem, but here's a more detailed summary: our web page is a collection of usercontrols, which visually render as rectangular reporting widgets, which are set in AJAX updatepanels. We are giving the user the ability to drag and drop the widgets to pre-set "zones" on the page.
The drag and drop functionality works fine. We use AJAX calls to a web service to update a database with the user's new settings for persistence.
The "however" happens when we do a postback from one of these widgets. The postback is sent to the server, it renders an update, which is sent back to the client (all via AJAX, because of the updatepanel). We then get a "Could not find UpdatePanel with ID..." message on the client, because the document hierarchy has changed, but the control IDs have not been updated on the client.
We tried Rick Strahl's solution to this link text, which allowed us to create static control IDs on the client. This breaks the postback functionality, though... the isPostBack property is not set, I'm assuming because the server can't match the control ID with a known hierarchy element.
We're thinking about possibly resetting the control ID on the client side after it's dragged and dropped, using Javascript. Obviously, this would require duplicating .Net's naming algorithm--not smart, we're thinking. Maybe we can use a separate updatepanel and ask the server to send us the new control ID after it's dropped?
Obviously, we're running out of ideas.
I realize this is probably too long, and I'll happily edit, provide code samples, etc. to help you help us. Thank you in advance.
Just out of interest, have you inspected the id of the UpdatePanel that posts back, and is the id one that is expected? You can hook into the client page lifecycle of ASP.NET AJAX like so to inspect the id of the control initiating the postback
<script type="text/javascript">
function pageLoad(sender, args)
{
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
//fires when an async postback is initialized
function InitializeRequest(sender, args)
{
alert(args._postBackElement.id)
}
//fires when an async postback is complete
function EndRequest(sender, args)
{
alert(sender._postBackSettings.sourceElement.id)
}
}
</script>
You could use ASp.Net's built in system for draggable page elements called WebParts.
The system works with postbacks and can be easily implemented with Visual Studio
Have a search for webparts tutorials such as:
http://www.ondotnet.com/pub/a/dotnet/2005/01/10/liberty.html
Hope this helps

Categories