jQuery Mobile How to simulate data-rel="dialog" - asp.net-mvc-3

Is there a way to simulate the data-rel="dialog" attribute to show a page as a dialog page?
I can't use this one because I use the button for the LogIn/LogOut model, and this one doesn't work if I don't insert the data-ajax="false" attribute.
But using this I cannot use the ajax-based data-rel attribute.
So I need a trick to create a dialog page without using the dialog attribute on the anchor link.
Thanks

Hopefully in the next iteration of jQM ( 1.2 ) you could use the Popup, You can currently test this out in the pre-release builds:
http://jquerymobile.com/test/docs/pages/popup/index.html
or a form login

Related

What is the best way to place 2 forms on the same page?

What is the best way to place 2 identical forms on the same page, but use the same form action and fields for each form? How can I keep response messages in the respective form area from which the data was submitted?
I'd have one form in the footer of my site, and one form in a popup on the home page of my site. I'm using a hidden div and Magnific to open the popup containing the same code from the form that is located at the footer. Essentially, both form do the same thing, and utilize the same form action.
I do not have access to the form action, or the code in the form action page.
Currently, the forms existing on the same "page" are no problem, but when I submit an email on one form, the errors and success messages show up on both the popup form as well as in the footer form.
I've read that this may be possible to do with ajax, but for completeness sake, I want to make sure that I'm building that I'm doing what I can with the form html, before moving on to studying ajax for this.
Sadly there is no nice html/liquid solution for this.
The only way is to use cookies in order to save information which form was submitted and show the error message only for that form instead of the two ones.
AJAX is not a good solution because of the Google Recaptch-a when you submit the form more than once, which is a real pain in the a** since there is no way to disable it and the form will fail if you try to submit it with ajax.
The easiest solution is to use cookies, other option is to rely on an APP for this, but it may be an overkill for this.
Forms in Shopify are... how to put it nicely... dumb... basic... not developer friendly or just not made to be tweaked in any sort of way ( excluding the front-end ).

Lotus Web Form Scroll and Popup issue

I am trying to create a web form in Lotus Notes that is web enabled. So far this has all worked fine, however there are 2 issues.
When Creating a Java Script Alert in the OnLoad Event, it Pops up everytime a user selects a radio button or dropdown option since this reloads the page. Is there any way to make this only for the initial opening of the form?
When a user selects an option, the form reloads and puts that form field on the top which is proving to be very disorrienting for users. Is there a way to have it not scroll on reload?
Thanks in advance!
The best advice would be: use XPages for web development that is "state of the art". If you can't, you have to code a lot of JavaScript to make the form not behave like "havoc".
First of all: the field property "refresh fields on keyword change" is the reason for the jumping / reload.
What does domino do?
All events / formulas that occur when you normally press F9 or use the Option above (that can be field values, input translations, hide whens, etc.) are not "converted" to HTML and javascript but are executed by the server. Therefor each change in a field with the option set submits the form and adds an &Seq=x to the url to keep track of the state. X increments on every reload. Of course this reload causes all events to be triggered again.
For you this means:
Option
disable the option to reload the form after keyword change.
Unfortunately you have to recode every dependency / calculation / hide when with javascript. Using a framework like jquery or dojo this is possible, but a lot of work.
If there IS no dependency then just disable the option...
Option
Live with the "jumping" and let your onload event check for the existance of an URL- parameter called seq... And only if it does not exist, then it is a "real" OnLoad...
Both options are not quite nice and not very easy to code...
That's one reason why IBM started XPages... There all this stuff is already handled by default...

ASP .NET MVC3 Razor Popup View

I am new to web development..
i have created views using Entity Framework in MVC3 Razor..
What i have done yet is,
i 1st created model(Clients) and DbContext(ClientDbContext) Classes.
then, i add controller with scaffolfind options
Template: Controller with read/Write actions and View, Using Entity Framework
Model Class: Clients
Data Context Class : ClientDbContext
Views : Razor(CSHTML)
It Creates the controller class and index, Detail, Delete, Delete Views...
After that i modified the index page for search and pagination...
All are working good...
in the index page i have create, edit, delete, detail links...
When i click the links browser loads to that page and working good...
But i need to popup those views when i click the links in the index page...
i don't know how to do this... i studied many articles but i am confused...
Please help me to solve this with an efficient manner...
Thanks in advance...
Creating a model pop-up within a page isn't something that can be done directly with ASP.NET MVC. You could do it yourself using javascript & css but I would strongly recommend using a JS UI framework to do this. jQuery UI has a pop-up modal box, except they call it a dialog.
The docs for jQuery UI's dialog can be found here. Have a look through the examples to see the fine details of how to set it up. But this is the basic flow of what you need to do:
Download the jQuery UI files needed and include them on your page (CSS/JS files)
Take the html from your create/update/delete views and put it on your index page, wrap them in a div with an appropriate id
When the page loads use jquery ui to target your div's you want to be a popup
Things such as the link you want to make a dialog popup is set by passing options to the dialog initialize method, again the exact options and examples can be found on the docs page.
Refer this : http://jqueryui.com/dialog/ to create a jQuery Dialog box.
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog">
#using(Html.BeginForm()){
#Html.EditorForModel()
<input type='submit' value ='Submit'/>
}
</div>

How to add custom forms in FullCalendar?

I have created forms in HTML (shown image below), and I want to integrate this form in FullCalendar. This form will show when I wanted to add new event. Can you give me some idea? If possible, can I do this without modifying the plugin?
You could put the form in a lightbox and show it, when the user clicks on a day. Fullcalendar provides an event for this: http://arshaw.com/fullcalendar/docs/mouse/dayClick/
Edit: Or what exactly do you mean by integrate?

MVC3 AjaxHelper choosing selected DDL values without custom javascript

I'm creating a site where I don't want anything to be done via custom javascript/jquery code at all, and I'm not sure it's going to be possible so need some advice.
The things that I want to be able to do are:
Load a JQuery (or Jquery style) dialog box containing a partial view.
Have a button that will select the "SelectedValue" from a dropdown list and render a partial view. (e.g. select a user from a dropdown and then click a button to add them to a list)
Append a partial view to an existing div.
I'm sure that all the above can be done using custom javascript, but what I want to is to use the standard Ajax and Html helpers that come with MVC3.
Main reason is that I've been struggling to get to grips with jQuery, but I also thought it would be nice to see if it can all be done without having to add a new script to the site.
As always, any help is greatly appreciated (even if it's just pointing me to articles).
The standard Ajax and Html helpers that come with MVC3 are for handling server-side stuff. Even the #Html.ValidationMessageFor helper usually uses their unobtrusive validation lib for jQuery validate.
Keep trying at jQuery, you'll get it. There is a reason it is so popular!
Update
I believe you can do #3 using #Ajax.ActionLink, but don't think you can do 1 or 2 out of the box with the Ajax html helper.
It seems that you can use the Ajax.BeginForm method to do this.
There are issues with the fact that it has been in a separate form as I can't nest the forms though.

Resources