Develop Reference

Wrong bind on aspx from jquery

Got a problem with bind some data on a bootstrap carousel. Data set perfectly, but the bind on HTML fail. Here the jQuery snippet:
function OnSuccessNews(response) {
var news = response.d;
$(news).each(function (item) {
$("#notizie").append("<div class=\"item container\">");
$("#notizie").append("<h4>" + news[item].Title + "</h4>");
$("#notizie").append("<p>" + news[item].Text + "</p>");
$("#notizie").append("<div class=\"post\"></div>");
$("#notizie").append("</div>");
});
$('.item').first().addClass('active');
$('#carouselNews').carousel();
}
Then the aspx page:
<div class="row">
<div class="col-md-12">
<div class="carousel slide" id="carouselNews">
<div class="carousel-inner" id="notizie"></div>
</div>
</div>
</div>
The problem is: I must to bind some news (with a title and text) in the bootstrap carousel, cycle endless the news in couple. Now this code show me all the data in news and no cycle. How to display 2 news a time and cycle the next news?

do it like this :
function OnSuccessNews(response) {
var news = response.d;
$(news).each(function (item) {
var container = $("<div class=\"item container\"></div>");
container.append("<h4>" + news[item].Title + "</h4>");
container.append("<p>" + news[item].Text + "</p>");
container.append("<div class=\"post\"></div>");
$("#notizie").append(container);
});
$('.item').first().addClass('active');
$('#carouselNews').carousel();
}
create a container and put data inside the container and append it to $("#notizie)

Try like this, Get the innerHTML of your target div and add all the element to that div and finally add the innerHTML to created HTML string
HTML = document.getElementById('notizie').innerHTML;
$(news).each(function (item) {
HTML += "<div class=\"item container\"></div>";
HTML += "<h4>" + news[item].Title + "</h4>";
HTML += "<p>" + news[item].Text + "</p>";
HTML += "<div class=\"post\"></div>";
});
document.getElementById('notizie').innerHTML = HTML;

jQuery Mobile dynamic content -cannot select tag

I'm working with jQuery Mobile in a google web app and just having some issues selecting a tag. More specifically, I have content that is loaded from an external source so need to have a loading page initially. Once the external source is available I then update the page with the content using jQuery. Included in this content is an input tag. The issue is when I update the page, I cannot then cannot find the value of this input tag.
Here is my code below:
(intial html - Before content is loaded)
<div class="ui-body ui-body-a">
<div id="googleList" >
<fieldset data-role="controlgroup" data-mini="true" >
<input type="checkbox" name="checkbox-v-6a" id="checkbox-1-a">
<label for="checkbox-v-6a">Loading . . . </label>
</fieldset>
</div>
</div>
Here is my jQuery to update the code above when the new content comes in:
function showTaskList(tasks)
{
//Generate HTML
var htmlToInsert = "<fieldset data-role=\"controlgroup\" data-mini=\"true\" >";
for(var i = 0; i < tasks.length; i++)
{
htmlToInsert += "<input type=\"checkbox\" data-id=\"" + tasks[i][1] + "\" name=\"checkbox-" + i + "-a\" id=\"checkbox-" + i + "-a\" class=\"custom taskCheckBox\" ";
if(tasks[i][2] != undefined)
htmlToInsert += "checked=\"checked\"";
htmlToInsert += " />";
htmlToInsert += "<input id=\"currency-controlgroup1\" data-id=\"" + tasks[i][1] + "\" type=\"text\" value=\"" + tasks[i][0] + "\" data-wrapper-class=\"controlgroup-textinput ui-btn\" class=\"taskinputBox\">";
}
//Insert HTML into site
$("#googleList").html(htmlToInsert + "</fieldset>");
//Refresh List
$("#googleList").trigger("create");
}
Here is my code to get the input tag value
$(document).ready(function(){
function processTaskList()
{
console.log("Test");
$(document).on('click', '.taskCheckBox', function (event, ui) {
var checkBoxId = $(this).data("data-id");
console.log("CheckBox:" + checkBoxId );
});
}
});
CheckBoxId keeps coming back undefined when I click on one of the checkboxes. I want to be able to read the data-id value. I'm not sure how to fix this? Any help is appreciated.

I tested the code below again, and it works - Thanks for your help
$(document).on('click', '.taskCheckBox', function (event, ui) {
var checkBoxId = $(this).data("id");
console.log("CheckBox:" + checkBoxId );
});

JQuery Mobile - Passing Variables Between Dynamically Generated Pages

I guess I should just be happy because of the general awesomeness of JQuery-Mobile, but I still can't imagine why JQueryMobile would not have a native way to pass variables.
Anyway, I'm trying to pass some variables around to create custom content on dynamically created "pages".
The pages are dynamically created fine. However I haven't been able to pass one single variable and have been trying for over a couple days now.
Any help would be awesome.
For the latest attempt at passing variables, I'm trying CameronAskew's $.mobile.paramsHandler.addPage code which works great out of the box.
Apart from generic jquery-mobile starting point, I Started With This Script which works really well to make pages dynamically, shown here:
// Prepare your page structure
var newPage = $("<div data-role='page' id='page'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>Dynamic Page</h1></div><div data-role=content>Stuff here</div></div>");
// Append the new page into pageContainer
newPage.appendTo($.mobile.pageContainer);
// Move to this page by ID '#page'
$.mobile.changePage('#page');
Here's the full javascript:
run();
setInterval(function(){
run();
},5000);
function run() {
var output;
$.ajax({
url: "http://[url_here]/mobile_get_data_2.php",
success: function( data ) {
var obj = jQuery.parseJSON( data );
var output='';
var charts='';
var idx=1;
$.each(obj,function(k,v){
output += '<ul data-role="listview" data-count-theme="a" data-inset="true">';
output += '<a data-count-theme="a" href="#chart?param1=212121&param2=32327"><li>[returned description here]';
output += '<span class="ui-li-count">';
output += [returned count here];
output += '</span></a></li>';
output += '</ul>';
idx = (idx+1);
});
$('#sensors').html(output).trigger("create");
}
});
}
$('#sensors').on('click', function ( e) {
// Prepare your page structure
var newPage = $(
"<div data-role='page' id='page'>"
+ "<div data-role=header>"
+ "<a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>"
+ "<h1>Chart</h1>"
+ "</div>"
+ "<div data-role=content>Chart Here</div>"
+ "</div>"
);
newPage.appendTo($.mobile.pageContainer); // Append the new page into pageContainer
// Move to this page by ID '#page'
$.mobile.changePage('#page');
});
// CameronAskew
$(function () {
$.mobile.paramsHandler.addPage(
"page", // jquery mobile page id which will accept parameters
["param1", "param2"], // required parameters for that page
[], // optional parameters for that page,
function (urlVars) {
// $("#param1display").html(urlVars.param1);
// $("#param2display").html(urlVars.param2);
alert( urlVars.param1);
}
);
$.mobile.paramsHandler.init();
});
And the HTML:
<div data-role="page" id="summary">
<div data-role="header"><h1>MakerSpace</h1></div>
<ul id="sensors" data-role="listview" data-count-theme="c" data-inset="true"></ul></div>
<div data-role="footer"></div>
</div>

The stars aligned!
Changed this
$('#sensors').on('click', function ( e) {
to this
$('ul').on('click', function () {
put the variable in (obviously)
output += '<a data-count-theme="a" href="#chart?param1=[returned id]"><li>[returned description]';
And now it works.
I hope this helps someone out there...

twitter integration jquery mobile application

I am developing application using jQuery Mobile and Phonegap and this application i want to integrate twitter.
i try this.
<script type="https://twitter.com/status/user_timeline/'user'.json?count=30&callback=listTweets" type="text/javascript"></script>
JAVASCRIPT IS:
function listTweets(data){
console.log(data);
var output = '<ul data-role="listview">';
$.each(data, function(key, val){
var text = data[key].text;
var thumbnail = data[key].user.profile_image_url;
var name = data[key].user.name;
output += '<li>';
output += '<img src="' +thumbnail+ '" alt="Photo Of ' +name+ '">';
output += '<div>' +text+ '</div>';
output += '</li>';
});
output += '</ul>';
$('#tweetlist').html(output);
}
html is:
<div data-role="page" id="tweets">
<div data-role="content" id="tweetlist">
</div>
</div>
it give me blank screen and when I inspect element it give me:
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, only screen and (min-resolution: 240dpi)
Any suggestion
Thanks in advanced.

Use the refresh call as specified here : http://api.jquerymobile.com/listview/#method-refresh
$("#tweetlist").listview('refresh');
should works.
EDIT
My apologies. I didn't read your code carefully. The main problem is your $.each loop. You close the ultag and you display the result before the end of the loop (JS is functionnal don't you remember?) Try this:
function listTweets(data){
console.log(data);
var output = '<ul data-role="listview">';
var text, thumbnail, name;
// Use a loop instead a $.each
for(var i=0, _len=data.length; i < length; i++) {
text = data[i].text;
thumbnail = data[i].user.profile_image_url;
name = data[i].user.name;
output += '<li>';
output += '<img src="' +thumbnail+ '" alt="Photo Of ' +name+ '">';
output += '<div>' +text+ '</div>';
output += '</li>';
}
output += '</ul>';
$('#tweetlist').html(output);
$("#tweetlist").listview('refresh'); // In case of
}

Append dymanic data from sessionStorage (JSON) to Listview

I have the following bit of data(JSON) stored in a session:
Prescription: [{"medID":"id1","medName":"name1","medQty":"qty1","medDirec":"Directions1"}, {"medID":"id2","medName":"name2","medQty":"qty2","medDirec":"Directions2"}]
I want to get these information automatically "displayed" inside a Listview (jQuery Mobile) on page load, for this I have come up with the following:
$(document).ready(function () {
window.addEventListener('load', OnStorage, false);
});
function OnStorage(event) {
if (window.sessionStorage) {
var retrievedData = sessionStorage.getItem("Prescription");
var PrescriptionJSON = JSON.parse(retrievedData);
var prescLength = PrescriptionJSON.Length();
for (var i = 0; i < PrescriptionJSON.Length(); i++) {
var text = '<h2>' + PrescriptionJSON[i].medName + '</h2>' +
'<p><strong>Quantity: </strong>' + PrescriptionJSON[i].medQty + '</p>' +
'<p><strong>Directions: </strong>' + PrescriptionJSON[i].medDirec + '</p>'
$('<li />', {
html: text
}).appendTo("#summaryList ul");
//$("#summaryList").append(text);
//alert(retrievedData);
}
$('#summaryList').listview("refresh");
$('#summaryList').trigger("create");
}
}
When I uncomment //alert(retrievedData); I get the JSON inside an alert popup, but when I call //alert(PrescriptionJSON); (the parsed variable) I get something like [object, Object]. Nonetheless, I don't know if this is worth mentioning but just in case I am.
Basically I don't know what is wrong in the script above, because I don't get anything from the JSON data appended to the listview.
Just for reference I have this on my HTML side.
<ul id="summaryList" data-role="listview" data-inset="true">
<li data-role="list-divider" style="text-align:center">Prescription Summary</li>
</ul>
Please note that the length of the data (Prescription) will be dynamically created so the length may not always be 2 like the example above.
I have gone through a good 2 hrs researching online and have found similar questions but none could help me solve my problem. I've also had a look at http://www.copterlabs.com/blog/json-what-it-is-how-it-works-how-to-use-it/ and learned a few more things but still have not be able to work my way around my problem.
Any suggestions or questions are greatly welcomed!

var PrescriptionJSON = '[{"medID":"id1","medName":"name1","medQty":"qty1","medDirec":"Directions1"}, {"medID":"id2","medName":"name2","medQty":"qty2","medDirec":"Directions2"}]';
localStorage.setItem("PrescriptionJSON", PrescriptionJSON);
function OnStorage(event) {
if (window.localStorage) {
var retrievedData = localStorage.getItem("PrescriptionJSON");
var obj = $.parseJSON(retrievedData);
var li = "";
$.each(obj, function(key, value) {
li += '<li><h2>' + value.medName + '</h2><p><strong>Quantity: </strong>' + value.medQty + '</p><p><strong>Directions: </strong>' + value.medDirec + '</p></li>'
})
$('#summaryList').append(li).trigger("create");
$('#summaryList').listview("refresh");
}
}