jQuery Mobile styles being removed - jquery-mobile

I had code which I hardcoded...everything worked fine...then I swapped it out for dynamic updating:
<script>
var items = [];
$.getJSON('initialize.json', function(data) {
$.each(data["home"], function(key, val) {
var tmp1 = '';
var tmp2 = '';
$.each(val["group"], function(key2, val2) {
tmp1 += key2 + "/";
tmp2 += val2 + "/";
});
items.push('<li>'+key+' ('+tmp1.slice(0, -1)+')<br /><small>Completed '+tmp2.slice(0, -1)+' days ago</small><span class="ui-li-count">'+val["total"]+'</span></li>');
});
$("#temp").append(items.join(""));
});
</script>
Here is the container:
<ul id="temp" data-role="listview" data-theme="c">
<!-- Populated dynamically -->
</ul>
I have googled and tried the proposed solutions and none work:
jQuery Mobile rendering problems with content being added after the page is initialized
http://jquerymobile.com/test/docs/pages/page-dynamic.html
I've tried the above...I am curious to know why the above doesn't work...and what will and why???

You need to call listview('refresh') after you add new items to your listview. So try
$("#temp").append(items.join("")).listview("refresh");
instead of
$("#temp").append(items.join(""));
Updating lists
If you add items to a listview, you'll need to call the refresh()
method on it to update the styles and create any nested lists that are
added.
Here is working jsFiddle

Related

can you re-initiate a ui-popover?

Since I'm injecting a <span ui-popover></span> after the DOM is constructed I need to reinitiate the popovers otherwise it won't show.
Is there away to do that?
HTML
<div ng-repeat="i in comments">
<div id={{i._id}} class="task" commentId={{i._id}}> {{i.text}} </div>
</div>
I'm using the external rangy library that injects 's around highlighted texts. You can also inject elementAttirbutes to accommodate these span, This is shown in this part of the code:
JS
function initHighLighter() {
var cssApplier = null;
highlighter = rangy.createHighlighter(document);
cssApplier = rangy.createClassApplier('highlight-a',{elementAttributes: {'uib-popover':"test"}}/*, {elementAttributes: {'data-toggle':"popover", 'data-placement':"bottom", 'title':"A for Awesome", 'data-selector':"true", 'data-content':"And here's some amazing content. It's very engaging. Right?"}}*/);
highlighter.addClassApplier(cssApplier);
cssApplier = rangy.createClassApplier('highlight-b', {elementAttributes: {'uib-popover':"test"}}/*, {elementAttributes: {'data-toggle':"popover", 'data-placement':"bottom", 'title':"B for Best", 'data-selector':"true", 'data-content':"And here's some amazing content. It's very engaging. Right?"}}*/);
highlighter.addClassApplier(cssApplier);
}
I'm calling on to highlight parts of the texts, only after I upload them from the server (highlighter1 calls on init highlight written above)
JS
(function(angular) {
'use strict';
angular.module('myApp', ['ui.bootstrap'])
.controller('Controller', function($scope, $http, $timeout) {
$http.get('/comments')
.success(function(response) {
$scope.comments = response;
var allEl=[];
var i;
for (i=0; i<response.length; i++) {
allEl.push(response[i]._id);
}
$http.post('/ranges', {"commentIds":allEl})
.success(function(result){
result.forEach(function(item){
highlighter1(item.dataAction, item.rangyObject, true);
})
})
});
})
})(window.angular);
So in the end my DOM is being changed AFTER I initiated everything and then the attributes associated with the span don't do anything.
your markup should be (notice the prefix)
<span uib-tooltip="hello world"></span>
or if you want dynamic content
$scope.welcomeMessage = "hello world"; // inside controller
..
<span uib-tooltip="{{welcomeMessage}}"></span>
if you want to reinitialize the tooltip, you can trigger a $destroy event and have it rebuilt, one way if by using ng-if and setting it to true when you need it.
<span ng-if="doneUpdating" uib-tooltip="hello world"></span>

My Google Pie Chart is displaying no data even though query works . ASP.NET MVC

I struggling with trying to figure out why my Google Pie Chart is failing to display the data even though my query works perfectly in the Query builder when I tested it.
I'm still pretty new to this and I have a basic understanding but I can't seem to spot the problem? If anyone can help me with a solution I'll greatly appreciate it. I'm currently developing in ASP.NET MVC and I'm running everything off my view page using Razor for this report. If anyone needs additional code, please let me know and thanks in advance.
#using WebMatrix.Data;
#using WebMatrix.WebData;
#{
var db = Database.Open("HealthContext");
String rows = "";
var Query = ("SELECT Hospital.Name,Hospital.Province,Count([Order].OrderID) AS Orders FROM Hospital,[Order] WHERE Hospital.HospitalID = [Order].HospitalID GROUP BY Hospital.Name,Hospital.Province;");
var AppQuery = db.Query(Query);
List<string> rowsList = new List<string>();
foreach (var item in AppQuery)
{
rowsList.Add("['" + item.Name + "', '" + item.Province + "','" + item.Orders + "']");
};
rows = String.Join(", ", rowsList);
}
<h2>PieChart1</h2>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Province');
data.addColumn('number', 'Orders');
#Html.Raw(rows);
var options = {
title: 'Orders Per Hospital'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
I think you are just outputting your row data into your drawChart() function without actually specifying it as data for the DataTable.
Try:
data.addRows([
#Html.Raw(rows)
]);
I haven't actually used Google's visualization API, but I'm going based on: https://developers.google.com/chart/interactive/docs/reference#DataTable

Dynamically change href in last tab of jquery 'next/previous tab' controls

I use stackoverflow often so thanks to all who contribute - its been very helpful.
I am not an avid programmer and use jquery at its most basic level. I hope someone can help.
I would like to dynamically change the href url of '.nexttab' controls so that the user can move onto the next html page.
The below is my (juvenile) code.
$(function() {
$("#tabs").tabs();
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
var href = $(this).attr('href');
var lasttab = $(this).ui.panel('id');
if(lasttab == 'tabs-7'){
$('.nexttab').attr('href', href.replace('#','http://google.com.au'));
}
});
$(".prevtab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected - 1);
});
});
html is here
<div id="control-arrows">
< Back | Continue >
</div>
How can I identify the correct panel or tab (which is always the last) and then make the url change ?
Thank you,
Sarah

keep dynamically added elements after postback

i got a big problem with jquery and the postback.
i'm dynamically adding html elements to my page. e.g. JQuery UI Tabs.
but after postback ALL dynamically added elements are gone.
how can i keep all of these elements after postback and also the values of textboxes and datetimepicker?
greetz
Tobi
EDIT:
e.g. i'm adding some JqueryUI Tabs with this code:
$(function () {
var $tab_title_input = $("#tab_title"),
$tab_content_input = $("#tab_content");
var tab_counter = 1;
var $addButton = $('<li class="ui-state-default ui-corner-top add-button"><span>+</span></li>');
$addButton.click(function () { addTab(); });
var $tabs = $("#tabsTravel, #tabsWork").tabs({ autoHeight: true, fillSpace: true,
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function (event, ui) {
var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
$(ui.panel).append("<p>" + tab_content + "</p>");
$("#tabsTravel ul.ui-tabs-nav").append($addButton);
}
});
$("#tabsTravel ul.ui-tabs-nav").append($addButton);
// actual addTab function
function addTab() {
tab_counter++;
var tab_title = "worker " + tab_counter;
$tabs.tabs("add", "#tabsTravel-" + tab_counter, tab_title)
.tabs("select", "#tabsWork-" + tab_counter, tab_title);
}
// close icon: removing the tab on click
$("#tabsTravel span.ui-icon-close").live("click", function () {
var index = $("li", $tabs).index($(this).parent());
$tabs.tabs("remove", index);
tab_counter--;
});
$("#tabsWork span.ui-icon-close").live("click", function () {
var index = $("li", $tabs).index($(this).parent());
$tabs.tabs("remove", index);
// tab_counter--;
});
$('#button').click(function () {
addTab()
});
});
how can i implement this localStorage to this code?
greetz
Bl!tz
Normally this would be the job of your server-side code; you would save the added elements in the the session cache, or in the database if the changes need to be permanent.
You could also consider using the new HTML5 session storage, or local storage, but this approach will probably be more of a hassle; best to use the sophisticated server-side libraries of PHP, .NET, etc, if possible.
Edit
Here's a simple example. Let's say your client script adds some HTML to the page:
var html = "<div>hello world</div>";
$("body").append(html);
Now, you can save it in local storage like this:
localStorage.setItem("dynamichtml", html);
If you put something in your page startup script like this:
$(document).ready(function() {
if (localStorage["dynamichtml"]) {
$("body").append(localStorage["dynamichtml"]);
}
});
Then you will have achieved the dynamic functionality. Note that the localStorage data will remain saved until the user deletes it explicitly.

phonegap jquerymobile issue: lost style when dynamically generating list items

I'm trying to generate a list dynamically from database. The results can be retrieved, however, jquerymobile style and data-role property seem to be lost. I see an ugly list instead of nicely rendered list:
I've tried to reproduce it using the simplest list item:
In my index.html, I have:
<ul data-role="listview" data-theme="d" data-divider-theme="d" data-inset="true" id="thisweekexpenselist"></ul>
In the javascript file, I have
function getExpenselist_success(tx, results) {
$('#busy').hide();
var len = results.rows.length;
for (var i=0; i<len; i++) {
var expense = results.rows.item(i);
$('#thisweekexpenselist').append('<li>Test Simplest</li>');
}
db = null;
}
It does not render correctly at all.
Try calling $('#thisweekexpenselist').listview('refresh'); at the end of the getExpenselist_success() function.
This helps:
$(document).bind('pagechange', function() {
$('.ui-page-active .ui-listview').listview('refresh');
});

Resources