I use the jquery easy autocomplete plugin which has an internal event "onSelectItemEvent".
now i want to call this event from outside (since it is bound to an extensive function i wrote already).
I prepared a fiddle, but triggering the plugins event with this doesn't work :)
$("#example-ac").easyAutocomplete(this.list.onSelectItemEvent());
$(document).ready(function() {
var options_ac = {
url: "https://fcgi.msk.link/model-json.pl?site=test",
getValue: function(element) {
//console.log(element);
return element;
},
list: {
match: {
enabled: true
},
sort: {
enabled: true
},
maxNumberOfElements: 8,
onSelectItemEvent: function() {
$("output").html($("#example-ac").val())
}
},
theme: "square"
};
$("#example-ac").easyAutocomplete(options_ac);
$("#trigga").click(function() {
$("#example-ac").easyAutocomplete(this.list.onSelectItemEvent());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<input id="example-ac" />
<br>
<input id="example-ac" /><br/>
<output></output>
<button id="trigga">
trigger
</button>
http://jsfiddle.net/Lgetus29/
Thanks for a hint if this works or if the solution has to be done another way. the codepen example is just small code while the real coding for this internal function is massive, so i want to reuse. maybe i better create a function outside the plugin then reuse this function in the "onSelectItemEvent()", is that even possible?
THANKS !!
Why not use it like
$("#trigga").click(function() {
options_ac.list.onSelectItemEvent()
});
So your final code will look like
$(document).ready(function() {
var options_ac = {
url: "https://fcgi.msk.link/model-json.pl?site=test",
getValue: function(element) {
//console.log(element);
return element;
},
list: {
match: {
enabled: true
},
sort: {
enabled: true
},
maxNumberOfElements: 8,
onSelectItemEvent: function() {
$("output").html($("#example-ac").val())
}
},
theme: "square"
};
$("#example-ac").easyAutocomplete(options_ac);
$("#trigga").click(function() {
options_ac.list.onSelectItemEvent();
});
});
Related
I am trying to call window.addEventListener on my custom behavior however im not having any luck getting it to work.
test-bahvior.html
<script>
"use strict";
window.MyTest = window.MyTest || {};
MyTest.Test = {
properties: {
globals: {
type: Boolean,
notify: true,
value: false
}
},
ready: function() {
setTimeout(() => {
this.globals = true;
console.log('changed val ' + this.globals);
}, 5000);
},
};
</script>
i am then trying to callwindow.addEventListener("globals-changed", this._test); in the ready: function() of another html file (myapp.html) however this._test doesnt seem to fire despite the setTimeout causing the value change.
I have been following the Polymer 1 docs:
https://polymer-library.polymer-project.org/1.0/docs/devguide/properties#notify
Help is much appreciated.
TIA
I'm migrating the select2 component from 3.4.5 to 4.0.13 (to solve this issue: https://snyk.io/test/npm/select2/3.4.5) but I've a lot of wrapped code around it and I'm having a lot of problems upgrading.
I've a sandbox and I found the first problems there:
If I use a "div" to create the component (as in my application), the (obsolete) callback "initSelection" works as I need, but then I've no way to get the selected values from the component. And I think that is the problem because the elements of the "initSelection" are shown but not "set".
var sourceData = [
{id:"1",text:"Hello!"}, {id:"2",text:"Welcome!"}, {id:"3",text:"Good bye!"}, {id:"3",text:"Good night!"}
];
$(document).ready(function() {
$('.mpm-select').select2({
data: sourceData,
multiple: true,
initSelection: function (element, callback) {
var data = sourceData;
$(element.val()).each(function () {
data.push({id: this, text: this});
});
callback(data);
},
});
});
.mpm-select {
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.full.min.js"></script>
<div class="mpm-select"></div>
If I use a "input" to create the component (it will requires some changes on my application), "initSelection" callback is not triggered on creation, but I can use the jQuery element to call val() function.
var sourceData = [
{id:"1",text:"Hello!"}, {id:"2",text:"Welcome!"}, {id:"3",text:"Good bye!"}, {id:"3",text:"Good night!"}
];
$(document).ready(function() {
$('.mpm-select').select2({
data: sourceData,
multiple: true,
initSelection: function (element, callback) {
var data = sourceData;
$(element.val()).each(function () {
data.push({id: this, text: this});
});
callback(data);
},
});
});
.mpm-select {
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.full.min.js"></script>
<input class="mpm-select"></div>
How I can get the values of the select2 element when it's a "div" or how can I force to trigger "initSelection" callback when it's an "input"?
i have a jQUery-confirm and im trying to display some content which have a select and my select.selectMenu() doesn't seem to work because it's being displayed inside the jQUery-confirm. It's just showing the default select.I can easily call .selectMenu() on a select outside the scope and it will change from select to a selectmenu. Example:
HTML:
<div id="aDiv">
<select id="aSelect"> <option value="1"> 1 </option></select>
</div>
<button type="button" id="aButton">Click </button>
CSS:
#aDiv {
display: none;
}
JS:
$(document).ready(function() {
$('#aSelect').selectmenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});
How do i make jquery-confirm show jquery ui widgets like selectmenu?
try this, you need to add html markup inside jconfirm and initialize the selectMenu plugin, its better to write the markup inside content instead of defining it outside.
$(document).ready(function() {
// $('#aSelect').selectMenu();
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: function(){
return $('#aDiv').html(); // put in the #aSelect html,
},
onContentReady : function() {
this.$content.find('#aSelect').selectMenu(); // initialize the plugin when the model opens.
},
onClose : function() {
}
});
});
});
Please try the following:
You have missed the # for id
$(document).ready(function() {
$('#aSelect').selectMenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});
I am using sencha touch to develop mobile website.
Ext.setup( {
onReady: function() {
new Ext.Carousel({
fullscreen: true,
items: [
{
html: "Item1"
},
{
html : "Item2"
}
]});};});
is what i use. But is it possible to override next() and prev() functions. Actually i want to do something inside those function and then call parent.next() i mean same function .
Any help??
I saw the link http://www.sencha.com/forum/showthread.php?110036-Override-Method
But i cant understand that
Refer this code for your requirement.
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
launch: function () {
Ext.define('MyApp.view.inbox.MyInbox', {
extend: 'Ext.Carousel',
config: {
itemId:'test',
fullscreen: true,
items: [{
html: "Item1"
},{
html : "Item2"
}]
},
next:function(){
//Do your thing
//This code will call the next in the super class
this.callParent(arguments);
},
prev:function(){
//Do your thing
//This code will call the prev in the super class
this.callParent(arguments);
}
});
Ext.create('MyApp.view.inbox.MyInbox');
}
});
I can create a jquery object inline like this (this code is working)
$('#tip').qtip({
content: el.REASON,
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
},
style: {
tip: {
corner: 'leftMiddle',
},
border: {
radius: 11,
width: 4
},
name: 'red'
},
show: {
ready: true,
effect: { type: 'slide' }
},
hide: {
when: { target: jq, event: 'click' },
effect: function() {
$(this).fadeTo(200, 0);
}
}
})
now I want to move this JSON to a function, because I have multiple constructors in my code (this code is not working)
function qtipJSON(el, jq) {
return
{
content: el.REASON,
position: {
corner: {
target: 'rightMiddle',
tooltip: 'leftMiddle'
}
},
style: {
tip: {
corner: 'leftMiddle',
},
border: {
radius: 11,
width: 4
},
name: 'red'
},
show: {
ready: true,
effect: { type: 'slide' }
},
hide: {
when: { target: jq, event: 'click' },
effect: function() {
$(this).fadeTo(200, 0);
}
}
}
};
$('#tip')(qtipJSON(el, qj))
My error is
Uncaught SyntaxError: Unexpected token {
I've noticed that it's because of nested jsons.
WORKING:
function a(){
return {sdasda:'asda',sdasd:'asdas'}
}
for(i in a()){
document.write(i)
}
ALSO WORKING:
function a(){
return {sdasda:'asda',sdasd:'asdas', aa:{sds:'1212', sddss:'2222'}}
}
for(i in a()){
document.write(i)
}
Replace this
return
{
content: el.REASON,
...
by this:
return {
content: el.REASON,
...
and welcome to the club of people injured by JS semicolon injection.
You cannot end a line with return if you want to return an object literal because of implicit semicolon injection.
By moving the opening left brace to the same line as the return it will work.
Here is a slight tweak of what you have: http://jsfiddle.net/FqCVD/ (I made some string literals to compensate for undefined variables).
The problem with your final example is a missing : after aa. It should be
return {sdasda:'asda',sdasd:'asdas', aa: {sds:'1212', sddss:'2222'}}
Your function function qtipJSON(el, jq) is missing a semicolon at the end of the return.
As others have mentioned, the problem is the 'return' keyword on a line by itself. When you have a problem like this one try JSLint. It would have reported this error.
javascript will assume you forgot a semi-column and give you this:
return {;
par: 'val'
});
Which won't work. What you should do is wrap your return value/object in parenthesis, like this:
return ({
par: 'val'
});