StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>So, you don't need to think about it all at once. First make your form in html front and center on the page, attach an action, and get it to work without Modal fanciness.<br> Once your form logic works you can loop in jQuery. Whether you want to start with modality & the popup or with the Asynchronous Post with jQuery is up to you. I usually like to make it work before i make it pretty, so we'll take that route. If you use the standard <% Html.BeginForm... { %> syntax to define your form, remove it. Go old school html! (I know you can further customize the Html.Beginform but it's easier to just use html)</p> <pre><code><form action="<%= Url.ActionLink(...)%>" id="SomeForm"> </code></pre> <p>Now you can wire up jQuery in your document.ready, or wherever you initialize your JS.</p> <pre><code>$('#SomeForm').bind('submit', youractionfunction); </code></pre> <p>In your action form you'll probably be calling jQuery's post where the callback of the post hides your form and updates the rest of the page. <a href="http://docs.jquery.com/Ajax/jQuery.post" rel="nofollow noreferrer">Api Documentation</a></p> <pre><code>function youractionfunction(e){ $.post($(e).attr('action'), // we get the action attribute (url) from the form { title : $('#titleBox').val()}, // the values we're passing yourCallbackFunction); return false; // This is important, this will stop the event from bubbling and your form from submitting twice. } </code></pre> <p>Now you have an ajaxy form, so you can work on the callback.</p> <pre><code>function yourCallbackFunction(data) { // do something with the result. } </code></pre> <p>Now we can talk about modality. It's typically a bit of a pain, but you can use a jQuery plugin like <a href="http://dev.iceburg.net/jquery/jqModal/" rel="nofollow noreferrer">this</a> or something similar to do it for you. Then it's just a matter of wiring up events to show and hide the popup, and you're all set. </p> <p>If your intent was to have that form loaded asynchronously when the "show" link is clicked, that's a bit more troublesome, but still doable. You can use jQuery.Load (<a href="http://docs.jquery.com/Ajax/load#urldatacallback" rel="nofollow noreferrer">Api Documentation</a>) to pull the html and inject it into the dom, but you'll still have to wire up the events (again, with the bind('submit'...) described above).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload