I have a multi-page template set up. The first page has a set of links to the inner pages - however all but one link to the same #template page which loads data dynamically. The other link is to a form which I have built within the page.
Problem I'm having is when you navigate to one of the links, continue through the pages and then use the back button to get back to the first page, if you then click the link to the form it doesn't navigate to the #page, it goes to the last page you were on in the other links.
Hope that makes sense - maybe a diagram will make it clearer
home > product list > product detail
product detail > product list > home (back button)
home > contact form
This last step shows the product detail page again, instead of the contact form. It's as if it's not clearing the page out:
My code (truncated for clarity):
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
});
$(document).delegate("#pageDetail", "pagecreate", function () {
$(this).css('background', '#ECF2FE');//`this` refers to `#pageDetail`
});
$(document).bind("pagebeforechange", function (e, data) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if (typeof data.toPage === "string") {
$.mobile.pageData = (data && data.options && data.options.pageData) ? data.options.pageData : null;
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var page;
var type;
var cat;
if ($.mobile.pageData && $.mobile.pageData.type) {
type = $.mobile.pageData.type;
}
if ($.mobile.pageData && $.mobile.pageData.cat) {
cat = $.mobile.pageData.cat;
}
if ($.mobile.pageData && $.mobile.pageData.page) {
page = $.mobile.pageData.page;
}
var url = $.url(data.toPage); // page url
var hash = url.fsegment(1).replace(/&.*/, ""); // nav hash for page holder
switch (hash) {
case "pageList":
$.ajax({
url: "http://localhost/myapp/" + type + ".aspx?type=" + type,
datatype: "html",
success: function (data) {
$('.submenu').html(data);
$('.title').html(type);
$('.submenu').trigger('create');
}
});
break;
case "pageDetail":
$('.detail').load('http://localhost/myapp/' + type + '.aspx?page=' + page + '&type=' + type + ' #contentdiv', function () {
$(this).trigger('create');
});
break;
default:
break;
}
}
});
</script>
</head>
HTML bits
<body>
<div data-role="page" id="home">
<div data-role="content">
<img src="images/Icon-Courses.png" alt="courses" /><br />
<img src="images/Icon-Contact.png" alt="contact" />
</div>
</div>
<div data-role="page" data-theme="a" id="pageList" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Products</h1>
</div>
<div data-role="content" class="submenu">
<!-- content gets put in here -->
</div>
</div>
<div data-role="page" data-theme="a" id="pageDetail" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Products</h1>
</div>
<div data-role="content" class="submenu">
<!-- content gets put in here -->
</div>
</div>
<div data-role="page" data-theme="a" id="contactForm" data-add-back-btn="true" class="detailpage" style="background-color:#F0F0F0 !important;">
<div data-role="header" data-position="fixed">
<h1 class="title">Contact Us</h1>
</div>
<div data-role="content" class="detail">
<div id="contentdiv" style="margin:10px auto;width:90%;">
<label for="name">Your Name</label>
<input type="text" id="name" style="width:90%;" data-mini="true" />
<label for="email">Email Address</label>
<input type="text" id="email" style="width:90%;" data-mini="true" />
<label for="phone">Phone Number</label>
<input type="text" id="phone" style="width:90%;" data-mini="true" />
<label for="comments">Enquiry / Comments</label>
<textarea id="comments" rows="80" style="width:90%;" data-mini="true"></textarea>
<br />
<input type="submit" id="submit" value="Send Enquiry Now" />
</div>
</div>
</div>
</body>
</html>
I'm using the jqm.page.params.js for handling the querystring parameters.
Is there anything obvious there? The links to the #pageDetail page are returned within the content shown on #pageList.
Don't understand why I can't seem to clear the cache and it doesn't navigate correctly to the contact form if you've been anywhere else first. if you go straight there it works fine.
Anyone shed any light? BTW this needs to work using PhoneGap as a standalone
Thanks
Actually feel a bit dim about this, but it's because I had the same class names on multiple divs and it was using those to import data - so when it was loading data remotely it was putting it in more than one place, overwriting the form at the same time...
Related
This is the video of the bug http://youtu.be/siOfUluPraA
and below is my code.
It seems that
ng-show=true for a split second
signinForm.$submitted = true for a split second
Login.html
<ion-view>
<ion-content ng-controller="SignInCtrl">
<div class="login-logo">
<div><h4>LOGIN TO YOUR ACCOUNT</h4></div>
</div>
<form name="signinForm" novalidate>
<div class="list login">
<!-- input username -->
<label class="item item-input item-top"
ng-class="{'form-has-error' : signinForm.username.$invalid && signinForm.username.$submitted}">
<img src="./img/profile6.png" class= "image-thumb" alt="">
<input type="text"
name="username"
ng-model="user.username"
ng-minlength="5"
required placeholder="Name or National Id">
</label>
<!-- validation username -->
<div class="form-errors"
ng-show="signinForm.username.$error && signinForm.$submitted"
ng-messages="signinForm.username.$error"
ng-messages-include="templates/formerrors/form-errors-username.html">
</div>
</div>
</form>
</ion-content>
</ion-view>
form-errors-username.html
<div class="form-error" ng-message="required">This field is required.</div>
<div class="form-error" ng-message="minlength">This field is must be at least 5 characters.</div>
config.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/login.html',
controller: 'SignInCtrl'
});
$urlRouterProvider.otherwise('/sign-in');
});
What is the best practice?
Thanks in advance!
***** UPDATE *****
I used ng-if="signinForm.$submitted"
instead of ng-show.
Your HTML template is briefly displayed by the browser in its raw (uncompiled) form, while your application is loading.
You can try to use ngCloack to avoid the flicker effect.
<div ng-show="form.$submitted" ng-cloak>
Here's how I fixed it, I used
ng-if="signinForm.$submitted"
instead of ng-show.
Basically the use case is this:
I have a form that the user is filling out a form and accidentally click another link. In the pagebeforehide event, I want to stop the navigation. I tried to do
event.stopPropagation();
event.preventDefault();
but neither of them stop the navigation from happening. Does anyone have any idea how to do this? It's not immediately clear how to handle this.
event.preventDefault(); should work if all your code is in the right places. Here is a simple example:
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<label for="text-basic">Type 1 to allow navigation:</label>
<input type="text" name="text-basic" id="text-basic" value="" />
<br /><br />
<a class="ui-btn" href="#page2">Go to page 2</a>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page 2</h1>
</div>
<div role="main" class="ui-content">
page 2
<a class="ui-btn" href="#page1">Go back to page 1</a>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
</div>
I have 2 pages and only want the user to go to page 2 if he/she types "1" into the text box.
$(document).on("pagecreate", "#page1", function(){
$( "body" ).on( "pagecontainerbeforetransition", function( event, ui ) {
var currPage = $( "body" ).pagecontainer( "getActivePage" ).prop("id");
if (currPage == "page1"){
var val = $("#text-basic").val();
if (val != "1") {
alert("you must enter 1 in the text box!");
event.preventDefault();
} else {
$("#text-basic").val("");
}
}
});
});
In the pagecontainer widget pagecontainerbeforetransition event, I see which page we are currently looking at, if it is page1, then check what the user has entered in the textbox. If I do not find the string "1", prevent navigation and alert the user.
Here is a working DEMO
JQM AJAX navigation doesn't work well when navigating to a page with an in-page dialog?
page1.aspx:
<div data-role="page">
<div data-role="header">Page 1</div>
<div data-role="content">
<a href='page2.aspx'>Click here</a>
</div>
</div>
page2.aspx:
<div data-role="page">
<div data-role="header">Page 2</div>
<div data-role="content">
Popup
</div>
</div>
<div data-role="dialog" id='popup'> <!-- This is not loaded on AJAX navigation -->
<div data-role="header">Page 2 Popup</div>
<div data-role="content">
Popup content
</div>
</div>
When you click the link from Page 1, it doesn't load the <div data-role='dialog'> of Page 2.
How do you get around this issue?
There is a workaround here. I modified it a little:
$(document).bind('pagecontainerload', function (event, ui) {
// Find all dialogs in the DOM
var response = ui.xhr.responseText;
var data = $(response).find("div[data-role='dialog'],div[data-role='popup']");
for (var i = 0; i < data.length; i++) {
var node = data.eq(i);
if (node.attr('id') && document.getElementById(node.attr('id')))
$('#' + node.attr('id')).remove(); // Delete existing one
node.addClass('cache').appendTo('#form1'); // or appendTo('body')
}
});
I added the class cache for cleanup purpose.
I have two tabs with a submit button on each tab. When the button is clicked, I need to reload the content of that specific tab to get updated data from the server.
if (validStatus()) {
$.ajax({
//...
success: reloadTab
});
}
function reloadTab() {
var currentTab = $("#tabs").tabs("option", "active");
alert(currentTab);
$('#tabs').tabs('select', currentTab);
alert(currentTab);
}
When the button is clicked, the tab doesn't refresh. I see the first alert but not the second.
HTML is as follows:
Head:
<link rel="stylesheet" href="#this.Url.Content("//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css")" />
<script>
$(function () {
$("#tabs").tabs();
});
</script>
Body:
<div id="tabs">
<ul>
<li>The first tab</li>
<li>the second tab</li>
<li>Success</li>
</ul>
<div id="Success">
testing
</div>
<div id="Tab1">
<fieldset >
<legend>Overview</legend>
<input type="button" id="submit1" value="submit" />
<br />
</fieldset>
<fieldset style="width: 700px;">
<legend>Overview</legend>
<div>
<table >
//updated with ajax
</table>
</div>
</fieldset>
<script>
//reloadTab is in here
</script>
</div>
<div id="Tab2">
<fieldset style="float:left; width:300px;">
<input id="submit2" type="button" value="submit"/>
</fieldset>
<fieldset style="float:left;">
<legend>Overview</legend>
<table>
//updated with ajax
</table>
</fieldset>
<script>.....</script>
</div>
Turns out tabs.('select', ...) is deprecated, using tabs.('option', 'active', index) fixed my issue. Solution found in this comment: https://stackoverflow.com/a/16033969/1463649
Do you see anything in the console of your browser? What browser are you using?
Try this to help you with the debugging.
function reloadTab() {
console.log($('#tabs')); // if this is an empty object, the element doesn't exist when you call this function
console.log($('#tabs').tabs()); // if this doesn't return 'function', you haven't included a library properly, maybe jquery ui, or jquery, or you're using an old version or something
console.log(currentTab); // if this is undefined then something went wrong and no tab is active
var currentTab = $("#tabs").tabs("option", "active");
alert(currentTab);
$('#tabs').tabs('select', currentTab);
alert(currentTab);
}
Im using the jQuery Mobile Filter List:
http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html
Is it possible to move the position of the input field so I can put it into a div already on my page?
Using jQuery's appendTo seems to work fine but its kind of a hacky solution. Thanks
this is what I found while searching for solution to a similar problem.
HTML code example:
<div data-role="page" id="page-id">
<div data-role="content">
<div data-role="fieldcontain">
<input type="search" name="password" id="search" value="" />
</div>
<div class="filter-div" data-filter="one">1</div>
<div class="filter-div" data-filter="two">2</div>
<div class="filter-div" data-filter="three">3</div>
<div class="filter-div" data-filter="four">4</div>
<div class="filter-div" data-filter="five">5</div>
</div>
</div>
JS code example:
$(document).delegate('#page-id', 'pageinit', function () {
var $filterDivs = $('.filter-div');
$('#search').bind('keyup change', function () {
if (this.value == '') {
$filterDivs.slideDown(500);
} else {
var regxp = new RegExp(this.value),
$show = $filterDivs.filter(function () {
return ($(this).attr('data-filter').search(regxp) > -1);
});
$filterDivs.not($show).slideUp(500);
$show.slideDown(500);
}
});
});
This way you can place your input text box anywhere on your page and it should properly filter a list of items you want.
JSFiddle DEMO: http://jsfiddle.net/cZW5r/30/