I'm having trouble with a dialog on Jquery Mobile. On the index page I would like to have a dialog to the terms & conditions. The dialog works, I click accept and it goes away. Then when moving to another page it pops up again, and repeatedly pop's up even after clicking accept.
<script>
$(document).bind('pageinit', function (){
$.mobile.changePage("terms.html", "pop", false, false);
});
</script>
pageinit is triggered when page a page is initialized. Because you used $(document).bind('pageinit', function (){}); this means that you are binding to all pageinit's instead of just one. Use
$("#page1").bind('pageinit', function (){
$.mobile.changePage("terms.html", "pop", false, false);
});
Where page1 is the id of your first page.
Or
$(document).bind('pageinit', function (){
if(!termsAccepted) {
$.mobile.changePage("terms.html", "pop", false, false);
}
});
The second is better if you have multiple entry points into your app (like a mobile web page) as opposed to a single entry point (like a mobile app, always starts at index.html)
Edit:
This might be even better
$(document).one('pageinit', function () {
$.mobile.changePage("terms.html", "pop", false, false);
});
Related
I am new to this select2 multiple,
I have a select2 multiple code for selecting multiple in my project as show below,
$('.itemName').select2({
//data: data,
placeholder: 'Select a Language',
ajax: {
url: '/User/LanguageSelect/',
dataType: 'json',
delay: 250,
processResults: function (data) {
//console.log(data);
return {
results: data
};
},
cache: true
}
});
this is in the partrial view, it works fine in the fisrt time but when partial view get refreshed i can not type anything in the box,
i tried adding this line of code too..
$(document).ajaxComplete(function () {
$('.itemName').select2();
});
But when i added this the select2 is not working in the first place either, what did i do wrong??
this is the view i get one first load
First
and after partialview load i get like this
Second
please help
When your partial view is loaded (there could be an event for that) you must (re-)bind all your jQuery objects.
You're on the right track as far as I can see, but the first select2 instantiation is different and besides that I suspect that you're not hooked onto the right event (ajaxComplete).
Can you share how you load your PartialView?
If you don't know any of this; just add this to your PartialView:
<script>
$(function(){
$('.itemName').select2({
// add stuff
});
});
</script>
Open page as dialog. For example,
page1 -> page2(dialog) -> page3(dialog).
when opening a dialog, a dialog page is created in DOM by ajax.
<div data-role="page" id="dialog1">
....
</div>
$(":mobile-pagecontainer").pagecontainer("change", "#dialog1", { role: "dialog" } );
Opening dialog using page by ajax: works.
when a dialog closes, a code is executed to remove the page dialog element from DOM.
PageContainer hide event is registered as:
$( document).on( "pagecontainerhide", function( event, ui ) {
if (ui.prevPage) {
ui.prevPage.remove();
}
});
Issue: when a page dialog close, the ui.prevPage is not defined in the code above. ui.nextPage is correctly defined to point to the next page. How to catch event in order to remove the DOM element of a hidden page.
I tried navigation between two existing pages, both ui.prevPage and ui.nextPage are defined for pagecontainerhide event. what is the difference for hiding pages created by ajax (add page elements to DOM).
Note that: pagecontainerhide event can not be bound to page. pagehide event that is bound to page is deprecated.
Thanks.
Excuse me for the simplistic question, but I've had a hard time getting my head around this. I have a View (.cshtml) with the following contents (Per this sample):
<div id='dlgLogin'>
<h1>Log in</h1>
<table>
<tr>
<td>Username:</td>
<td>#Html.TextBox("username")</td>
</tr>
<tr>
<td>Password:</td>
<td>#Html.Password("password")</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(function () {
$("#dlgLogin").dialog({
modal: true,
autoOpen: true,
resizable: false,
buttons: {
Login: function () {
// perform login
$.post("#Url.Action("Login", "Home")",
{
username: $('#username').val(),
password: $('#password').val()
},
function( data, status, xhr ) {
if(data.Success){
alert('great'); // do something
$('#dlgLogin').dialog("close");
$('#divLoginButton').load("#Url.Action("GetLoginButton", "Home")");
} else {
// do something else
}
});
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
Basically the View will always load in a jQuery UI Dialog whenever it's opened, that is, it's the responsibility of the View itself to place it's own content inside a jQuery UI dialog. I've done this so that I can override the OnAuthorzation() event of my Log In and redirect the user to a pop up when they are required to log in. I have 3 questions:
1. How would I display a loading animation (a .gif) when the form is posted back to the server? With this approach? I'm aware that if I used an Ajax.BeginForm I could have specified a UpdateTargetId which would have been used as an area to load the animation during post back, but how would I achieve that effect with this approach?
2. How would I attach and handle the success event to the form post above? i.e. When the form is posted back to the Login Action of the Home Controller.
3. I've seeing at least 3 or 4 different approaches to displaying dialogs in MVC. What is the correct way to do this? Is the approach that I posted above considered good/mvc-friendly practise, if not what do you recommend?
1 How would I display a loading animation (a .gif) when the form is posted back to the server?
Take a look at ajaxSend:
<div id="loader"></div>
$("#loader").bind("ajaxSend", function () {
$(this).show();
}).bind("ajaxStop", function () {
$(this).hide();
}).bind("ajaxError", function () {
$(this).hide();
});
2 How would I attach and handle the success event to the form post above?
I don't understand what you are asking. You have attached an anonymous function to handle the post to the server in your sample code.
3 I've seeing at least 3 or 4 different approaches to displaying dialogs in MVC. What is the correct way to do this?
There is no best way of showing a dialog.
You can use the approach you showed with loading the dialog content with the page, but i would add a style="display: none;" to the dialogs div. Another approach would be to load the dialog content with ajax from a partial view when opening the dialog.
I want to refresh a page without using data-ajax="false" in anchor tag and i want to show the loading spinner while linking the pages in jquerymobile.pls help me.
reloadPage (boolean, default: false)
Forces a reload of a page, even if it is already in the DOM of the
page container. Used only when the 'to' argument of changePage() is a
URL.
Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
So basically you can use $.mobile.changePage() to change pages and you can pass it the preloadPage : true option when you want to reload a URL.
Here is a quick example of how to use $.mobile.changePage() for links that have the reload class:
$(document).delegate('a.reload', 'click', function () {
$.mobile.changePage('myPage.html', { reloadPage : true });
return false;
});
The default loader in jquery mobile appears while linking to pages, by adding the following code:
$("a").click(function() {
$.mobile.showPageLoadingMsg();
//Other things you want to do
});
I'm looking to display MVC3's unobtrusive ValidationSummary errors in a jQuery UI Dialog. Specifically, I want to be able to have a "live" $('.validation-summary-errors').dialog(...);-like experience. That is to say, whenever MVC3 client-side validation would show (for the first time) or update (on repeat offenses) the .validation-summary-errors element, I want the results to appear in a jQuery UI Dialog.
I currently have something along the lines of
#Using Html.BeginForm("Action", "Controller", FormMethod.Post, New With {.id = "MyForm"})
#Html.ValidationSummary()
...
$('#MyForm').submit(function () {
if (!$(this).valid()) {
$('.validation-summary-errors').dialog(...);
return false;
}
});
but this doesn't feel right to me.
It feels like I should be able to hook into the validation framework and be notified that validation completed, and there was an error summary that is now shown or updated with the errors. Then using that event, dialog() the now-shown/updated .validation-summary-errors element. Is there such a thing? Or are there any other suggestions?
So this is how I ended up doing it. I didn't find much documentation, but did enough JS digging to get to this point. Not sure how I feel about it. I do know that I no longer need to hook the form's submit event and "double-up" on the validation calls, so that's good. It just seems that this solution feels "cryptic" (at least in my inexperienced eyes), and I would have expected (and am still looking for) a solution that feels more baked-in.
$(function () {
// If there is an error element already (server side error), show it.
showValidationSummaryDialog();
// When the form validates, and there is an error element, show it
$('#MyForm').bind('invalid-form.validate', function (error, element) {
showValidationSummaryDialog();
}
}
function showValidationSummaryDialog() {
$('.validation-summary-errors').dialog({
title: 'Unable to Save',
close: function () {
$(this).dialog('destroy')
.prependTo($('#MyForm')); // jQuery moves the source element out of the DOM.
// We need to put it back in its place afterwards for validation to maintain its contents.
// TODO: Is there a better way?
}
});
}
If some one want to display both ValidationSummary & ValidationSummaryDialog then try this.
as per #ckittel.
#using (Html.BeginForm())
{
#Html.ValidationSummary()
<div id="ValidationSummary" style="display:none" class="validation-summary-errors">
</div>
}
<script type="text/javascript">
function showValidationSummaryDialog() {
$('#ValidationSummary').html($('.validation-summary-errors').html());
$('#ValidationSummary').dialog({
title: 'Error',
modal: true
});
}
$(document).ready(function () {
$('form').bind('invalid-form.validate', function (error, element) {
showValidationSummaryDialog();
});
});
</script>