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.
Related
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) {...
I have managed to get the JQuery Modal dialog to show and within it, I load a partial view:
var url = '#Url.Action("ShowCarDetail", "Car")?id=' + id;
$('#dialog-modal').dialog(
{
title: "Car Detail",
width: 600,
height: 500,
draggable: false,
close: function (event, ui) {
$(this).dialog('close');
}
});
$('#dialog-modal').load(url, function()
{
$(this).dialog('open');
});
So that works fine. The problem is that when the dialog is closed, and I re-open it, the data is not refreshed. I have a DateTime on that partial view that tells me this so leaving it for a few seconds still shows me the old values.
how can I force the modal dialog to load correctly (without it using the old html that may have been rendered from the previous request)?
also - if the partial view has some actions like a submit or something, will the dialog still remain open or will this refresh the page fully? I want to be able to have that modal dialog similar to an iframe style where any actions that happen within the page in the modal will still be there and be updated without the page having a full refresh and the dialog closing.
thanks
Regarding your question:
also - if the partial view has some actions like a submit or
something, will the dialog still remain open or will this refresh the
page fully? I want to be able to have that modal dialog similar to an
iframe style where any actions that happen within the page in the
modal will still be there and be updated without the page having a
full refresh and the dialog closing.
The page will be refreshed fully with a normal form. To achieve what you describe, use an ajax form which does a post to a controller method and returns a partial view. Then have a success callback for the ajax form, which would replace the contents of a div (within the open dialog) with the response content (which would be the partial view returned from the post).
Simplified example...
View:
<div id="dialog-modal">
<p>Some optional static content here (within the dialog)
that should not change when the form is submitted.</p>
<div id="dialog-content">
#using (Html.BeginForm("MyAction", "MyController", null, FormMethod.Post, new { #id="MyForm" }))
{
#Html.EditorFor(x => x.Foo)
<input type="submit" value="OK" />
}
</div>
</div>
Controller:
[HttpPost]
public ActionResult MyAction(MyModel model)
{
// Do some stuff here with the model if you want
MyNewModel newModel = new MyNewModel();
return PartialView("_MyPartialView", newModel);
}
JavaScript:
$(function () {
$('#MyForm').submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (xhr) {
$('#dialog-content').html(xhr);
}
});
return false;
});
});
Note that this implementation will replace the form, so you could put the form outside the div that gets replaced if needed, or have a different form in the partial view that gets returned if you want different forms submitted within the dialog in series. It's flexible to tweak to your needs. It also will not close the dialog until you explicitly call close on it, or affect any content outside of the replaced div's content. Hope this helps!
How does one go about displaying a controller action inside of jquery modal dialog?
Firstly you'll need your Javascript to load a url via ajax, this will depend on which kind of modal you are using etc, there's a ton of libraries out there. I will assume you are using the basic JQuery UI dialog Modal.
Example Link
<!-- this points to your action below.. -->
<a class="some-link" title="title here" href="mycontroller/test">testing</a>
Example Javascript (quick example found on google, many examples out there..)
$(document).ready(function() {
$('.some-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
});
});
});
Now you need to make sure your action doesn't render the main layout when providing the content for the modal via the ajax request.
Here's a really simple method of doing that by replacing the base layout with an empty view for ajax requests. This isn't the best method but it's the simplest for this case ;)
Example Action
public function testAction()
{
if($this->getRequest()->isXmlHttpRequest()) {
$this->layout('application/layout/ajax-layout');
}
return new ViewModel(array()); // ..
}
application/layout/ajax-layout.phtml
<?php echo $this->content ?>
I think you want this kind of code http://jqueryui.com/dialog/#modal-message
inside the just display your action
Otherwise it's about to open an url into your modal it's like that http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
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);
});
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
});