I'm using jQuery Mobile 1.3, and attempted to follow a tutorial in order to create my own custom widget.
I'm getting stuck on the very first step, and I'm not sure if I'm following the right example for the right version of jQuery mobile.
There is no error on the page, my element is just never enriched.
(function($) {
$.widget("mobile.target", $.mobile.button, {
/** Available options for the widget are specified here, along with default values. */
options: {
inline: false,
mode: "default",
height: 200
},
/** Mandatory method - automatically called by jQuery Mobile to initialise the widget. */
_create: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetcreate");
inputElement.after("<button>" + inputElement.val() + "</button>");
},
/** Custom method to handle updates. */
_update: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetupdate");
inputElement.siblings("button").text(inputElement.val());
},
/* Externally callable method to force a refresh of the widget. */
refresh: function() {
return this._update();
}
});
/* Handler which initialises all widget instances during page creation. */
$(document).bind("pagecreate", function(e) {
$(document).trigger("targetbeforecreate");
return $(":jqmData(role='target')", e.target).target();
});
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<input type="button" data-role="target" value="inp1">
<input type="button" value="inp2">
<div data-role="target">div1</div>
<div type="button">div2</div>
</body>
</html>
(function($) {
$.widget("mobile.target", $.mobile.button, {
/** Available options for the widget are specified here, along with default values. */
options: {
inline: false,
mode: "default",
height: 200
},
/** Mandatory method - automatically called by jQuery Mobile to initialise the widget. */
_create: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetcreate");
inputElement.after("<button>" + inputElement.val() + "</button>");
},
/** Custom method to handle updates. */
_update: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetupdate");
inputElement.siblings("button").text(inputElement.val());
},
/* Externally callable method to force a refresh of the widget. */
refresh: function() {
return this._update();
}
});
/* Handler which initialises all widget instances during page creation. */
$(document).bind("pagecreate", function(e) {
$(document).trigger("targetbeforecreate");
return $(":jqmData(role='target')", e.target).target();
});
})(jQuery);
Expected output was a custom JQueryMobile button that inherits from the JQueryMobile button. Not just a tiny html5 button in a div. e.g. Div1 rendering the same as Div2 but with customized changes made.
You are trying to get an input element in jQuery code. But you defined a div element in the HTML page.
That is the problem. Change it to input.
Check the below code
The tutorial you followed states that only use the :jqmData if you didn't use the HTML5 data attribute. Remove it
(function($) {
$.widget("mobile.target", $.mobile.widget, {
options: {
inline: false,
mode: "default",
height: 200
},
_create: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetcreate");
inputElement.after("<button>"+inputElement.val()+"</button>");
},
_update: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetupdate");
inputElement.siblings("button").text(inputElement.val());
},
refresh: function() {
return this._update();
}
});
$(document).bind("pagecreate", function(e) {
$(document).trigger("mywidgetbeforecreate");
return $("[role='target']", e.target).target();
});
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<input type="button" data-role="target" value="inp1">
<input type="button" value="inp2">
<div type="button" data-role="target">div1</div>
<div type="button">div2</div>
</body>
</html>
Related
Map is showing in all browsers like chrome,Firefox but the map is not showing in IE 11,this code is working in chrome but its not working in IE11 once add the load event and loop the data,answer is appreciable? but its working in chrome if i use load event also
<html>
<head>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/index.js?1"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://www.highcharts.com/samples/maps/demo/all-maps/jquery.combobox.js"></script>
<script type="text/javascript">
$(function() {
var mapData = Highcharts.maps['custom/world'];
var data = [{"Name": "Australia","status": "Live"}];
$('#container').highcharts('Map', {
chart: {
events: {
load: function() {
for (let i = 0; i < this.series[1].data.length; i++) {
this.series[0].data.forEach((el) => {
if (el['name'] == this.series[1].data[i].Name) {
if(this.series[1].data[i].status == 'Live'){
el.update({color: "lightgreen"});
}
}
return el
})
}
}
}
},
series: [{
name: 'Countries',
mapData: mapData,
}, {
name: 'Countries options',
visible: false,
data: data
}]
});
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
The answer is simple - you are using arrow function which is not supported in IE11: caniuse.com/#feat=arrow-functions
If you want to make your code working on IE11, it is not enough to change arrow function to normal function, because you will have different this. Using arrow function your this is the same this like in your load() function. But when you define a normal function() (instead of arrow function), your this will be changed. That's why you need to define var chart = this; in your load() function and replace this to chart in few places. Here you have working code:
chart: {
events: {
load: function() {
var chart = this;
for (let i = 0; i < this.series[1].data.length; i++) {
this.series[0].data.forEach(function(el) {
if (el['name'] == chart.series[1].data[i].Name) {
if(chart.series[1].data[i].status == 'Live'){
el.update({color: "lightgreen"});
}
}
return el
})
}
}
}
},
Working IE11 demo: https://codepen.io/raf18seb/full/RYjavx/
I want to insert few html tags into electron webview while loading.
I tried below code in preload.js but that doesn't have any effect.
preload.js
window.onload = function() {
var script = document.createElement("script");
script.src = "https://code.jquery.com/jquery-2.1.4.min.js";
script.onload = script.onreadystatechange = function() {
$(document).ready(function() {
document.getElementsByTagName("head")[0].innerHTML += "<div id="google_translate_element"></div><script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'de', includedLanguages: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');}</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>";
};
Index.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery injection into webview preload</title>
</head>
<body style="overflow:hidden;">
<webview id="webview" preload="./preload.js" src="https://www.amazon.de/Fortan-Business-Edelstahlarmband-Machinery-Quartz/dp/B01FZEDQZG/ref=sr_1_1?ie=UTF8&qid=1476905705&sr=8-1&keywords=watches" style="position:absolute;width:100%;height:100%;"></webview>
</body>
</html>
Expected Result :
Page has to loaded with translate tag on top
Current result :
No translate tag is appearing
window.onload = function() {
var script = document.createElement("script");
script.src = "https://code.jquery.com/jquery-2.1.4.min.js";
script.onload = script.onreadystatechange = function() {
$(document).ready(function() {
var temp = $('<div id="google_translate_element">Translate</div><script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: \'de\', includedLanguages: \'en\', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, \'google_translate_element\');}</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>');
$( "<div id='translateCode'></div>" ).prependTo( 'body' );
$("#translateCode").append(temp);
});
};
document.body.appendChild(script);
};
It works. Tested.
In TFS it is possible to get build historical data on start screen. So when you log into TFS you immediately see the status of your builds. Can the same be achieved for displaying Code Coverage? This is something that SonarCube definitely does nicely.
There isn’t the feature of include Code Coverage result in start screen. But you can custom dashboard widget with test REST API to achieve that.
A simple sample to custom dashboard:
<!DOCTYPE html>
<html>
<head>
<title>Custom widget</title>
<meta charset="utf-8" />
<script src="node_modules/vss-web-extension-sdk/lib/VSS.SDK.js"></script>
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformStyles:true
});
VSS.require(["TFS/Dashboards/WidgetHelpers","TFS/TestManagement/RestClient"], function (WidgetHelpers,TFS_Test_WebApi) {
WidgetHelpers.IncludeWidgetStyles();
VSS.register("WidgetStarain", function () {
var projectId = VSS.getWebContext().project.id;
var getCodeCoverage = function (widgetSettings) {
return TFS_Test_WebApi.getClient().getBuildCodeCoverage(projectId, 252)
.then(function (buildCoverage) {
var $codeCoverageResult = $('div.codeCoverage');
var $codeCoverageObject = buildCoverage.coverageData[0].coverageStats;
var $detailResult = $codeCoverageObject[0].label + ": Total:" + $codeCoverageObject[0].total + ";covered:" + $codeCoverageObject[0].covered;
$codeCoverageResult.text($detailResult);
//$codeCoverageResult.text(JSON.stringify(buildCoverage))
return WidgetHelpers.WidgetStatusHelper.Success();
}, function (error) {
return WidgetHelpers.WidgetStatusHelper.Failure(error.message);
});
}
return {
load: function (widgetSettings) {
var $title = $('h2.title');
$title.text('starain widget custom');
return getCodeCoverage(widgetSettings);
}
}
//return {
// load: function (widgetSettings) {
// var $title = $('h2.title');
// $title.text('starain widget custom');
// return WidgetHelpers.WidgetStatusHelper.Success();
// }
//}
});
VSS.notifyLoadSucceeded();
});
</script>
</head>
<body>
<div class="widget">
<h2 class="title">widgets starain</h2>
<div class="codeCoverage">non code coverage</div>
</div>
</body>
</html>
After that, you can add that widget to the dashboard and check code coverage.
I have a Single Page transition from #homepage to #addresses where the page #addresses include a dynamic listview build based in an $.ajax WebApi call.
The problem is that it's visible the construction of the listview when we arrive at the second page, and I want to avoid that, I want the list all build when we land in the #addresses page.
I also have a delay click in the listview in iPhone.
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>izigo.mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).bind("mobileinit", function ()
{
$.mobile.toolbar.prototype.options.addBackBtn = true;
$.mobile.toolbar.prototype.options.backBtnText = "voltar";
$.mobile.page.prototype.options.domCache = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
/* Pass data with changePage */
$(document).on("pageinit", "#homepage", function ()
{
$(".category").on("click", function ()
{
$.mobile.pageContainer.pagecontainer("change", "#addresses",
{
categoryId: this.id,
transition: "slide"
});
});
});
/* retrieve data and run function to add elements */
$(document).on("pagebeforechange", function (e, data)
{
if (data.toPage[0].id == "addresses")
{
var categoryId = data.options.categoryId;
clearListCategory("#addresses");
buildListCategory("#addresses", categoryId);
}
});
function clearListCategory(page)
{
var $page = $(page);
$("ul", $page).remove();
}
function buildListCategory(page, categoryId)
{
$.ajax({
type: "POST",
url: "http://10.0.0.200/api/Mobile/GetAddresses",
crossDomain: false,
beforeSend: function () { $.mobile.loading('show') },
complete: function () { $.mobile.loading('hide') },
data: { CategoryId: categoryId },
dataType: 'json',
success: function (addresses)
{
showAddresses(page, addresses);
},
error: function () {
console.log("loadList error!");
}
});
}
function showAddresses(page, addresses)
{
var $page = $(page);
var list = $("<ul/>", {
"data-role": "listview"
});
var items = '';
$.each(addresses, function (i, address)
{
items = $("<li>" + address.Name + "</li>");
list.append(items);
});
$(".ui-content", $page).append(list);
$("ul", $page).listview();
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- home-page -->
<div data-role="page" id="homepage">
<div data-role="header" data-position="fixed"><h1>mobile</h1></div>
<div class="ui-content" role="main">
<ul data-role="listview" id="categories">
<li>Oficina</li>
<li>Seguro</li>
<li>Reboque</li>
</ul>
</div>
</div>
<!-- page addresses list -->
<div data-role="page" id="addresses">
<div data-role="header" data-position="fixed"><h1>mobile</h1></div>
<div class="ui-content" role="main"></div>
</div>
</body>
</html>
The code you're using, you populate listview on pagebeforechange event, which is triggered before any other page event. You should populate listview before you navigate to target page, using .success or .complete callback.
$.ajax({
type: "POST",
url: "URL",
crossDomain: false,
beforeSend: function () {
$.mobile.loading('show')
},
complete: function () {
$.mobile.loading('hide')
},
data: {
CategoryId: categoryId
},
dataType: 'json',
success: function (addresses) {
showAddresses(page, addresses);
$.mobile.pageContainer.pagecontainer("change", "#addresses");
},
error: function () {
console.log("loadList error!");
}
});
Demo - Code
I can't get any icons to be shown on a modal dialog box when I try to use jQueryUI via Google Ajax API. The icons do not appear but when I click on the locations where they are supposed to be the relevant functinality works (e.g. I can resize and close the modal dialog box). Here's the problematic screenshot and my code for Jetpack:
http://www.flickr.com/photos/64416865#N00/4303522684/
function testJQ() {
var doc = jetpack.tabs.focused.contentDocument;
var win = jetpack.tabs.focused.contentWindow;
$.get("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js", function(js) {
var script = doc.createElement("script");
script.innerHTML = js;
doc.getElementsByTagName('HEAD')[0].appendChild(script);
$.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js", function(js) {
var script = doc.createElement("script");
script.innerHTML = js;
doc.getElementsByTagName('HEAD')[0].appendChild(script);
$.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css", function(js) {
var style = doc.createElement("style");
style.innerHTML = js;
doc.getElementsByTagName('HEAD')[0].appendChild(style);
script = doc.createElement("script");
script.innerHTML = 'var myDialogFunc = function () {';
script.innerHTML += '$("<div id=dialog title=\\"Basic Dialog\\"> <p>The dialog window can be moved, resized and closed with the X icon.</p></div>").appendTo("body");';
script.innerHTML += '$("#dialog").dialog({'
script.innerHTML += ' bgiframe: true, height: 140, modal: true';
script.innerHTML += ' });';
script.innerHTML += '};';
doc.body.appendChild(script);
win.wrappedJSObject['myDialogFunc']();
});
});
});
}
On the other hand, in a simple html document I can use Google Ajax API, load jquery and jQueryUI and get the icons correct without any problems. Here's the screenshot and source code that works as I expect:
http://www.flickr.com/photos/64416865#N00/4303522672/
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var myDialogFunc = function () {
$("#dialog").dialog({
bgiframe: true,
height: 140,
modal: true
});
};
// Load jQuery
google.load("jquery", "1.4.0");
google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(function() {
myDialogFunc();
});
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
</head>
<body>
<div id="dialog" title="Basic Dialog">
<p>The dialog window can be moved, resized and closed with the X icon.</p>
</div>
</body>
Any ideas about why I can't get the icons in my Jetpack version?
Code below solves my problem:
js = js.replace("url(", "url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/", "g");
style.innerHTML = js;