I have dynamically created select menu. How can I dynamically change selected value to third value(Apple).
HTML
<div>
<select id="stylex" data-mini="true"> </select>
</div>
Code
var wid_settings = ["Banana","Orange","Apple","Mango"];
wid_settings_refresh();
function wid_settings_refresh() {
var index;
for (index = 0; index < wid_settings.length; index++) {
$('#stylex').append('<option value='+index+'>'+wid_settings[index]+'</option>');
}
$('#stylex').listview('refresh');
}
// this is not working
$('#stylex').val(3);
$('#stylex').selectmenu("refresh");
JSFiddle
Updated your JS fiddle: http://jsfiddle.net/rhLt2sxj/5/
var wid_settings = ["Banana", "Orange", "Apple", "Mango"];
wid_settings_refresh();
function wid_settings_refresh() {
var index;
for (index = 0; index < wid_settings.length; index++) {
$('#stylex').append('<option value=' + index + '>' + wid_settings[index] + '</option>');
}
$('#stylex').val(3);
//$('#stylex').listview('refresh'); //not necessary
}
Related
I am trying to get data from a custom field in the KML file to display in the div id=summary section when that KML file is selected from either the map or the sidebar. I just simply copied the sidebar html to make a summary html section and wanted the content from the KML at (Document/Folder/Placemark/summary.text) to be displayed in that div tag.
<table style="width:100%;">
<tr>
<td>
<div id="loaddiv">Loading..... please wait!
<br />
</div>
<div id="map_canvas">
</div>
</td>
<td>
<div id="sidebar" style="width:300px;height:600px; overflow:auto"></div>
</td>
<td>
<div id="summary" style="width:300px;height:600px; overflow:auto"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="link"></div>
</td>
</tr>
</table>
I feel like this may require some function overrides from the geoxml3.js file. I saw a section that had the below in geoxml3.js and it seemed like there may need to be something added to pull info from the KML file.
placemark = {
name: geoXML3.nodeValue(node.getElementsByTagName('name')[0]),
description: geoXML3.nodeValue(node.getElementsByTagName('description')[0]),
styleUrl: geoXML3.nodeValue(node.getElementsByTagName('styleUrl')[0]),
id: node.getAttribute('id')
};
Website with summary table column next to the sidebar column:
https://s20.postimg.cc/6jjcrnke5/geo1.png
KML files XML view:
https://s20.postimg.cc/4eyzqkqh9/geo2.png
Create the below functions:
function showSummary(pm, doc) {
summaryHtml = geoXmlDoc[doc].placemarks[pm].summary;
document.getElementById("summary").innerHTML = summaryHtml;
}
function clickPoly(poly, polynum, doc) {
google.maps.event.addListener(poly, "click", function() {
showSummary(polynum, doc);
});
}
In the function useTheData(doc) add clickPoly(placemark.polygon, i, j); under the line highlightPoly(placemark.polygon, i, j); and add clickPoly(placemark.polyline, i, j); under the line highlightPoly(placemark.polyline, i, j);.
Lastly add showSummary(pm, doc); to the first line in the function kmlPlClick(pm, doc).
create a custom parse function for the custom tag in your KML (parses that information from the KML and populates a custom field in the object processed by geoxml3
example: http://www.geocodezip.com/geoxml3_test/votemap_address2.html)
// Custom placemark parse function
function parsePlacemark (node, placemark) {
var summaryNodes = node.getElementsByTagName('summary');
var summary = null;
if (summaryNodes && summaryNodes.length && (summaryNodes .length > 0)) {
placemark.summary = geoXML3.nodeValue(summaryNodes[0]);
}
}
add code to put that information in the <div> on a click (from #PieDev's answer):
function showSummary(pm, doc) {
summaryHtml = geoXmlDoc[doc].placemarks[pm].summary;
document.getElementById("summary").innerHTML = summaryHtml;
}
function clickPoly(poly, polynum, doc) {
google.maps.event.addListener(poly, "click", function() {
showSummary(polynum, doc);
});
}
function kmlPlClick(pm,doc) {
showSummary(pm, doc);
if (geoXmlDoc[doc].placemarks[pm].polyline.getMap()) {
google.maps.event.trigger(geoXmlDoc[doc].placemarks[pm].polyline,"click", {vertex: 0});
} else {
geoXmlDoc[doc].placemarks[pm].polyline.setMap(map);
google.maps.event.trigger(geoXmlDoc[doc].placemarks[pm].polyline,"click", {vertex: 0});
}
}
function useTheData(doc){
var currentBounds = map.getBounds();
if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
// Geodata handling goes here, using JSON properties of the doc object
sidebarHtml = '<table><tr><td>Show All</td></tr>';
geoXmlDoc = doc;
for (var j = 0; j<geoXmlDoc.length;j++) {
if (!geoXmlDoc[j] || !geoXmlDoc[j].placemarks || !geoXmlDoc[j].placemarks.length)
continue;
for (var i = 0; i < geoXmlDoc[j].placemarks.length; i++) {
var placemark = geoXmlDoc[j].placemarks[i];
if (placemark.polygon) {
if (currentBounds.intersects(placemark.polygon.bounds)) {
makeSidebarPolygonEntry(i,j);
}
var kmlStrokeColor = kmlColor(placemark.style.color);
var kmlFillColor = kmlColor(placemark.style.fillcolor);
var normalStyle = {
strokeColor: kmlStrokeColor.color,
strokeWeight: placemark.style.width,
strokeOpacity: kmlStrokeColor.opacity,
fillColor: kmlFillColor.color,
fillOpacity: kmlFillColor.opacity
};
placemark.polygon.normalStyle = normalStyle;
highlightPoly(placemark.polygon, i, j);
clickPoly(placemark.polygon, i, j);
}
if (placemark.polyline) {
if (currentBounds.intersects(placemark.polyline.bounds)) {
makeSidebarPolylineEntry(i,j);
}
var kmlStrokeColor = kmlColor(placemark.style.color);
var normalStyle = {
strokeColor: kmlStrokeColor.color,
strokeWeight: placemark.style.width,
strokeOpacity: kmlStrokeColor.opacity
};
placemark.polyline.normalStyle = normalStyle;
highlightPoly(placemark.polyline, i, j);
clickPoly(placemark.polyline, i, j);
}
if (placemark.marker) {
if (currentBounds.contains(placemark.marker.getPosition())) {
makeSidebarEntry(i,j);
}
}
}
}
sidebarHtml += "</table>";
document.getElementById("sidebar").innerHTML = sidebarHtml;
};
working example
I have an input to which I wish to bind a dataAdapter for a custom query as described in https://select2.org/upgrading/migrating-from-35#removed-the-requirement-of-initselection
<input name="pickup_point">
My script:
Application.prototype.init = function() {
this.alloc('$pickupLocations',this.$el.find('[name="pickup_point"]'));
var that = this;
$.fn.select2.amd.require([
'select2/data/array',
'select2/utils'
], function (ArrayData, Utils) {
var CustomData = function($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
};Utils.Extend(CustomData, ArrayData);
CustomData.prototype.query = function (params, callback) {
var data = {
results: []
};
console.log("xxx");
for (var i = 1; i < 5; i++) {
var s = "";
for (var j = 0; j < i; j++) {
s = s + params.term;
}
data.results.push({
id: params.term + i,
text: s
});
}
callback(data);
};
that.$pickupLocations.select2({
minimumInputLength: 2,
language: translations[that.options.lang],
tags: [],
dataAdapter: CustomData
});
});
}
But when I type the in the select2 search box the xxx i'm logging for testing doesn't appear in my console.
How can I fix this?
I found the solution on
https://github.com/select2/select2/issues/4153#issuecomment-182258515
The problem is that I tried to initialize the select2 on an input field.
By changing the type to a select, everything works fine.
<select name="pickup_point">
</select>
I am trying to refresh a bootstrap 3.0 multiselect control.
On refresh, I want to reset the checkboxes to its previous state when the partial view was first rendered
How can I achieve that?
I tried following approach but didn't get success.
Maintained hidden field for storing selected checkbox values once view
was rendered.
On Reset button click:
2.1 Uncheck all checkboxes.
2.2 Check only those checkboxes whose value I got from hidden field.
j('#btnReset11').click(function () {
j("#divErrorMessage ul li").not(':first').remove();
j("#divErrorMessage").hide();
j("#divSuccessMessage").hide();
j("#includeSelectAllOption").find("option").removeAttr("selected");
j("#chkRoles ul li").removeClass("active");
j("#chkRoles .btn-group").find("button").removeAttr('title');
j("#chkRoles .btn-group").find("button").text('Select');
var value = j("#selectedCheckboxes").val();
valueItems = value.split(", ");
for (var i = 0; i < valueItems.length; i++) {
j('#' + valueItems[i]).attr('selected', 'selected');
j("#chkRoles ul li input[value=" + valueItems[i] + "]").parent().parent().parent().addClass("active");
var title = j("#chkRoles .btn-group").find("button").title;
j("#chkRoles .btn-group").find("button").removeAttr(title);
}
if (valueItems.length > 0) {
j("#chkRoles .btn-group").find("button").text(valueItems.length + ' selected');
}
else {
j("#chkRoles .btn-group").find("button").text('Select');
}
});
j(document.body).on('click', '#btnReset-Button', function () {
j("#divErrorMessage").hide();
j(this).parents('.PopupModalClass').find('input[type="text"],input[type="email"],select').each(function () {
if (this.defaultValue != '' || this.value != this.defaultValue) {
this.value = this.defaultValue;
setTimeout(function () {
j('.PopupModalClass #multiSelectDropdown').multiselect('refresh');
});
} else { this.value = ''; }
});
});
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:
I have create JSON. and I have working in jquery mobile, This will not work in my code. Code is executed but element will not append.
var serviceName= [{..},{..},{..}]
$('#service_select').empty();
$('#service_select').append('<select name="day" id="day">');
for(var i = 0; i < serviceName.length; i++ ){
$('#service_select').append('<option value=" '+ serviceName[i].name+'">'+serviceName[i].name+'</option>');
}
$('#service_select').append('</select>');
html code
<div id="service_select"></div>
First ,Close select tags and append it to service_select DIV ,Then append option to it ,Because evenif you dont specify,jQuery creates closing tags immediately for if you dont specify
//NEW CODE just copy paste
<script>
var serviceName= [1,3,5,7,9];
$('#service_select').empty();
$("#service_select").append('<select name="day" id="day"></select>');
for(var i = 0; i < serviceName.length; i++ ){
$("#service_select select").append(new Option(serviceName[i], serviceName[i]));
}
</script>
Check jsfiddeel http://jsfiddle.net/TfM9S/
This is because the first append() creates the closing </select>, too. jQuery will not create invalid html.
try this:
$('#service_select').empty();
$('#service_select').append('<select name="day" id="day"></select>');
for(var i = 0; i < serviceName.length; i++ ){
$('#service_select select').append('<option value=" '+ serviceName[i].name+'">'+serviceName[i].name+'</option>');
}
It is suggested to use this form:
var $selectElement = $('<select>', {
'name': 'day',
'id': 'day'
});
for(var i = 0; i < serviceName.length; i++ ){
var $optionEl = $('<option>', {
'value': serviceName[i].name,
'text': serviceName[i].name
});
$selectElement.append($optionEl);
}
It works Properly
var serviceName = [{..},{..}]
$(document).on("pageinit","#anotherPageId", function(){
$('#service_select').empty();
$('#service_select').append('<select name="service" id="service"></select>');
for (var i = 0; i < serviceName.length; i++) {
$('#service_select select').append('<option value=" ' + serviceName[i].name + '">' + serviceName[i].name + '</option>');
}
});