How to refresh div with updated php code in jQuery Mobile? - javascript

Within a jQuery Mobile page, I have a div which needs to be refreshed after a php mysql JSON call is made. This call updates the number of entries in a database. This update needs to be displayed within the div. I searched stackoverflow and found .listview("refresh"), .trigger("create") and other potential solutions but could not get to work. I think .listview("refresh") is not applicable since I am not using a list.
The main page has two mobile pages within it #outerwrap0 and #outerwrap1:
<html lang="en">
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="models/site-templates/themes/whiteBackNavy.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/shuffleMainJplayerJQM1.1.js"></script>
</head>
<body>
<!--*** PAGE 0 ***-->
<div data-role="page" id='outerwrap0' class="outerwrap" data-url="/account_m.php">
<div class="mineBox">
... php ...
</div
</div
<!--*** PAGE 1 ***-->
<div data-role="page" id='outerwrap1' class="outerwrap" data-url="/account_m.php">
<div class="mineBox">
... php ...
</div
</div
the applicable portion of the shuffleMainJplayerJQM1.1.js javascript, wherein the php is updated and code should be called to refresh the div is:
$(".adder").click(function() {
$.ajax({
url: 'AddToMine1.2.php?id=' + currentId,
type: 'POST',
dataType:'json',
success : function (result) {
var errorCode = (result['errorCode']);
switch (errorCode) {
case 0: alert(result['errorMess']);
break;
case 1: alert(result['errorMess']);
break;
case 2: break;
}
},
error : function () {
alert("error");
}
});
// not working - would like to refresh mineBox div here
$(".mineBox").trigger("create");
});
Here is the contents of .mineBox after rendering:
<div class="mineBox">
<p align=center>
<img src="../images/mine_block_full.jpg" width="14%" align="absmiddle" />
</p>
<p align=center><img src="../images/mine_block_full.jpg" width="14%" align="absmiddle" />
</p>
<div data-role="popup" id="popupMenuPM1" data-theme="a" data-overlay-theme="a">
<ul data-role="listview" data-inset="true" >
<li data-role="divider" data-theme="a">Be</li>
<li>Play</li>
</ul>
</div>
<div data-role="popup" id="popupMenuPM2" data-theme="a" data-overlay-theme="a">
<ul data-role="listview" data-inset="true" >
<li data-role="divider" data-theme="a">Want Girl</li>
<li>Play</li>
</ul>
</div>
</div>
Your assistance is greatly appreciated. Thank You!

Related

Javascript only running on first view (first page) - jQuery Mobile

Possible related error from firebug: ... Cannot call methods on listview prior to initialization; attempted to call method 'option'
I am making this app that requires you to type the answer of a certain ´level´ to go to the next one. The answer is in a list and should only display on exact match for the search. Below is my html for the first two pages and my javascript for hiding the answer untill exact match is provided.
However it ONLY works on the first view (page) and doesn´t work on the second, third, fourth and so on! I really spent a loooong time trying to fix this and I am lost. The only thing that worked for me so far was a prefetch-data="true", but it only works to some extent and stops working after page 3. Other then that I´ve tried to implement many solutions I found here and there but none do what I want. I hope there is some simple thing I am doing wrong.
Why does the script only run on the first view and how do I fix it?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>PARestaurant</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="style" href="images">
<style type="text/css"></style>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- Page Index
Home Page
Level Two
Level Three
Level Four
-->
<!-- -----------------------------------------------------------Home Page----------------------------------------------------------- -->
<div data-role="page" id="232114125125124124" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2>Ready when you are!</h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true"
data-filter-reveal="true" data-inset="true"
data-filter-placeholder="">
<li data-filtertext="Green">You are a genius!</li>
</ul>
</div>
</div>
<div id="blue"></div> <h2>+</h2> <div id="yellow"></div>
</div>
<div data-role="footer" align="center">
<h1>Level 1</h1>
</div>
</div>
<!-- -----------------------------------------------------------Level Two----------------------------------------------------------- -->
<div data-role="page" id="32432532462362345325235235" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2> You know what to do! </h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true" data-filter-placeholder="">
<li data-filtertext="Level 1">Click me to go back!</li>
<li data-filtertext="Level 3">Up you go!</li>
<li data-filtertext="Level 4">You have to struggle a bit</li>
<li data-filtertext="Level 5">Not so fast</li>
<li data-filtertext="Level 6">No No NO!</li>
<li data-filtertext="Level 7">Stop it...</li>
</ul>
</div>`enter code here`
<div><p>Where do you wanna go?<p></div>
</div>
</div>
<div data-role="footer" align="center">
<h1>Level 2</h1>
</div>
</div>
JAVASCRIPT BELOW
exactMatch = function( text, searchString ) {
return !( text.toLowerCase() == searchString );
};
$(function () {
$(".whatever").listview('option', 'filterCallback', exactMatch);
});
}
Instead of
$(function () {...
Try something like this:
$(document).on( "pageinit", function( e ) {
$(e.target).find(".whatever").listview('option', 'filterCallback', exactMatch);
});
pageinit runs once as each page you visit is initialized for the first time.

How to create a simple iOS type Table View using HTML / Twitter Bootstrap / Jquery Mobile etc

I know Objective-C, but I am very new to HTML/jQuery/JS.
I want to create a Table view using these.
Can anyone assist me by showing me how to do this? Although I was able to create a static Table view using below code.
I am now stuck unsure of how to fill it with an Array.
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap : Grids using Bootstrap </title>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
.demog {
background:#444;
color:#ffffff;
padding:10px;
height:80px;
margin-left: 0 ;
margin-bottom:1px;
text-align:left;
}
</style>
<body>
<div data-role="page" id="table">
<div data-role="header" data-add-back-btn="True" data-back-btn-text="Return">
<h1>Table</h1>
<a href="dashboard.html" class="ui-btn-left" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
<div class="bootstrap-demo">
<div class="row ">
<div class="col-md-1"><p class="demog">value 1 <br><br>Thdepiof fu utoiurotiurotpu oiturou</p></div>
<div class="col-md-1"><p class="demog">Value 2</p></div>
<div class="col-md-1"><p class="demog">Value 3</p></div>
<div class="col-md-1"><p class="demog">Value 4</p></div>
<div class="col-md-1"><p class="demog">Value 5</p></div>
<div class="col-md-1"><p class="demog">Value 6</p></div>
<div class="col-md-1"><p class="demog">Value 7</p></div>
<div class="col-md-1"><p class="demog">Value 8</p></div>
<div class="col-md-1"><p class="demog">Value 9</p></div>
<div class="col-md-1"><p class="demog">Value 10</p></div>
<div class="col-md-1"><p class="demog">Value 11</p></div>
<div class="col-md-1"><p class="demog">Value 12</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
For JQuery, a dynamic tableview implementation is pretty straightforward. You can replace your 'row' div with something like this:
<ul data-role="listview" id="itemslist" data-autodividers="true">
</ul>
where the last attribute is optional if you don't want sub-headers.
Then you can populate the list with javascript like this, where 'data' is a JSON array of 'item' objects:
function updateList(data, listId, target) {
// called to populate list
$(listId).empty();
$.each(data, function(i, item) {
$(listId).append('<li><h3>' + item.title + '</h3></li>');
});
$(listId).listview().listview('refresh');
}
The list can be populated on any of the page events (e.g. pageinit, pageshow, pagebeforeshow), as in the below example. Note that some page events are deprecated in JQuery Mobile 1.5, in favor of pagecontainer events.
$(document).on('pageinit', '#main', function(){
updateList(allitems, '#itemslist', '#itemdetail');
$('#itemslist').on('click', 'a', function(e) {
// store selected item into global variable for use on detail page
curItem = this.id;
});
});
Here's a complete working example, with data:
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html lang=en>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- JQuery dependencies -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
var allitems = [
{"title":"first item",
"description":""
},
{"title":"second item",
"description":""
},
{"title":"third item",
"description":""
},
{"title":"fourth item",
"description":""
}
];
$(document).on('pageinit', '#home', function(){
updateList(allitems, '#itemslist', '#itemdetail');
$('#itemslist').on('click', 'a', function(e) {
// store selected item into global variable for use on detail page
curItem = this.id;
});
});
function updateList(data, listId, target) {
// called to populate list
$(listId).empty();
$.each(data, function(i, item) {
$(listId).append('<li><h3>' + item.title + '</h3></li>');
});
$(listId).listview().listview('refresh');
}
</script>
<title>List demo</title>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>List demo</h1>
</div>
<div data-role="main" class="ui-content">
<div>
<ul data-role="listview" id="itemslist">
</ul>
</div>
</div>
</div>
</body>
</html>

jQuery Mobile with Ajax call to remote server not working

I am trying the following code to call .asmx webserivce, however, its returning [object Object]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<link rel="stylesheet" href="icon.css" type="text/css">
<script type="text/javascript" charset="utf-8" src="js/wormhole.js"></script>
<script type="text/javascript">
document.addEventListener(
"backbutton",
function()
{
mosync.app.exit();
},
true);
$(document).bind("mobileinit",function(){
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.allowCrossDomainPages=true;
$.support.cors= true;
});
$(document).ready(function(e) {
$.ajax({
url: 'http://webservice.gkg4.com/Test.asmx/HelloWorld',
type: 'POST',
crossDomain: true,
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function(result){
alert(result);
},
error: function(result){
alert(result);
}
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<img src="image/png/chat.png" alt="image">
Menu
<div data-role="popup" id="popupPanel" >
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="b">
<li data-role="divider" data-theme="a">Menu</li>
<li>About Us</li>
<li>Contact Us</li>
<li><a href="#" id="chat" rel="external" >Live Chat</a></li>
<li>Exit</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="b">
<div style="text-align:center">
</div>
<h4><center> Member's Login</center></h4>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="left">
</div>
</div>
</div>
</body>
</html>
The URL for webservice is live so you can check the same at your end.
Any help appreciated.
Code in in document.Ready section
Is the page where you are calling from also from webservice.gkg4.com? If not, it is illegal to call ajax from a different domain, and the alert that you are seeing is actually from the error handler.
Another problem is that the contentType is json, whereas the web service is returning XML.

Dojo Dijit TimeTextBox Not Working When Pulled Into Page With AJAX

I have one main page with menu buttons. When clicked, they change the main "content" area with AJAX. In the header of this page I have all of the appropriate Dojo references.
I know the AJAX works because i have successfully pulled in and displayed data in the content area, and I know the Dojo Dijit TimeTextBox works because I have successfully displayed it before I make any calls with AJAX.
When I try to make a call with AJAX and pull in new input fields for the TimeTextBox widget, they display only as regular text boxes, and seem to ignore the fact that I have them set to be the TimeTextBox.
Can anyone tell me how to fix this issue?
EDIT:
Here is the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Admin Page</title>
<link rel="stylesheet" type="text/css" href="styles/adminPage.css" />
<link rel="stylesheet" type="text/css" href="styles/adminStyle.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css">
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TimeTextBox");
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
require(["dojo/ready", "dijit/form/TimeTextBox"],
function(ready, TimeTextBox){
ready(function(){
new TimeTextBox({name: "timeInput", value: new Date(),
constraints: {
timePattern: 'HH:mm:ss',
clickableIncrement: 'T00:15:00',
visibleIncrement: 'T00:15:00',
visibleRange: 'T01:00:00'
}
}, "timeInput");
});
});
function getPage(page)
{
$.ajax({
url: "admin"+page+".php",
type: "POST",
cache: false,
success: function (html) {
$('#content').html(html);
$('#content').fadeIn('slow');
}
});
}
</script>
</head>
<body class="claro">
<div id="container">
<div id="header">
<span class="headerTitle">Lehman Nursery</span>
</div>
<div id="content">
<input type='text' name='date1' id='time1' value='T15:00:00'
data-dojo-type='dijit.form.TimeTextBox'
required='true' />
</div>
<div id="menu">
<a onclick="getPage('Home')">
<div id="homeButton" class="menuAppearance">
<img src="images/icons/home.png"/><br />
</div>
</a>
<a onclick="getPage('Links')">
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/links.png"/><br />Links</div>
<div class="description">
</div>
</div>
</a>
<a onclick="getPage('Hours')">
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/pictures.png"/><br />Pictures</div>
<div class="description">
</div>
</div>
</a>
<a onclick=getPage('Events')>
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/events.png"/><br />Events</div>
<div class="description">
</div>
</div>
</a>
<a onclick=getPage('Feedback')>
<div class="button menuAppearance">
<div class="menuTitle"><img src="images/icons/feedback.png"/><br />Feedback</div>
<div class="description">
</div>
</div>
</a>
</div>
</div>
</body>
<form>
<input type="text" name="date1" id="time1" value="T15:00:00"
data-dojo-type="dijit/form/TimeTextBox"
onChange="require(['dojo/dom'], function(dom){dom.byId('val').value=dom.byId('time1').value.toString().replace(/.*1970\s(\S+).*/,'T$1')})"
required="true" /></form>
^^That is the data being pulled in
Are the css files for those dijits pulled up? You might want to require them at the beginning (when the page loads) which get cached and will be used when the dijits are pulled via AJAX.
EDIT: Not sure but can suggest you try to add startup() call for the widget you created.
it apears to me like you are forgoetting to call:
dojo.parser.parse();
after setting the content i your ajax call. it should look like this:
function getPage(page)
{
$.ajax({
url: "admin"+page+".php",
type: "POST",
cache: false,
success: function (html) {
$('#content').html(html);
dojo.parser.parse();
$('#content').fadeIn('slow');
}
});
}
the dojo parser will not execute by itself, it is too resourses expensive to do that, so each time the content changes so you add a dijit you moust call dojo.parser.parse();

jQuery Mobile - listview data-inset on refresh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$("#local").live('pageinit', function(evt) {
//$(document).ready(function(){
var edit = $('#edit');
edit.append('<li>test1</li>');
edit.listview('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#local">
<h3 class="ui-li-heading">Local Storage Test</h3>
<p class="ui-li-desc">Just a test</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="local">
<div data-role="content">
<ul id="edit" data-role="listview" data-inset="true">
<li>ntry already there. Append works...</li>
</ul>
</div>
</div>
</body>
</html>
So my problem is on the second page. I just added a new element and update the list view just to load the css jqm.
But if I use everything that is good pageInit except round the corners of the list view (data frame = "true"). He did not appear rounded, but I checked the css load, and should be all year. But when used document.ready everything is fine. Round the corners of the list view!
Please help me because I do not want to use document.ready.
$("#local").live('pagecreate', function (evt) {
var edit = $('#edit');
edit.append($('<li>test1</li>'))
});
Try replacing above code peace

Categories