Here's the html:
<form>
<fieldset data-role="controlgroup" data-type="horizontal" id="buddies" />
</form>
Here's the javascript:
for (var i = 0; i < json.length; i++) {
var usr = json[i];
var mid = usr.mid;
var input = '<input id="' + mid + '" type="checkbox"';
var photo = usr.photo;
if (typeof photo === 'undefined') {
photo = '<span class="middle"></span><br/>';
no_photo_ids[no_photo_ids.length] = mid;
} else {
photo = '<span class="middle"><img src="' + photo + '"/></span><br/>';
if (max_invite_messages-- > 0) {
input += ' checked="checked"';
}
}
input += '>';
var label = '<label for="' + mid + '">' + photo + usr.name + '</label>';
$('#buddies').append(input);
$('#buddies').append(label);
}
$('#buddies').trigger('create');
It works all right in jquery mobile 1.3.2, just like:
But it messed up in 1.4.3, just like:
Finally I found a solution: Control group loses control after dynamic add of radio button - jQuery Mobile
1.3.2 is easy to work like this:
$('#buddies').append(...);
$('#buddies').append(...);
...
$('#buddies').trigger('create');
1.4.3 is much a mess like this:
$('#buddies').controlgroup("container").append(...);
$('#buddies').controlgroup("container").append(...);
...
$('#buddies').enhanceWithin().controlgroup("refresh");
Now it works pretty good:
Related
I am using jquery-ui autocomplete with multicolumn using _renderMenu and _renderItem as per jsfiddle
$.widget('custom.mcautocomplete', $.ui.autocomplete, {
_renderMenu: function(ul, items) {
var self = this,
thead;
if (this.options.showHeader) {
table = $('<div class="ui-widget-header" style="width:100%"></div>');
$.each(this.options.columns, function(index, item) {
table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
});
table.append('<div style="clear: both;"></div>');
ul.append(table);
}
$.each(items, function(index, item) {
self._renderItem(ul, item);
});
},
_renderItem: function(ul, item) {
var t = '',
result = '';
$.each(this.options.columns, function(index, column) {
t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + item[column.valueField ? column.valueField : index] + '</span>'
});
result = $('<li></li>').data('item.autocomplete', item).append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>').appendTo(ul);
return result;
}
});
Change event is triggered if I click outside of autocomplete without selecting any result.
But change event is not triggered when clicking on header(column) and then clicking on outside.
Thanks in advance
I managed to fix the problem, jquery changed the key by which autocomplete saves the item data from 'item.autocomplete' to 'ui-autocomplete-item' so the fix is to change your line:
result = $('<li></li>').data('item.autocomplete', item).append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>').appendTo(ul);
to
result = $('<li></li>').data('ui-autocomplete-item', item).append('<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>').appendTo(ul);
Here is a working jsfiddle using jquery 1.10
I'm trying to make use of the knockout slider binderhalders that RP Niemeyer has posted a few times. Unfortunately while trying to use it I receive the error within the title.
(function($){
ko.bindingHandlers.slider = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().sliderOptions || {};
var sliderValues = ko.utils.unwrapObservable(valueAccessor());
if(sliderValues.min !== undefined) {
options.range = true;
}
options.slide = function(e, ui) {
if(sliderValues.min) {
// Errors here
sliderValues.min(ui.values[0]);
sliderValues.max(ui.values[1]);
} else {
sliderValues.value(ui.value);
}
};
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).slider("destroy");
});
$(element).slider(options);
},
update: function (element, valueAccessor) {
var sliderValues = ko.toJS(valueAccessor());
if(sliderValues.min !== undefined) {
$(element).slider("values", [sliderValues.min, sliderValues.max]);
} else {
$(element).slider("value", sliderValues.value);
}
}
};
this.range = {
'cook': function(kitchen, name, label, recipe){
var food = new this.viewModel(kitchen);
food.name = name;
food.label = label;
food.total(recipe.numberOfResults);
food.criteriaMin = recipe.minValue;
food.criteriaMax = recipe.maxValue;
return food;
},
'viewModel': function(kitchen){
var self = this;
this.name = '';
this.label = '';
this.total = window.ko.observable();
this.criteriaMin = ko.observable(0);
this.criteriaMax = ko.observable(100);
this.loading = window.ko.observable(false);
this.template = '';
this.getSelection = function(){
return null;
};
this.setSelection = function(){
};
},
'template': '<th class="idc-td-criteria" scope="row" data-bind="text:label"></th>' +
'<td class="idc-td-value idc-td-slider">' +
' <label for="AmountMin" class="hiddenText">Amount Min</label>' +
' <input type="text" data-default="0" data-maxdecimal="2" class="idc-textinput idc-sliderinput" maxlength="6" data-bind="value: criteriaMin || \'0.00\'">' +
' <span class="slider" data-bind="slider: { min: criteriaMin, max: criteriaMax }, sliderOptions: {min: 0, max: 100, step: 1}"></span>' +
' <label for="AmountMax" class="hiddenText">Amount Max</label>' +
' <input type="text" data-default="10" data-maxdecimal="2" class="idc-textinput idc-sliderinput" maxlength="6" data-bind="value: criteriaMax || \'10.00\'">' +
'</td>' +
'<td class="idc-td-results" data-bind="text:total"></td>' +
'<td class="idc-td-remove">' +
' <a href="#">' +
' <img src="images/column_delete.png" alt="Delete criteria [criteria name]" role="button" />' +
' </a>' +
'</td>'
};
}).call(window.idmsScreener.chefs, jQuery);
I've tried to change it from sliderValues.min() to sliderValues.min = ui.values[0]; However by changing that I can't seem to get the values back correctly. I also tried changing the min and max values of the slider options so that they are not statically set but that throws a completely different error. Any help on solving this would be greatly appreciated.
Was able to resolve this. Determined that I was setting my min and max criteria in correctly. I was doing assignment using an equals sign which was overriding the observable.
I am facing an problem in phonegap while integrating native EmailComposer.
MailComposer should open up on button click, but it does not shows the mailComposer for IOS, same code for android is working,
My Code is as follow:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="emailcomposer.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", deviceready, true);
function deviceready() {
console.log("Device ready");
}.
//function to send mail using mail composer
function composeText(){
var vehiclemileage = document.getElementById('vehiclemileage').value;
var vehiclemodel = document.getElementById('vehiclemodel').value;
var message1 = document.getElementById('message_body').value;
var vechicleyear = document.getElementById("yeardropdown");
var strUser = vechicleyear.options[vechicleyear.selectedIndex].value;
var vehiclemake = document.getElementById("vehiclemake");
var makevehicle = vehiclemake.options[vehiclemake.selectedIndex].value;
var deviceName = device.platform;
var devicemodel = device.model;
if(vehiclemodel == '' || makevehicle == ''){
alert("Please Enter all the Value");
navigator.notification.alert(
'Please Enter all the Value', // message
alertDismissed, // callback
'Vehicle and Model', // title
'Ok' // buttonName
);
}
else
{
//function to check folder named "RepairMyCar" and extract picture from folder to attach it to mail
var attachPath;
var attachFile= new Array();
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
fileSystem.root.getDirectory("RepairMyCar", {
create: true
},
function(directory) {
console.log("Final 63" + directory.fullPath);
attachPaths = directory.fullPath;
var attachPath=attachPaths.slice(7,attachPaths.length);
var directoryReader = directory.createReader();
directoryReader.readEntries(function(entries) {
var i;
for (i=0; i<entries.length; i++) {
console.log(entries[i].name);
attachFile[i] =attachPath + "/" + entries[i].name;
}
console.log(attachFile);
},
function (error) {
alert(error.code);
});
});
}, function(error) {
alert("can't even get the file system: " + error.code);
});
var dated, fnamed, phoned, emailed;
if(typeof(Storage)!=="undefined")
{
dated = localStorage.date;
fnamed = localStorage.fname;
phoned = localStorage.phone;
emailed= localStorage.email;
}
console.log(attachFile);
var newattachment = attachFile.toString();
//Open mail composer with all datas
setTimeout(function(){window.plugins.emailComposer.showEmailComposerWithCallback(null,
"Get an Estimate",
"Date: " + dated + '<br>' + "First Name: " + fnamed + '<br>' + "Phone Number: " + phoned + '<br>' + "Email Address: " + emailed + '<br>' + "Year of Vehicle: " + strUser + '<br>' + "Make of Vehicle: " + makevehicle + '<br>' + "Model of Vehicle: " + " " + vehiclemodel + '<br>' +
"Mileage of Vehicle: " + " " + vehiclemileage + '<br>' + message1 + '<br>' + "Sent from My:" + deviceName + devicemodel,
[sth#sth.com],
[],
[],
true,
attachFile
);},100);
//Clear LoccalStorage
localStorage.clear();
//exit the app after clicking this button
navigator.app.exitApp();
// navigator.camera.cleanup(onSuccess,fail);
// function onSuccess(){
// }
// function fail(){
// }
}
}
function onFail(message) {
alert('Failed because: ' + message);
}
/***********************************************
* Drop Down Date select script- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/
//function to load year in drodown. Default selected year : Current Year
function populatedropdown(yearfield){
var today=new Date()
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
//Select Year
var thisyear=today.getFullYear()
for (var y=0; y<25; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear-=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
</script>
</head>
<body>
<div class="wrapper">
<h1>Get a Repair Estimate</h1>
<div class="main-content">
<p>
Please Enter the Year, Make, Model and Mileage of Your Vehicle and any other information we should know.
</p>
<form class="vehicle-detail-form">
<ul>
<li>
<label>Year of Vehicle: </label>
<form action="" name="someform">
<select id="yeardropdown">
</select>
</form>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("yeardropdown")
}
</script>
</li>
<!-- Vehicle Year Selection -->
<li><label>Model of Vehicle:</label>
<input type="text" name="vehiclemodel" id = "vehiclemodel">
</li>
<li><label>Mileage of Vehicle:</label>
<input type="number" name="vehiclemileage" id = "vehiclemileage"></li>
<li>
<textarea name="message_body" id = 'message_body' placeholder="Add Notes here(if any)"></textarea>
</li>
</form>
<div style="clear:both;"></div>
<div class="large-button-wrapper">
<button onclick="composeText();">Get Your Estimate</button>
</div>
</div>
</div>
</body>
</html>
I have kept EmailComposer.h and EmailComposer.m in plugin folder as stated in this link
I found a workaround if you work on an iOS project. I have the same issue.
After view change in backbone router console.log stops working in Xcode you can use Safari Web Inspector on your Mac. Every console.log is visible there.
Here is my javascript code snippet:
<script>
function returnStringForID(param) {
var retStr =
param.replace(/[\. ,:-]+/g, '').replace(/'/g, '')
.replace(/&/g, '').replace(/\(|\)/g, '');
return retStr;
}
$(document).ready(function () {
var chanId = 'Demo';
var fs_dyn = $('#fs_dyn');
var data = ['Sony', 'Pix', 'Max', 'Set'];
var seriesColors = ['#4000E3', '#FFC526', '#FF0000', '#C0504D'
, '#1F497D', '#4BACC6', '#8064A2', '#9BBB59', '#F79646', '#948A54'];
for (var i = 0; i < data.length; i++) {
var checkId = "graphItem_" + i;
var color;
color = seriesColors[i];
var chanId = returnStringForID(data[i]);
var tmp = "";
tmp = "<input type='checkbox' checked='true' class='custom' value='" + data[i]
+ "' id='" + chanId + "' name='" + chanId + "'/>"
+ "<label for='" + chanId + "' style='font-size:12pt;font-weight:bold;color:"
+ color + "'>" + data[i] + "</label>";
fs_dyn.append(tmp);
}
fs_dyn.trigger('create');
});
</script>
Here is the HTML:
<td width='30%' style="vertical-align: top;" id="tdDynamic">
<fieldset data-mini='true' id='fs_dyn'></fieldset>
</td>
This code works perfect if done in raw html. However when inside a webview, checkbox doesn't style.
Also I have used .trigger('create') to style a nested collapsible in the same app which is also inside a webview, but that works fine.
PS: I am using JQM 1.3.1 version, just in case this helps.
Use pageinit event which is equivalent to .ready() or any jQuery Mobile events.
Demo
$(document).on('pageinit', function () {
// code
});
Using .ready() in jQuery Mobile isn't recommended, please refer to this post.
I want to be able to show the recent captured image via the button <button onclick="showImage();">Show Image</button><br>, but not sure how to do this and I can't find any good information about it in the Phonegap API. Basically it's the function showImage(); I need help creating.
The code for capturing an image is being executed correctly and I am running iOS 6.
Phonegap/Cordova:
<title>Capture Image</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="json2.js"></script>
<script type="text/javascript" charset="utf-8">
var captureSuccess = function(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
readDataUrl = mediaFiles[i].fullPath;
}
};
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
document.getElementById('errormsg').innerHTML = msg;
}
function captureImage(){
document.getElementById('format-data').innerHTML = "";
document.getElementById('capture-result').innerHTML = "";
navigator.device.capture.captureImage(captureImageSuccess, captureError, {limit: 1});
}
}
function captureImageSuccess(mediaFiles) {
var i, len;
var formatSuccess = function (mediaFiles) {
document.getElementById('format-data').innerHTML =
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
};
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
// uploadFile(mediaFiles[i]);
document.getElementById('capture-result').innerHTML = "<br/><strong>" + (i+1) + " file<br/> Path: " + mediaFiles[i].fullPath + "</strong><br/>" +
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
mediaFiles[i].getFormatData(formatSuccess, formatError);
}
console.log("captureImageSuccess");
}
</script>
</head>
HTML:
<body>
<button onclick="captureImage();">Capture Image</button> <br>
<button onclick="showImage();">Show Image</button><br>
<div class="result-block">
Capture Result: <span id="capture-result"></span><br/>
<span id="errormsg"></span>
</div>
</body>
</html>
Well you have the image's full path, just create an img element :
<img id="picResult" />
and in your javascript set it's url whenever you get a response:
var formatSuccess = function (mediaFiles) {
document.getElementById('format-data').innerHTML =
"Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
"Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
//HERE:
document.getElementById('picResult').src = mediaFiles[i].fullPath;
};
I posted answer to issue similar like yours. That post show you how you show captured picture on a thumbnail.
See how you could solve your issue: https://stackoverflow.com/a/14043467/1853864
HTML
<img id="picResult" width="100px" border="1" />
JS
// capture callback
function captureSuccess(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].fullPath;
// do something interesting with the file
$('#picResult').attr('src',path);
}
};
Make sure to check the PhoneGap version number on top right of these online docs to make sure you are doing things right.
SEE HOW HERE TOO PhoneGap - Media Docs