My code will work if use this:
for(i=0; i<listUsers.length; i++){
if(listUsers[i] != usr){
$( "#listHisUser" ).append('<li>'+listUsers[i]+'</li>').listview('refresh');
}
}
function getChatContent(){
alert("data");
}
but if I change it to this:
for(i=0; i<listUsers.length; i++){
if(listUsers[i] != usr){
$( "#listHisUser" ).append('<li>'+listUsers[i]+'</li>').listview('refresh');
}
}
function getChatContent(data){
alert(data);
alert("data");
}
It gets error: ReferenceError: Can't find variable: tqminh at file:///android_asset/www/index.html#hist:1 where tqminh is a listview item which I clicked.
<!-- History -->
<div data-role="page" id="hist" data-title="HISTORY">
<div id="a" data-role="header" data-theme="b">
<h1 style="text-align: left;font-size: 20px">History Chat</h1>
</div>
<div data-role="content" data-inset="true">
<ul data-role="listview" data-theme="c">
<li>tqminh</li>
</ul>
</div>
</div>
Your function parameter is not rendered as string. try to replace
'+listUsers[i]+'
with
'+listUsers[i]+'
Related
I want to navigate to a website's page on the tap event.But I am not sure how to pass a link in the function.
Please suggest !!
<div data-role="page">
<div data-role="header">
<h1>My Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="first">
<li>Go Beyond 140 Characters</li>
</ul>
</div>
</div>
<script>
$("#first").bind("tap", function(e) {
});
</script>
Maybe something like:
$("#first").bind("tap", function(e) {
window.location.href = "http://www.tricksfind.in/2014/09/twitlonger-go-beyond-140-characters-in.html";
});
Hope it helps!
i am newly working for jquery mobile panels, i have tried the reference of this jsfiddle link here http://jsfiddle.net/Gajotres/vds2U/47/ , i just added jquery ajax call to parse xml data. My problem is after searching city and keyword in page1, ajax call shows success alert but not trigger to page2. I want to display data in page2. If i click on page2 in jquery panel it appends the searched data. What wrongs here If any changes need to do please help me. My code is like below:
html code:
<div data-role="panel" data-display="push" data-theme="b" id="nav-panel" data-position="left">
<h2> All Pages </h2>
<ul data-role="listview" data-icon="false">
<li data-icon="delete">Close menu</li>
<li>Main panel page</li>
<li>page 1 page</li>
<li>page 2 Page</li>
</ul>
</div>
<div data-role="page" id="panel-main" data-title="Panel main" data-theme="a" >
<div data-role="header" data-position="fixed">
<h1 id="header1">main panel</h1>
Menu
</div>
<div role="main" class="ui-content"">
<p id="para1">main panel</p>
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>page 1</h1>
Menu
</div>
<div data-role="main" class="ui-content">
<div class="text"><input type="text" id="p1" name="p1" placeholder="Location...." class="user-text1 textboxes" data-clear-btn="true" data-mini="true" />
</div>
<div class="height"></div>
<div class="text"><input type="text" id="p2" name="p2" placeholder="Term...." class="user-text2 textboxes" data-clear-btn="true" /></div>
<div class="height"></div>
<button type="submit" id="searchBtn" data-theme="f" data-corners="false"/>Search Events</button>
</div>
</div>
<div data-role="page" id="page2" data-theme="a" >
<div data-role="header" data-position="fixed">
<h1>page 2</h1>
Menu
</div>
<div data-role="main" class="ui-content">
<ul id="list" data-role="listview" data-icon="false" data-autodividers="true" data-theme="c"></ul>
</div>
</div>
<script>
$(function () {
$("[data-role=panel]").enhanceWithin().panel();
});
javascript code:
$(document).ready(function(){
$("#searchBtn").bind("click",function(){
// alert('success');
$.mobile.loading('show');
var p1=$("#p1").val();
var p2=$("#p2").val();
$.ajax({
type: 'GET',
url:"http://api2.yp.com/listings/v1/search?searchloc="+p1+"&term="+p2+&format=xml&key=5cbqjx3cdl",
dataType: "xml",
success: function(data){
//alert('success');
$(data).find("searchListing").each(function(){
var name=$(this).find("businessName").text();
var id=$(this).find("listingId").text();
window.location.href="#page2";
//$.mobile.changePage("#page2");
$.mobile.loading('hide');
$("#list").append('<li>name:'+ name +'</li>');
$("#list:visible").listview("refresh");
});//ajax ends
});
});
Use the jQM pagecreate instead of $(document).ready, then in the success function, append the new items to the list, navigate to page2 using pagecontainer("change"), then refresh the list:
$(document).on("pagecreate", "#page1", function(){
$("#searchBtn").on("click" ,function(){
// your AJAX code
success: function(data){
//alert('success');
$(data).find("searchListing").each(function(){
var name=$(this).find("businessName").text();
var id=$(this).find("listingId").text();
$.mobile.loading('hide');
$("#list").append('<li>name:'+ name +'</li>');
$("body").pagecontainer( "change", "#page2", {} );
$("#list").listview("refresh");
});
});
});
Simplified DEMO
I have left the AJAX out of the demo. I am just appending 3 items and then changing page.
I am having an issue with the jQuery mobile's loadPage() method. I am using the method to load a popup container. When the page gets loaded, the #popup DIV is empty (no .header, .content, or .footer DIVs) when I inspect it. Am I doing something wrong?
HTML (popup.php)
<div id="popup" data-role="popup" data-overlay-theme="a">
<div class="header" data-role="header">
<h1>Title</h1>
</div>
<div class="content" data-role="content" data-iscroll>
Something.
</div>
<div class="footer" data-role="footer">
<a class="close" href="#" data-rel="back" data-role="button" data-inline="true" data-mini="true">Close</a>
</div>
</div>
JavaScript
$(document).on('pagecreate', '.find-page', function() {
// load popup once
if (!$('#popup').length) {
$.mobile.loadPage('popup.php', { changeHash: false });
}
});
Hi I have the following page
<div data-role="page" id="blockedusers">
<?php
include 'homeheader.php';
?>
<div data-role="header">
Log Uit
<h1>Blocklijst</h1>
</div><!-- /header -->
<div data-role="content">
<div class="grid_outer" id="grid_outer_blocklist" style="width: 295px; margin-left: auto; margin-right: auto;">
<div class="grid_inner" id="grid_inner_blocklist">
<h2 class="h2_header">Geblokkeerde gebruikers</h2>
<?php
show_blocked_users($blockedusers);
?>
</div>
</div>
</div>
<div data-role="navbar">
<ul>
<li>
terug
</li>
</ul>
</div><!-- /navbar -->
<div data-role="footer">
<h4>Blocklijst</h4>
</div>
</div><!-- /content -->
<div data-role="dialog" id="confirmbox">
<div data-role="header" data-icon="false">
<h1>Bevestig</h1>
</div><!-- /header -->
<div data-role="content">
<h3 id="confirmMsg">Bevestig</h3>
<br>
<center>
Yes
No
</center>
</div>
</div>
And I have the following javascript in an external js file
$(document).on('pagebeforeshow', '#blockedusers', function() {
alert('pagebeforeshow blockedusers');
$('[id=unblocklink]').click(function(e) {
e.preventDefault();
var userid = $(this).attr('userid');
alert('unblocklink clicked userid ' + userid);
showConfirm("Weet je zeker dat je deze gebruiker wilt deblokkeren?", function() {
$.ajax({
async : false,
url : "../php/process_unblock_user.php?userid=" + userid,
success : function(data) {
if (data != "") {
// in case of error
alert(data);
} else {
alert("Gebruiker gedeblokkeerd!");
window.location.reload(true);
}
}
});
});
});
// confirm dialog
function showConfirm(msg, callback) {
alert('showing dialog1');
$("#confirmMsg").text(msg);
$("#confirmbox .btnConfirmYes").on("click.confirmbox", function() {
$("#confirmbox").dialog("close");
callback();
});
$("#confirmbox .btnConfirmNo").off("click.confirmbox", function(r) {
});
alert('showing dialog2');
$.mobile.changePage('#confirmbox', {
allowSamePageTransition : true
});
}
});
The problem is, the confirmdialog never shows (???). I added the javascript on the same page but then I have issues with the unblocklink.
Ok I found a solution to fix the issue:
When navigating to the blockedusers page from the home page, I need to do it the following way:
$('#blockedusers').click(function(e) {
window.location.href = "blockedusers.php";
});
Only then the confirmbox is available in the DOM.
This does not work:
$.mobile.changePage('blockedusers.php');
Hope this solution helps more people out.
I create a list view dynamically, but i have no clue on how i get the data from the selected list to appear in the dialog box. I have tried several ways but all failed. The only thing i have got going correctly is calling the dialog on click.
I want to display the whole message in the pop up dialog box
my code
<body>
<div data-role="page" id="messages">
<div data-theme="a" data-role="header">
<a data-role="button" href="index.html" data-transition="slide"
data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Back
</a>
Refresh
<h3>
Alerts
</h3>
</div>
<div data-role="content">
<script type="text/javascript">
$(document).on("pagebeforeshow", "#messages", function() {
var uid = $.cookies.get( 'uid' );
if(uid == null){
$.mobile.changePage( "account-login.html", { transition: "slide"} );}
$(function(){
$.getJSON("ajaxResponder.php?method=messages",function(data){
var htmlString ="";
$.each(data.messages,function(index,item){
htmlString +='<li data-name='+item.msgid+'><a href="#">'+
'<h3 class="topic">'+item.subject+'</h3>' +
'<p>From: '+item.sender+'</p>' +
'<p>Date: '+item.added+'</p>' +
'<p>'+ item.message +'</p></a></li>' ;
});
$('#list').html(htmlString);
$('#list').listview('refresh');
});
});
});
</script>
<ul id="list" data-role="listview" data-theme="d"></ul>
</div>
<script>
$('#list').on('click', 'li', function() {
$.mobile.changePage("#dialog", {
role: "dialog"
});
});
</script>
</div>
<div data-role="page" data-rel="dialog" id="dialog" data-theme="c" data-close-btn="right">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>New values added!</h1>
</div>
hello
<!-- display item.message here -->
</ul>
</div>
</body>
</html>
updated
Based on your comment, to read any data of the parent element, use .closest().
Just read the text of <a> button and append it to the dialog. I used div #msg for demo purposes.
Demo
$('#list').on('click', 'li a', function () {
var text = $(this).closest('li').attr('data-name');
$('#msg').empty();
$('#msg').append(text);
$.mobile.changePage("#dialog", {
role: "dialog"
});
});