Im following a example where they mentioned Ive to insert
$('[data-role="button"]').button();
to add the button dynamically in a proper way. But it shows
button.(..) is not a function, error.
HTML
<div data-role="page" id="page">
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role="content" style="padding: 15px">
<ul data-role="listview" id="listview" data-inset="true" data-filter="true">
<li data-role="list-divider" id="divider">Available Devices</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" id="footer">
<h3>Footer</h3>
</div>
</div>
Javascript function:
function displayFeeds(items){
var ul = $('#listview');
for (var i = 0; i < items.length; i++) {
var li = $('<li/>').html(items[i].DeviceNames);
li.append($('<li/>').html(items[i].DeviceQuantity));
li .append('<a data-role="button" data-theme="b" data-icon="plus" data-iconpos="right">Save</a>');
// Enhance new button element
li.append($('<hr>'));
ul.append(li);
}
$('[data-role="button"]').button();
}
What should I do here Or what am I doing wrong?
I had same problem.
Don't put $('[data-role="button"]').button();
Put ul.parent().trigger( 'create' ); at end of your for loop.
Related
i make JQM application which have listwiew and i want to send the choosen item text to another page to use this text to get data from server by ajax
the first page
`<div data-role="page" id="hteacher" >
<div data-role="header" data-position="fixed">
<h1>Welcome teacher 1</h1>
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ADD Class</li>
<li>MSG</li>`<div data- role="page" id="hteacher" >
<div data-role="header" data-position="fixed">
<h1>Welcome teacher 1</h1>
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ADD Class</li>
<li>MSG</li>
</ul>
</div>
</div>
<div data-role="content">
<p></p>
<h2>list of classes </h2>
<ul data-role="listview" id="classes_list" data-autodividers="true" data-inset="true" data-filter="true">
<script>
$( document ).delegate("#hteacher", "pagecreate", function() {
$.post("teacher_login.php", { teacher_user:teacher_user , get_classes:"1"} , function(data ,status){
var obj = jQuery.parseJSON( data );
$.each(obj,function(){
var str =this['class_un'];
var html = ' <li>'+ str + '</li>';
$("#classes_list").append (html).listview("refresh");
});
});
$('#classes_list').on('click','li', function () {
teacher_choose_class = $(this).text();
$.mobile.changePage("#teacher_classes");
});
});
</script>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>Welcome To .....</h1>
</div>
the second page that want to send the selected item text to it
<div data-role="page" id="teacher_classes" >
<div data-role="header" data-position="fixed">
<h1>Welcome to class A</h1>
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Take Attendance</li>
</ul>
</div>
</div>
<div data-role="content">
<p></p>
<h2>class student </h2>
<ul data-role="listview" id="student_list_class" data-autodividers="true" data-inset="true" data-filter="true">
<script>
$("#teacher_classes").live("pageshow",function(event){
alert(teacher_choose_class);
$.post("teacher_login.php", { class_un:teacher_choose_class , get_students:"1"} , function(data ,status){
var obj = jQuery.parseJSON( data );
$.each(obj,function(){
var str =this['child_name'];
var html = ' <li><img src="student1.jpg">'+ str + '</li>';
$("#student_list_class").append (html).listview("refresh");
});
});
});
</script>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>Welcome To .....</h1>
</div>
i make teacher_choose_class as global variable the problem is that the value of this variable show in the alert message but when use this variable to get data by ajax no data return
In the ajax part of your code, put an alert(data); on the return to see what you are getting back. Assuming you are getting back an array of JSON objects each with a property called child_name, try:
$("#teacher_classes").live("pageshow",function(event){
alert(teacher_choose_class);
$.post("teacher_login.php", { class_un:teacher_choose_class , get_students:"1"} , function(data ,status){
alert(data);
var obj = $.parseJSON(data);
var html = '';
$.each(obj,function(i, item){
var str =item.child_name;
html += '<li><img src="student1.jpg">'+ str + '</li>';
});
$("#student_list_class").append(html).listview("refresh");
});
});
Anyway to display some li tags while hiding some using Javascript? I'm sorry if my question doesn't make sense.
Let me write my codes here.
XML:
<array>
<words>
<name>Milk</name>
<background>Background of Milk</background>
<recipes>Recipes using Milk</recipes>
</words>
<words>
<name>Tree</name>
<background>Background of Tree</background>
<recipes>NIL</recipes> or Not Applicable
</words>
</array>
Script/Javascript:
<script>
var wordsName, wordsBG, wordsRecipes, wordsCurrent;
var wordsArray = new Array();
$.ajax({
type:"GET",
url:"words.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('words').each(function() { //find <words> in words.xml
wordName = $(this).find('name').text();
wordBG = $(this).find('background').text();
wordRecipes = $(this).find('recipes').text();
$('<li>'+threatsName+'</li>').appendTo("#testingList");
threatsArray.push({threatsName:threatsName, threatsBG:threatsBG, threatsCases:threatsCases});
})
$('#threats li').click(function(){ //li
wordsCurrent = $(this).index()
$('#description h1').text(threatsArray[wordsCurrent].threatsName);
$('#name').text(threatsArray[wordsCurrent].threatsName);
var backgroundInformation = wordsArray[wordsCurrent].wordsBG;
backgroundInformation = backgroundInformation.split("\\n"); //to clear the line
$('#backgroundInfo').empty(); //empty the things inside
for (x in backgroundInformation) { //starts from zero and go to the last object
$('#backgroundInfo').append(backgroundInformation[x]+ '<br />');
} //for loop CLOSE
var recipesInformation = wordsArray[wordsCurrent].wordsRecipes;
recipesInformation = recipesInformation("\\n"); //to clear the line
$('#recipesInfo').empty(); //empty the things inside
for (x in recipesInformation) { //starts from zero and go to the last object
$('#recipesInfo').append(recipesInformation[x]+ '<br />');
} //for loop CLOSE
})
}
</script>
Lastly, my HTML
<div data-role="page" id="menu">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<h3>Words</h3>
</li>
<li>
<h3>Not Available</h3> <!--Not Available-->
</li>
</ul>
</div>
</ul>
</div>
<div data-role="content"> <!--Start of DESCRIPTION content-->
<ul data-role="listview" id="informationList">
<li>
<h3>Background</h3>
</li>
<li>
<h3>Recipes</h3>
</li>
</ul>
</div> <!--End of DESCRIPTION content-->
</div> <!--End of DESCRIPTION-->
<div data-role="page" id="background"> <!--Start of BACKGROUND-->
<div data-role="header">
<h1>Background</h1>
</div>
<div data-role="content"> <!--Start of BACKGROUND content-->
<p id="backgroundInfo">Not Available</p>
</div> <!--End of BACKGROUND content-->
</div> <!--End of BACKGROUND-->
<div data-role="page" id="recipes"> <!--Start of RECIPES-->
<div data-role="header">
<h1>Background</h1>
</div>
<div data-role="content"> <!--Start of RECIPES content-->
<p id="recipesInfo"> Recipes</p>
</div> <!--End of RECIPES content-->
</div> <!--End of RECIPES-->
As the information above, the second element in the Array, Tree, does not have any information for recipe tab, how can I prompt the page when user clicks into Tree, recipe li will hides itself?
Many thanks. It's the first time I am sending a question.
Welcome to StackOverflow! You seem to be parsing XML and generating HTML dynamically using JavaScript. In your case, maybe the easiest way is to detect the condition during parsing and add a "class" attribute to your <li> nodes. Then define the style class somewhere in your CSS, like this:
<li class="no-recipe">blah blah blah</li>
<style>
li.no-recipe {
display:none;
}
</style>
Not sure what you're aiming for exactly, but a declarative approach is almost always better than a dynamic approach (using JavaScript).
as the title says, is there a function that helps me find out if a listview contains a specific list item that has an id of say hello?
in my javascript i am currently pre loading items in a listview but there is a situation where the same code that adds the items in the listview, it will of coure add and duplicate the items.
i want to do something like this to find id of "hello"
if( (#listView).find("hello") ){
//do nothing
}else{
$(#listView).append('<li id="hello">hello</li>')
}
Html:
<body>
<div data-role="page" id="fields">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" >
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="listViewId" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">divider</h2>
</li>
</ul>
</div>
</div>
</div>
</body>
Is this possible? is there some kind of .Find("id") method for a listview?
what is wrong with find?
if(!$('#listViewId').find("#hello").length){
// append the element
}
I have written this code to retrieve values from DB and to put it in listitem its working fine here is my html code: I have already added all plugins.
<html>
<head>
$('#showcollapsed li').live('click',function(event)
{ var txt = $(this).text();
window.localStorage.setItem("clickedValueofList",txt);
$.mobile.changePage('#viewInformation',null,true,true);
getDataofSelectedListItem();
});
Here is my code but its not working fine.
$('#list1').on('click','li',function()
{
$(this).hide();
$('#list1').siblings('#editTextBox').show().val($(this).text()).focus();
});
$('#editTextBox').focusout(function()
{
//$('#list1').listview('refresh');
$(this).hide();
$(this).siblings('#list1').show().text($(this).val());
});
</head>
<body>
<div data-role="page" id="viewUser" data-theme="d">
<div data-role="header" data-theme="e" class="ui-bar ui-bar-e">
BACK
<h3>STUDENT INFO</h3>
</div>
<div data-role="content">
SHOW
<div data-role="collapsible-set" id="showinfodiv" data-theme="b" data-content-theme="d">
<div data-role="collapsible" id="showcollapsed" data-collapsed-icon ="plus" data-iconpos="left">
<h3>user names</h3>
<ul id="list" content-editable="true" data-role="listview" data-filter="true" data-filter-placeholder="Search Student Name..." data-filter-theme="e"></ul>
<li content-editable="true">fdfdfd</li>
</div>
</div>
</div>
</div>
<div data-role="page" id="viewInformation" data-theme="d" data-add-back-btn="true" data-back-btn-text = "back">
<div data-role="header" id="headerid" class="ui-bar ui-bar-b">
<h3></h3>
</div>
<div data-role="content" id="contentid">
<ul id="list1" data-role="listview" data-theme="e"></ul>
<input type="text" id="editTextBox" style="display:none"/>
SAVE
</div>
</div>
</body>
</html>
Now my next task is to edit dynamic listitem means when user click on 1st list item so that list item should be replaced by TEXTBOX and rest of the unclicked listitem will remain same when user completes his editing now the textbox should be hide and recent edit text should appear in listitem similar is the case for rest of the listitem but user can only edit one list item at a time .getting difficulty to achieve this goal.
.js code:
//gettind data from DB and putting it in listview dynamically its working fine
function getDataofSelectedListItem()
{
alert("getDataofSelectedListI");
clickedListItem = window.localStorage.getItem("clickedValueofList");
console.log("clicked list item"+clickedListItem);
//db = window.openDatabase("loginintro", "1.0", "loginintro", 1000000);
var sqlQuery = 'SELECT * FROM loginTable WHERE username=\''+window.localStorage.getItem("clickedValueofList").trim()+'\';';
console.log("selected list query:"+sqlQuery);
db.transaction(function(tx)
{
tx.executeSql(sqlQuery,[],successCBofListItem,errorCBofListItem);
},errorCB,successCB);
}
function successCBofListItem(tx,results)
{ alert("erer");
if(results != null && results.rows != null && results.rows.length > 0)
{ alert("fdfdf");
$('#list1').append('<li> UserName: '+results.rows.item(0).username+'</li>');
$('#list1').append('<li> Password:' +results.rows.item(0).password+'</li>');
$('#list1').append('<li> Emailid:' +results.rows.item(0).emailid+'</li>');
console.log("username:" + results.rows.item(0).username);
console.log("emailid:" + results.rows.item(0).emailid);
console.log("password:" + results.rows.item(0).password);
}
$('#list1').listview('refresh');
}
function errorCBofListItem()
{
alert("errorCBofListItem");
}
here is my code but its not working fine.
$('#list1').on('click','li',function()
{
$(this).hide();
$('#list1').siblings('#editTextBox').show().val($(this).text()).focus();
});
$('#editTextBox').focusout(function()
{ $(this).hide();
$(this).siblings('#list1').show().text($(this).val());
});
Quick question here. Ive been trying to get my content section of my code to fill the page down to the footer. Ive tried to add the following hack to the css for the content type padding-bottom: 5000px margin-bottom: -5000px; Ive also followed this guide but I didnt not get the result I was looking for.
Here is a screen shot of what is happening:
http://img.photobucket.com/albums/v189/shadowtyper/screenshotIssue_zpse858c39a.gif
<div data-role="page" id="Ids" data-theme="a">
<div data-role="header" data-theme="b">
<h1>Accepted Orders
</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="idsContent" data-theme="a">
<li> ID #12345678</li>
<li> ID #12345678</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" class="footer-docs" data-theme="b">
<p>footer</p>
</div>
Here's an working solution, I am using it in my
$("div[data-role='page']").live('pageshow',function(e,data){
var header = $("div[data-role='header']:visible");
var footer = $("div[data-role='footer']:visible");
var content = $("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}
});
And here's an working example: http://jsfiddle.net/Gajotres/BYufW/
I hope this is what you want.