jQuery Mobile messing up my classes - jquery-mobile

I'm creating the below which is doing fine except for one problem:
function showDevices() {
for (var i = 0; i < devices.length; i++) {
var value = devices[i].Value;
var geraete_id = devices[i].Key;
if (value.Name != "") { // if name exists, use that as heading, else, use UDID
$("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5>" + value.Name + "</h5>"
+ "<p>" + value.LastUsedBy + "</p>"
+ "<p id='geraete_DID'>" + geraete_id + "</p>"
+ "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
+ "<a href='#confirm_device_removal' class='deleteListItem' data-rel='dialog'></a></li>");
}
else {
$("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5 id='geraete_DID'>" + geraete_id + "</h5>"
+ "<p>" + value.LastUsedBy + "</p>"
+ "<p>Anonymous User</p>"
+ "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
+ "<a href='#confirm_device_removal' class='deleteListItem' data-rel='dialog'></a></li>");
}
}
$("#geraete-list").listview("refresh");
}
The problem is that class='deleteListItem'gets turned into class='deleteListItem ui-btn ui-btn-icon-notext ui-icon-delete'
Is this just the way Chrome is reading it or is jQuery Mobile adding this into my class?
The problem is I want to run the below code but the getDeviceIDforRemoval() isn't doing anything...
function getDeviceIDforRemoval(){
$(".device_to_remove").text($("#geraete_DID").text()); // sends the device ID into confirm submission dialog
}
function removeDevices(){
var geraetID = $(this).find('span').text(); //retrieves the DID inserted by above function
removeDevice(geraetID,loadDevices);
}
function removeDevice(udid,onSuccess){
Server.removeDevice(udid,onSuccess);
}

Elements can have multiple classes and when these are shown in the HTML they appear as
class="class1 class2 class3"
Order is largely unimportant.
This code...
$(".device_to_remove").text($("#geraete_DID").text());
...will select all elements with class device_to_remove regardless of whether other classes are also applied to those elements. It will then attempt to set the text of those elements to the text of the element with id geraete_DID.
Which of your elements actually has the class device_to_remove? I see no other reference to this in your code?

Related

Show More or Show Less link if text is too much in Column in WebGrid MVC c#

I am working on WebGrid of MVC with jquery,
Here in my grid, there is comment column which has more text in it which is creating a scroll.
I want to give a show more or show less link in this grid.
How Can I do it.
Here is my grid
I wrote a jquery function --
$('.more').each(function () {
var content = $(this).html();
if (content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>' + h + '</span> ' + moretext + '</span>';
$(this).html(html);
}
});
and to change Label text --
$(".morelink").click(function () {
if ($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
and finally, I added .more class in WebGrid.
grid.Column("outBoundMoveOrder.Comment", header: "Comment", style: "more"),
Happy Learning !!

Unable to load dynamic html page for the second time in Phonegap Application for Windows Phone 8

I am building a phonegap application. IIt works fine for iOS and Android , but in Windows Phone 8, the application does not load the page for the second time. I have a list on Page 1. When I click at each list item,it opens up its details on the second page.
The code of Page 1 is as follows-
//Each list item belongs to class 'stores-list'
$(document).on("click", '.stores-list', function() {
if (storage.getDataForKey('storeDetails') != null) {
storage.clearData('storeDetails');
}
storage.setDataForKey('storeDetails', stores[$(this).index()]);
$.mobile.changePage('store-details.html', {
transition: 'slide',
// data: stores[$(this).index()],
});
});
The code of Page 2 is as follows-
$(document).on("pagebeforecreate", '#store-details', function () {
var storeDetailsQuery = storage.getDataForKey('storeDetails');
displaystoredetailsdata(storeDetailsQuery);
});
function displaystoredetailsdata(data1) {
var htmlstoredetails = "";
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Store Name</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.storeName + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Type</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.storeType + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Mobile</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.mobile + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Address</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.address + ', ' + data1.city + ' - ' + data1.pin + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Week Off</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.weekOff + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Timings</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.timings + '</div></div>';
$('#page-store-details-display').html(htmlstoredetails);
}
The problem that I am facing is that when I click on a list item , it opens up the next page and display the details. But when for the second time, if I click on any list item, it redirects to other page and even create correct dynamic html, but page is not displayed for any reason that I am not able to get. (I also tried firing "pageshow" event. It executed for the first time. But didnot fire when I clicked any list item the second time.)
Please help. Thanks in advance.
I have found solution to my question. Actually localStorage when was getting cleared,it raised an unexpected event handling. So instead of clearing the storage, I simply updated the value of key.

JQuery Mobile 1.4 selectmenu within popup

I have the following code:
var rkIssueDatabaseManager = new RkIssueDatabaseManager();
rkIssueDatabaseManager.listRiskLevels().done(function (riskLevels) {
var optionsHtml = "";
$.each(riskLevels, function () {
if (this.default_val) {
optionsHtml += "<option value='" + this.id + "' selected=''>" + this.description + "</option>";
} else {
optionsHtml += "<option value='" + this.id + "'>" + this.description + "</option>";
}
});
$("<select>").attr({id: "rk-issue-risk", name: "risk_level_id", "data-native-menu": "false"}).html(optionsHtml).appendTo("#rk-issues-content");
$("#rk-issue-risk").selectmenu();
});
This code is executed in the pagebeforeshow event and appends the selectmenu into a hidden popup that will be shown only when the user clicks a button.
When the popup is shown, the selectmenu is initialized properly whith the right selected value, but when pressed, its menu is show in the native L&F even if I have set the "data-native-menu" to false and also in my application init I've set the global property to false.
$.mobile.selectmenu.prototype.options.nativeMenu = false;
I tested this same code, but appended the selectmenu directly to an element in the page instead of the popup and the L&F was the right one.
Any known issue with none-native L&F on selectmenu inside a popup?
EDIT
I was able to create a Fiddle

firefox extension working on page load

I'm trying to create my first extension.
I've found this sample: http://blog.mozilla.org/addons/2009/01/28/how-to-develop-a-firefox-extension/
I need to get some html content on a specific page and write something in the same page, so I modified it and got what I needed (with javascript I added content in the table I want). But to view my content I have to launch the extension from the button on the status bar, while I would like to have it already active in the page as I load/reload it (with a check on the url so to have it working only on that page) but I can't have it automatically.
I tried to add linkTargetFinder.run(); on init area, but... nothing. Moreover the extension as an "autorun" but eve if active, I don0t see any change.
any working sample?
Thanks
Nadia
Here it is the code (I edited just the .js file), I commented a couple of test not working...
var linkTargetFinder = function () {
var prefManager = Components.classes["#mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
return {
init : function () {
gBrowser.addEventListener("load", function () {
var autoRun = prefManager.getBoolPref("extensions.linktargetfinder.autorun");
if (autoRun) {
linkTargetFinder.run();
}
//linkTargetFinder.run(); // doesn't work
}, false);
//linkTargetFinder.run(); // doesn't work
alert("ZZZZZZZZZZZZZZZZZZ"); // doesn't work
},
run : function () {
var head = content.document.getElementsByTagName("head")[0],
style = content.document.getElementById("link-target-finder-style"),
allLinks = content.document.getElementsByTagName("a"),
foundLinks = 0;
if (!style) {
style = content.document.createElement("link");
style.id = "link-target-finder-style";
style.type = "text/css";
style.rel = "stylesheet";
style.href = "chrome://linktargetfinder/skin/skin.css";
head.appendChild(style);
}
for (var i=0, il=allLinks.length; i<il; i++) {
elm = allLinks[i];
if (elm.getAttribute("target")) {
elm.className += ((elm.className.length > 0)? " " : "") + "link-target-finder-selected";
foundLinks++;
}
}
if (foundLinks === 0) {
alert("No links found with a target attribute");
}
else {
//alert("Found " + foundLinks + " links with a target attribute");
}
t = content.document.getElementById("ERSContainer"), // ID of the table
d = t.getElementsByTagName("tr")[1],
r = d.getElementsByTagName("td")[1];
var myMail = "mail: "+r.textContent; //ok scrive nella td
var myName = content.document.getElementById("buyercontactname").value;
var myAddr1 = content.document.getElementById("buyeraddress1").value;
var myAddr2 = content.document.getElementById("buyeraddress2").value;
var myCity = content.document.getElementById("buyercity").value;
var myProv = content.document.getElementById("buyerstateprovince").value;
var myCAP = content.document.getElementById("buyerzip").value;
var elt = content.document.getElementById("buyercountry");
var myCountry = elt.options[elt.selectedIndex].text;
var myTel = content.document.getElementById("dayphone1").value;
var myTag1 = "<tr><td colspan='2'>OK!!!<br />";
var myTag2 = "</td></tr>";
z= t.innerHTML;
t.innerHTML = myTag1 + myMail +
" - "+myName+
myAddr1 + "<br />" +
myAddr2 + "<br />" +
myCity + "<br />" +
myProv + "<br />" +
myCAP + "<br />" +
myCountry + "<br />" +
myTel + "<br />" +
myFlash+
myTag2+z;
}
};
}();
window.addEventListener("load", linkTargetFinder.init, false);
If what you are doing is running a bit of JavaScript on a specific web page, like adding content into a table, maybe you should consider doing a userscript for the Greasemonkey addon instead of a full addon. With this you write your JS for the page and it gets executed each time you browse this specific page.
edit:
Try with this :
init: function () {
gBrowser.addEventListener("load", linkTargetFinder.run, true);
},
...
I bet that the extensions.linktargetfinder.autorun does not exist. So getBoolPref throws an exception and the rest is history.
Change your code to the following
var autoRun;
try {
autoRun = prefManager.getBoolPref("extensions.linktargetfinder.autorun");
} catch(e){
autoRun = false;
}

jQuery mobile menu items get duplicated after clicking back button

Using jQuery Mobile the code below works, however when I click on a menu item then click 'back' all my menu items have duplicated/appended etc.
$.each(siteData["pages"], function(i,v) {
$.mobile.activePage.find('[data-role=content]').append('' +
'<a href="#' + v["id"] +
'" data-role="button">' + v["name"] +
'</a>').trigger('create');
var newPage = $("<div data-role='page' id='" + v["id"] +
"'><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 info pageContainer
newPage.appendTo($.mobile.pageContainer);
});
How can I stop this behavior?
I will make you a solution from your last question, it will be easier to understand
Take a look at working example: http://jsfiddle.net/Gajotres/3kPTf/
Basically before you add content you need to check if that constant already exist.
In your case each time you add a new button/page check if that button/page already exist like this:
if(!$('#second').length){
// In this case this code block will execute if button with an id second don't exist
}
And here's a code example:
$(document).on('pagebeforeshow', '#index', function(){
if(!$('#second').length){
$.mobile.activePage.find('[data-role=content]').append('Second').trigger('create');
var newPage = $("<div data-role='page' id='second'><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 info pageContainer
newPage.appendTo($.mobile.pageContainer);
}
});

Resources