I have problem with jquerymobile. When i load the same page again, the scripts loads again too and do not work. I would like to load the scripts only once. I use jquerymobile 1.3.2 and jquery 1.9.1. Here is my code.
#using Entry.Net.Web.Model
<div data-role="page" class="jqm-demos ui-responsive-panel" id="table_page" "data-theme="a">
<div data-role="header" data-position="fixed">
<a id="buttonObdobi" data-rel="popup" data-role="button" data-icon="grid" data-theme="a" data-position-to="window" data-transition="pop" data-inline="true">Období</a>
</div>
<div data-role="content">
#*my content*#
</div>
<script type="text/javascript">
$(document).on('pageinit', '#table_page', function () {
Log.Info('$(document).on(pagecreate, #table_page)');
$("#buttonObdobi").off("click").on("click", function () {
Log.Info('buttonObdobi click');
var model = $.parseJSON('#Html.Raw(Json.Encode(Model))');
var popup = '<div data-role="popup" id="popupMenuObdobi" data-theme="c">' +
'<a id="closePopup" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>' +
'<ul id="ulObdobiTable" data-role="listview" data-inset="true" style="min-width: 210px;" data-theme="a">';
$.each(model.ListObdobi, function (i, val) {
popup += '<li><a id="' + val + '">' + val + '</a></li>';
})
popup += '</ul></div>';
var popupafterclose = popupafterclose ? popupafterclose : function () { };
$.mobile.activePage.append(popup).trigger("create");
$.mobile.activePage.find("#closePopup").bind("tap", function (e) {
$.mobile.activePage.find("#popupMenuObdobi").popup("close");
});
$.mobile.activePage.find("#popupMenuObdobi").popup().popup("open").bind({
popupafterclose: function () {
Log.Info('bind popupafterclose');
$(this).unbind("popupafterclose").remove();
popupafterclose();
}
});
$('#ulObdobiTable a').off('click').on('click', function () {
$.mobile.changePage("#table_page", {
transition: "slide",
allowSamePageTransition: true,
data: { obdobi: $(this).attr('id'), ucet: '#Model.Account', type: '#Model.AccountType' }
});
});
});
});
</script>
Can you tell me what I'm doing wrong? Thank you very much!
Related
I have an app the uses the Progress JSDO to load data and, using the foreach method of the jsdo, append the data to three different lists in kendo collapsible panels depending on the status of one of the fields. For some reason, the lists are being appended twice in the code and I can't figure out why. I would appreciate another set of eyes on my code to help me get to the bottom of this mystery.
Here is the controller for the view (this is all wrapped in an IIFE with some other code, but this is the relevant section.):
app.scanBarcode = {
viewModel: new ScanViewModel(),
onShow: function () {
app.JSDOSession.addCatalog(app.JSDOSettings.catalogURIs);
app.locJSDO.fill();
$("#list-button").unbind().click(function () {
app.goToScanFail();
});
app.scanBarcode.getCurrentReport();
},
onHide: function () {
var reportJSDO = app.reportJSDO,
writeOutReport = app.scanBarcode.writeOutReport;
reportJSDO.unsubscribe('afterFill', writeOutReport);
},
getCurrentReport: function () {
var reportJSDO = app.reportJSDO,
writeOutReport = app.scanBarcode.writeOutReport;
//Fill the JSDO from db and call function to display the data
reportJSDO.subscribe('afterFill', writeOutReport);
reportJSDO.fill();
},
writeOutReport: function (jsdo, success, request) {
var date = app.getDate();
jsdo.foreach(function (report) {
var reportDate = report.data.STAMP_DT,
completed = "<span class='glyphicon glyphicon-ok'></span>",
notCompleted = "",
span;
if (reportDate == date) {
if (report.data.STAMP_TM == null) {
span = notCompleted;
$("#uncompleted-list").append(
"<li class='list-group-item'>" +
span + " " +
report.data.LOCATION_ID +
' ' +
report.data.LOCATION_NAME +
"</li>"
);
} else {
span = completed;
$("#completed-list").append(
"<li class='list-group-item'>" +
span + " " +
report.data.LOCATION_ID +
' ' +
report.data.LOCATION_NAME +
"</li>"
);
}
$("#all-list").append(
"<li class='list-group-item'>" +
span + " " +
report.data.LOCATION_ID +
' ' +
report.data.LOCATION_NAME +
"</li>"
);
}
});
}
}
This is the html for my view:
<div data-role="view" data-title="Scan Location" data-reload="true" data-layout="views-layout" data-model="app.scanBarcode.viewModel" data-show="app.scanBarcode.onShow" data-hide="app.scanBarcode.onHide">
<div class="col-xs-12 col-md-6 col-md-offset-3">
<h3 class="hassubtitle">Begin Scan:</h3>
<button class="btn btn-xlg btn-primary btn-block" data-bind="click: scan">Scan</button>
<button id="list-button" class="btn btn-lg btn-default btn-block">Skip</button>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div data-role="collapsible" id="completed-collapsible">
<h2>
Completed
</h2>
<div data-role="scroller" id="completed-list"></div>
</div>
<div data-role="collapsible" id="uncompleted-collapsible">
<h2>
Uncompleted
</h2>
<div data-role="scroller" id="uncompleted-list"></div>
</div>
<div data-role="collapsible" id="all-collapsible">
<h2>
All
</h2>
<div data-role="scroller" id="all-list"></div>
</div>
</div>
I'm the only web developer at my work and I have no one to ask here, so I really appreciate you all!
Can someone help me, what should I do to refresh the drop down list that appears on Remove Locations page. It is populated from localstorage.city.
Click on 'Open Panel' then click on Remove Locations. Here you will see a list of cities that I added by clicking on Add Locations button.
Delete some locations and then click on Remove locations button. You will notice that previously deleted locations still exists.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" /> <!-- came from cordova -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js" data-semver="2.1.3" data-require="jquery"></script>
<script>
var SectedCityCode, URL, prov;
$(document).bind('mobileinit',function(){
$.mobile.pushStateEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- <script src="js/cities.js"></script> -->
<script>
$(document).on("pagecreate", function() {
// Save settings
$( "#myPanel" ).panel({
beforeopen: function( event, ui ) {}
});
$( "#myPanel" ).on( "panelbeforeopen", function( event, ui ) {} );
$("#myPanel").on("panelclose", function(event, ui) {
if (typeof(Storage) !== "undefined") {
localStorage.adl = $("#checkbox-h-2a").is(":checked");
}
});
$('#btnDelCity').click(function() {
var list = '';
$("#delcity input:checkbox:not(:checked)").each(function() {
if (list == '')
list = $(this).val();
else
list = list + ',' + $(this).val();
});
//localStorage.clear();
localStorage.city = list;
alert(localStorage.city);
$.mobile.changePage("#home", { reloadPage: true });
//$.mobile.navigate( "#home" );
});
$('#btnRemoveCity').click(function() {
$.mobile.changePage("#delLocations", { reloadPage: true });
//$.mobile.navigate( "#home" );
});
});
</script>
</head>
<body>
<!-- Start of first page -->
div data-role="page" id="home">
<div data-role="panel" id="myPanel" data-display="overlay">
<!-- panel content goes here -->
<fieldset data-role="controlgroup" data-type="horizontal">
<input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
<label for="checkbox-h-2a">Auto Detect Location</label>
Add Locations
Remove Locations
</fieldset>
</div><!-- /panel -->
<div data-role="header">
<h1>Test</h1>
Open Panel
</div><!-- /header -->
<div data-role="content">
<div data-role="main" class="ui-content">
<p>content will go here</p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- end of first page -->
<div data-role="page" id="addLocations" data-cache="false">
<div data-role="header">
<h1>Add Locations</h1>
Home
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" id="citynames">
</ul>
</div>
<div data-role="footer">
<h1>Locations Footer</h1>
</div>
<script>
$(document).on('pagebeforecreate', '#addLocations', function(){
var cities = [{
"code": "s0000768",
"englishnames": "City 1"
}, {
"code": "s0000001",
"englishnames": "City 2"
}, {
"code": "s0000404",
"englishnames": "City 3"
}];
//bind cities to addLocations
cities.sort(function(a, b) {
return a.englishnames.localeCompare(b.englishnames);
});
$.each(cities, function(i, obj) {
$("#citynames").append("<li data-name='" + obj.englishnames + "'>" + obj.englishnames + "</li>");
});
/* delegation */
//localStorage.clear();
$("#citynames").on("click", "li", function() {
if (localStorage.city == '')
localStorage.city = $(this).attr('data-name');
else
localStorage.city = localStorage.city + ',' + $(this).attr('data-name');
alert(localStorage.city);
});
});
</script>
</div>
<div data-role="page" id="delLocations">
<div data-role="header">
<h1>Remove Locations</h1>
Home
</div>
<div data-role="main" class="ui-content">
<form id='delcity'>
</form>
</div>
<div data-role="footer">
<h1>Locations Footer</h1>
</div>
<script>
//$(document).on('pagebeforeshow', '#delLocations', function(){
$(document).on('pagebeforecreate', '#delLocations', function(){
if (typeof(Storage) !== "undefined") {
if (!(localStorage.city == '')){
alert("about to create checkboxes");
var savedCities = localStorage.city;
alert(savedCities);
var arr = [];
arr.length = 0;
$("#delcity").trigger('reset');
$("#delcity").empty();
arr = savedCities.split(',');
$.each(arr, function(i, val){
$("#delcity").append("<label><input id='chk" + i + "' type='checkbox' value='" + val + "'>" + val + "</label>");
});
$("#delcity").append("<a href='#delLocations' id='btnDelCity' class='ui-btn'>Remove</a>");
}
}
});
</script>
</div>
</body>
</html>
https://jsfiddle.net/dLsLo94r/13/
Joe
pagebeforecreate only runs once not each time you visit the page. For the delete page you can use pagebeforeshow to rebuild the list of cities each time you visit the page.
$(document).on('pagebeforeshow', '#delLocations', function() {
$("#delcity").empty();
if (typeof(Storage) !== "undefined") {
if (!(localStorage.city == '')) {
var savedCities = localStorage.city;
arr = savedCities.split(',');
$.each(arr, function(i, val) {
$("#delcity").append("<label><input id='chk" + i + "' type='checkbox' value='" + val + "'>" + val + "</label>");
});
$("#delcity").append("<a href='#delLocations' id='btnDelCity' class='ui-btn'>Remove</a>").enhanceWithin();
}
}
});
Then use event delegation for the click event on the delete button as it is created dynamically:
$(document).on("click", '#btnDelCity', function() {
var list = '';
$("#delcity input:checkbox:not(:checked)").each(function() {
if (list == '')
list = $(this).val();
else
list = list + ',' + $(this).val();
});
localStorage.city = list;
alert(localStorage.city);
$.mobile.navigate( "#home" );
});
Updated DEMO
I want to retrieve posts from my site web with JSON API, and I tried more codes but no data displaying. Where is the problem?
HTML:
<div data-role="page" id="searchPage" >
<div data-role="header" data-position="fixed">
<h1>News</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="searchFood"></ul>
</div>
JS:
$(document).on("pageinit", "#searchPage", function(){
$.getJSON("http://www.maan-lagh.com/?json=get_recent_posts", function(data){
var output = '';
$.each(data, function (index, value) {
output += '<li>' + value.title + '</li>';
});
$('#searchFood').html(output).listview("refresh");
});
});
When I click on RSS items in my mobile app, I would like to see same page footer as I have in my first page. I've created my app using Cordova 4.3.0, jQuery mobile and read RSS feeds using jQuery in my onDeviceReady() function in index.js file as follow:
onDeviceReady: function () {
$(function () {
$.get('http:myRssUrl.cshtml',function(data) {
var $XML = $(data);
var html = '';
$XML.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text(),
enclosure: $this.find("enclosure").attr('url'),
};
html +=
'<a class="result-link" title=" " style="text-decoration: none" href="' + item.link + '" style="font-size: 11px" >' +
'<div class="result-image">' +
' <figure>' +
'<img src="' + item.enclosure + '" style="display: block;"></img>' +
'</figure>' +
'</div>' +
'<div class="alltext" style="padding-right: 5px;">' +
'<h3 class="result-title">' + item.title +'</h3>' +
'<div class="result-description">' + item.description +'</div>' +
'</div></a>'
});
jQuery('#result').html(html);
});
});
app.receivedEvent('deviceready');
}
I also have my footer navigation bar in footer.html file which will be loaded in index.html file as follows:
<script>
$(document).on('pageinit', "#index", function (event, ui){
$("#" + event.target.id).find("[data-role=footer]").load("pages/footer.html", function(){
$("#" + event.target.id).find("[data-role=navbar]").navbar();
});
});
</script>
<body>
<div data-role="page" class="app" id="index">
<div data-role="header" data-position="fixed" data-id="main-header" id="header">
<div data-role="navbar" class="ui-btn-active ui-state-persist">
<ul>
<li>
</li>
<li></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content" data-theme="d" id="deviceready">
<div id="result" data-role="listview">
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="main-footer" id="footer">
</div><!-- /footer -->
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
My problem is that I can't load my page footer navbar in my RSS pages, I saw some relevant examples about it and applied different approaches, but still have the same problem.
each time I click on a Post link I want the Title of the Post to appear on the Header page. See screen shot
As seen, I would like the 'Devotional Message' replaced by the Post Title...
HTML Code:
<div id="devotionpost" data-role="page">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Devotional Message</h1>
Devotion
</div><!-- header-->
<div data-role="content">
<div id="mypost"> </div>
</div><!-- content -->
</div><!-- page -->
JS Code:
function showPost(id) {
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
});
function showPost(id) {
$("#devotionpost h1").html("");// to empty previous title
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
$("#devotionpost h1").html(data.post.title);// by this 'Devotional Message' replaced by the Post Title..
});