I have looked through all of the similar questions available at the time of this question, and none of the solutions presented worked in the below code. Google was also not helpful except that I did find a few issues with dynamic code where the entire menu was not wrapped, but those issues should be fixed with either the trigger or enhanceWithin methods - which have been tried here.
I am a fairly new with javascript and the jquery library and this is my first app with jquery mobile.
The raw html as generated from the php file:
<div class="cell_container force_org_select">
<label for"force_org[new_555]" class="ui-hidden-accessible">Troop Type</label>
<select name="force_org[new_555]" id="force_org[new_555]" class="roster_cell" data-mini="true">
<option value="hq">HQ</option>
<option value="elite">Elite</option>
<option value="solo">Solitaire</option>
<option value="formation">Std Formation</option>
</select>
The Javascript function that handles the dynamic injection:
$(document).on('click','.add_item', function(event) {
event.preventDefault();
var the_link = $(this).attr('href')
var area = getParameterByName(the_link, 'area');
var type = getParameterByName(the_link, 'type');
var squad_id = getParameterByName(the_link, 'squad_id');
var vehicle = getParameterByName(the_link, 'vehicle');
var divider = getParameterByName(the_link, 'divider');
var preset = $('#preset').val();
$.post(cmd_ajax.ajaxurl,{action: 'cmd_add_item_mobile', type: type, preset: preset, squad_id: squad_id, vehicle: vehicle, divider: divider}, function(data) {
if(type == 'squad' || type == 'divider') {
$('#list').append(data).enhanceWithin();
//$('#list').append(data).trigger("refresh");
//$('#list').append(data).trigger("create");
$('.squad_help_button').tooltipster({
contentCloning: true,
trigger: 'custom',
triggerOpen: {
click: true,
tap: true
},
triggerClose: {
click: true,
tap: true
}
});
}
else {
$('#' + area).append(data).enhanceWithin();
}
//console.log("squad_id:"+this_id);
set_unit_sortable();
});
return false;
});
I also tried adding the .selectmenu("refresh",true) within the function and that seems to do nothing. The custom selects that are not dynamically generated work fine.
If I use the data-native-menu="false" attribute on the generated select menus, the popup does not function and you cannot select anything, if I remove the attribute, the native select works as it should.
I thought about using a selectmenu() refresh at the very end of the function, but I can't seem to catch the element id of the select menu either. My only guess is that it isn't created yet in the DOM when I try to retrieve it.
Related
I am making a simple code editor using codemirror. I am at the last stage but a bug has occurred which I am not able to get my heads around.
I have a select html tag with three options:
<select class="language" id="lang" onclick="update()">
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="python">C</option>
</select>
And my update() function is:
function update() {
var select = $('#lang').val();
var editor = CodeMirror.fromTextArea($('#text'), {
mode: select,
theme: "blackboard",
});
}
update();
Now what happens is that everytime I select a different option from the dropdown, a new Code editor is added below the previous one.
Do you have some idea where I am going wrong in the code and how I can workaround?
Change your JS to this:
let editor;
function update() {
var select = $('#lang').val();
editor = editor ?? CodeMirror.fromTextArea($('#text'), {
theme: "blackboard",
});
editor.setOption('mode', select);
}
update();
This makes it so if editor already exists, it is not created again, but instead re-used.
I have a select element:
<select [id]="item.value.controlName" [(ngModel)]="item.value.outputVarianteValue"
(focus)="focusControl(item.value.controlName)"
<option *ngFor="let c of item.value.produkte" [ngValue]="c.name">{{c.wert}}</option>
</select>
I rebuild my GUI programmaticaly and want to reset the focus to the element selected before (focusedcontrol)
setTimeout(() => {
const element = this.ngrenderer.selectRootElement('#' + this.focusedControl);
console.log('set root focus: ', this.focusedControl, element)
element.focus();
}, 0)
This works without a problem on normal inputs but not on the selects. After callling ngrenderer.selectRootElement(#myselect) my select field is empty.
answer is here:
Renderer multiple selectRootElement Issue
If you want to preserve content then use the second boolean parameter
to true, like this: (using Angular 6+)
I am developing one custom plugin for the CKEditor 4.7 which do a simple think take in case user select some stuff it will put it in a div with specific class, else it will put a div with same class just with text like 'Add content here'
I try to use some functions according to CKEditor docs but have something really wrong.
here is the code for the plugin folder name=> customdiv, file=> plugin.js
CKEDITOR.plugins.add('customdiv', {
icons: 'smile',
init: function (editor) {
editor.addCommand( 'customdiv',{
exec : function( editor ){
var selection = editor.getSelection();
if(selection.length>0){
selection='<div class="desktop">'+selection+'</div>';
}else{
selection='<div class="desktop">Add your text here </div>';
}
return {
selection
};
}
});
editor.ui.addButton( 'Customdiv',
{
label : 'Custom div',
command : 'customdiv',
toolbar: 'customdiv',
icon : this.path + 'smile.png'
});
if (editor.contextMenu) {
editor.addMenuGroup('divGroup');
editor.addMenuItem('customdiv', {
label: 'Customdiv',
icon: this.path + 'icons/smile.png',
command: 'customdiv',
group: 'divGroup'
});
editor.contextMenu.addListener(function (element) {
if (element.getAscendant('customdiv', true)) {
}
});
}
}
});
According to some docs it have to return the result good.
Also this is how I call them in my config.js file
CKEDITOR.editorConfig = function (config) {
config.extraPlugins = 'templates,customdiv';
config.allowedContent = true;
config.toolbar = 'Custom';
config.toolbar_Custom = [
{ name: 'divGroup', items: [ 'Customdiv' ] },
{name: 'document', items: ['Source', '-', 'Save', 'Preview', '-', 'Newplugin']},
/* MOre plugins options here */
];
};
Note: the official forum was close and moved here :(
UPDATE
I have change the function like this
exec : function( editor ){
var selection = editor.getSelection();
if(selection.length>0){
selection='<div class="desktop">'+selection+'</div>';
CKEDITOR.instances.editor1.insertHtml( selection );
}else{
selection='<div class="desktop">Add your text here </div>';
CKEDITOR.instances.editor1.insertHtml( selection );
}
}
This makes it work for the else part, but still can't get the selected one.
UPDATE 2
After change of the if I can get data if is selected, but when I do insert selected between <div> I face a problem.
var selection = editor.getSelection();
give like result an object, and I funded out a more complex function and I get collected data like this
var selection = editor.getSelection().getNative();
alert(selection);
from this in alert I see the proper selection and not just object,but when I insert it like
CKEDITOR.instances.editor1.insertHtml('<div class="desktop">' + selection + '</div>');
it just put all selected in one line and not adding the div, new div for else case working with this syntax.
UPDATE 3
The problem now is this function
CKEDITOR.instances.editor1.insertHtml('<div>' + selection + '<div>');
it delete all existing HTML tags even if I add just selection without <div> I am not sure if this is because of the way I insert data or way I collect data, just in alert when I collect data I see correct space like in the editor.
user select some stuff it will put it in a div with specific class
If you want to check if selection is not empty, please instead of selection.length>0 try using !selection().getRanges()[0].collapsed.
If you need something more advanced you could also try using
!!CKEDITOR.instances.editor1.getSelection().getSelectedText() to see if any text was selected and !!CKEDITOR.instances.editor1.getSelection().getSelectedElement() to see if any element like e.g. image, tabl,e widget or anchor was selected.
EDIT:
If you need selected HTML please use CKEDITOR.instances.editor1.getSelectedHtml().getHtml();
Please also have a look at CKEditor documentation:
https://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getSelectedHtml
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dom_documentFragment.html#method-getHtml
https://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection-method-getSelectedText
https://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection-method-getSelectedElement
We are using elFinder for our software, and also using its file picker.
This is the (actually working) code:
var elfinderInstance = modalBody.elfinder({
lang: 'de',
[...],
getFileCallback: function(data) {
$("#" + fileInputId).val(data.url);
fileModal.modal("hide");
},
handlers : {
select : function(event, elfinderInstance) {
console.log(event.data.selected);
var selected = event.data.selected;
if (selected.length) {
selectedElement = elfinderInstance.url(selected[0]);
}
}
}
}).elfinder('instance');
However it is possible to select multiple files in the modal, by simply pressing the CTRL button and clicking on multiple files.
How can I disable this behaviour?
I already checked the select handler, and selected.length already returns the number of selected files but I can't figure out how to unselect the previously selected files so that only one file can be selected. I also found nothing in the Docs (https://github.com/Studio-42/elFinder/wiki).
With elFInder 2.1.17 or higher, the connector main option maxTargets is available. This is an option to suppress the load on the connector side, but it is also effective for this case.
$opts = array(
'maxTargets' => 1,
'roots' => array( .... ),
);
see https://github.com/Studio-42/elFinder/issues/2334
I have recently added a multi-language support to my jQuery-mobile/PhoneGap app using this great repo on gitHub.
It uses firebase and angular.js to bind all the language dependant labels and texts in my app to the currently selected language, like in this example:
<h2>{{getWord("SELECTION_CRITERIA")}}</h2>
However, there are some language-dependant texts in my app that cannot be simply bound to language data, I have found this so far:
<select id="sel" data-role="slider">
<option value="off">{{getWord("SELECT_OFF")}}</option>
<option value="on">{{getWord("SELECT_ON")}}</option>
</select>
The <option> element doesn't allow to bind it's text to the data (the rendered text is empty). I don't know why. I tried to test whether something like this could work:
<option value="off">{{1+2}}</option>
and yes, it displayed number 3 in the slider.
The angular.js part looks like this:
function LanguageCtrl($scope) {
$scope.words = JSON.parse('{}');
$scope.addWord = function(Name, Value) {
$scope.words[Name] = Value;
};
$scope.getWord = function(Name) {
return $scope.words[Name];
};
}
var ref;
var refLang;
var onLangChange;
$(document).on("pageinit", "#mainPage", function(event) {
ref = new Firebase('https://username.firebaseio.com/');
ChangeLangTo("En"); //default lang
});
function ChangeLangTo(lang) {
if (onLangChange !== undefined && onLangChange !== undefined) {
refLang.off('child_changed', onLangChange);
}
refLang = ref.child(lang);
//reading once all words
refLang.once('value', function(dataSnapshot) {
var lang = dataSnapshot.val();
angular.element($("#mainPage")).scope().$apply(function(scope) {
$.each(lang, function(key, value) {
scope.addWord(key, value);
});
});
});
//listening to changes
onLangChange = refLang.on('child_changed', function(childSnapshot, prevChildName) {
angular.element($("#mainPage")).scope().$apply(function(scope) {
scope.addWord(childSnapshot.name(), childSnapshot.val());
});
});
The JSON from firebase that is parsed into that variable is very simple, like:
{
"Cz": {
"SELECT_ON":"Ano",
"SELECT_OFF":"Ne"
},
"En": {
"SELECT_ON":"On",
"SELECT_OFF":"Off"
}
}
I think that the <button> element won't work, too. And there are some cases of setting an element text via an attribute, like in this case:
<ul data-filter-placeholder="Search items..."></ul>
I would like to make this work, too:
<ul data-filter-placeholder="{{getWord("SEARCH_ITEMS")}}"></ul>
I am very new to angular.js, can someone please explain me how to make this work? I have read some documentation on HTML SELECT element with angular data-binding, but do not quite understand how to apply it.
Thanks!