I want to transition to an external jquery mobile page, but none event is getting trigger, when the transition is called:
jQuery("#test1").on("pagebeforeshow", function(event) {
WL.Logger.debug("pagebeforeshow: test1");
});
function loadHTML(){
$.mobile.pageContainer.pagecontainer("load", "./pages/test1/test1.html", {});
}
function openHTML(){
$.mobile.pageContainer.pagecontainer("change", "./pages/test1/test1.html", {});
}
and this is the content on my HTML :
<div data-role="page" id="test1">
<div data-role="content" style="padding: 15px"></div>
</div>
Is there any way to use any event?
To attach the pagebeforeshow handler to a page not loaded into the DOM yet, you must use event delegation:
https://learn.jquery.com/events/event-delegation/
jQuery(document).on("pagebeforeshow", "#test1" function(event) {...
Related
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.
I have disable ajax in jquery mobile mobileinit event.
but when i use $.mobile.changePage to load page, It still use ajax to load pages.
......
<script src="/Templates/js/jquery-1.8.0.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="/Templates/js/jquery.mobile-1.2.0.js"></script>
......
mobileinit works, just when i use $.mobile.changePage, it use ajax. I mean normal link isn't using ajax now, just when I call this function, ajax still be used
Had the same problem with
$.mobile.changePage( url );
with $.mobile.ajaxEnabled = false.
Had to use this instead.
window.location = url;
I am currently in the process of creating an MVC4 web application, and I seem to have run into a weird issue. I have created a unordered list with some list items in it, and their respective anchor tags, in which I am going to be able to click, that will return the respective /CONTROLLER/ACTION view.
<div>
<ul>
<li>
<a class="ajax" href="/Test/One"></a>
</li>
<li>
<a class="ajax" href="/Test/Two"></a>
</li>
<li>
<a class="ajax" href="/Test/Three"></a>
</li>
<li>
<a class="ajax" href="/Test/Four"></a>
</li>
</ul>
</div>
<div id="body">
</div>
I have then created some jQuery to call when you click either of the anchor tags, looking for a class of "ajax", and if you are to click the anchor tag, it will then run another function called GetContent, passing through the HREF value of the anchor tag, which will be used as the path for the ajax call.
$(document).ready(function () {
$(".ajax").click(function () {
var path = $(this).attr("href");
GetContent(path);
});
});
function GetContent(path) {
$.ajax({
url: path,
type: 'POST',
async: false,
success: function (result) {
$("#body").html(result);
}
});
}
I have heard of a function you can call, called preventDefault I believe. I am finding that I am not sure when to call this preventDefault to override the click of the anchor tag.
I did try placing it into a couple of places, but with no luck... I am finding at the moment I am able to click any of the anchor tags, and the default action occurs, it simply returns the whole website with the new view loaded. However if I open up the console in google chrome developer tools, and call the function GetContent, passing through the path I am expecting, it will then call the function, return the ajax, and update my web page.
If someone is able to point out where I am supposed to call the preventDefault function that would be great.
preventDefault is a method of event object. You get the reference to event object as first param of the click event handler…
$(".ajax").click(function (event) {
var path = $(this).attr("href");
GetContent(path);
event.preventDefault();
});
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'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>