I can't figure this out for the life of me but I am trying to configure my JSTree to override the double click event so it is just single click event. Is this something added to the callback configuration? I am not sure how to do this, will I need to edit the JSTree source code? Documentation here: http://docs.planbleu.org/modules/webportal/jquery/jsTree.v.0.9.5/documentation/#configuration
I tried changing the "ondblclk" to "click" in the source code and then adding a "click" callback option to the config settings and it did nothing... I am probably doing it wrong though.
sending this into the tree creation function did the trick:
onselect: function(n, t) {
t.toggle_branch(n);
},
(where t is the reference to the tree)
I found the correct answer in an issue for the plugin on github. The above answers do NOT work. This absolutely works and is a comprehensive answer on how to call the plugin, and how to make it use single-click expand instead of double-click.
$('#jstree')
.on('click', '.jstree-anchor', function (e) {
$(this).jstree(true).toggle_node(e.target);
})
.jstree()
Here is a link to where the author mentions the solution, in case you need it.
$("#tree").bind("select_node.jstree", function (e, data) {
$("#tree").jstree("toggle_node", data.rslt.obj);
$("#tree").jstree("deselect_node", data.rslt.obj);
});
This might get you started in the right direction. You'll probably need to filter out which ones to expand or not depending on meta data.
$fullIndex.on('select_node.jstree', function(e, data){
data.instance.toggle_node(data.selected);
})
.jstree()
$("#your_id_where_Tree").on('select_node.jstree', function(e, data){
data.instance.toggle_node(data.selected);
});
Related
i use jodit in my website and wonder, how the content of an existing jodit editor can be updated within a function.
first i do....
$( document ).ready(function() {
var editor_adressblock = new Jodit('#adressblock', {
fullsize: false
});
});
and the editor is correctly created.
I have a function, which can be executed by the user and then should load content (via json-request) and then put the content into the existing jodit textarea.
Here is my try (for this example i have simplified the function) :
function takeover_adressblock(kunde_id, kunden_adresse_id) {
// get data by ajax.... not shown in this example
var data_by_ajax="test";
editor_adressblock.value=data_by_ajax; // this fails....
}
Means, i don't know how i can send data to the existing jodit texteditor...
I am a jquery beginner, so please don't be too hard ;-)
Best regards
Daniel
Per the documentation you seem to have the right format, so it would help to see the code for the ajax request you're making in case the issue is there.
Otherwise, I would suggest initializing the editor without jQuery in case it's a reference or scoping issue:
const editor = Jodit.make('#editor');
editor.value = '<p>start</p>';
I have a feature group containing several markers.
And I have this code to respond to a click on any of the markers:
sampleFeatureGroup.on("click", function(){
alert(this.id); // something like this
});
I want to be able to get the id of the marker which is clicked on from within the function, however "this" refers to the feature group, so I cannot find the id of the marker clicked on, this seems like it should be easy but I can't figure it out.
You must use eachLayer to iterate through the featureGroup, and then bind a function to the click event, like this:
group.eachLayer(function(layer) {
layer.on('click', function(){
alert(this._leaflet_id)
});
});
Here's a working example on Plunker:
http://plnkr.co/edit/4fh7vhVet8N0iD4GE3aN
And here's the reference to eachLayer:
http://leafletjs.com/reference.html#layergroup-eachlayer
Although it is possible to retrieve the ID using this._leaflet_id, this is not best practice because variables prefixed with _ should be treated as private.
Instead, it would be better to use the getLayerId() function like below:
group.eachLayer(function(layer) {
layer.on('click', function(){
alert(group.getLayerId(layer))
});
});
I have an input field in bootstrap 3 and I want to make it autocomplete with values from some local data, so I chose bootstrap-typeahead. The problem is that when the user chooses some value, I want to change the source of typeahead so that this value is no longer included in the available options. I have simplified a jsfiddle because the only thing that I can't do is change the source.
The following code doesn't work.
autocomplete.on('typeahead:closed', function( i, j) {
//change source
autocomplete.data('typeahead').source = altdata.ttAdapter();
});
Here: http://jsfiddle.net/gtzoumis/rdC3Z/4/
There are some answers for previous versions but none of them work.
the answer was to destroy the object and create it again...
thanks to this link
autocomplete.typeahead('destroy');
$('.autocomplete').typeahead(null, {
name: "autocomplete",
displayKey: 'name',
source: altrepos.ttAdapter()
});
i'm using the modal example from the bootstrap 3 docs. the modal works. however i need to access the show.bs.modal event when it fires. for now i'm just trying:
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
Nothing happens, the event does not fire. What am I doing wrong??? This doesn't make sense to me.
use this:
$(document).on('show.bs.modal','#myModal', function () {
alert('hi');
})
Make sure you put your on('shown.bs.modal') before instantiating the modal to pop up
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
or
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
}).modal('show');
To focus on a field, it is better to use the shown.bs.modal in stead of show.bs.modal but maybe for other reasons you want to hide something the the background or set something right before the modal starts showing, use the show.bs.modal function.
Wrap your function in $(document).ready(function() { }), or more simply, $(function() {. In CoffeeScript, this would look like
$ ->
$('#myModal').on 'show.bs.modal', (event)->
Without it, the JavaScript is executing before the document loads, and #myModal is not part of the DOM yet. Here is the Bootstrap reference.
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
Try this
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
Using shown instead of show also make sure you have your semi colons at the end of your function and alert.
Add this:
$(document).ready(function(){
$(document).on('shown.bs.modal','.modal', function () {
// DO EVENTS
});
});
Similar thing happened to me and I have solved using setTimeout.
Bootstrap is using the following timeout to complete showing:
c.TRANSITION_DURATION=300,c.BACKDROP_TRANSITION_DURATION=150,
So using more than 300 must work and for me 200 is working:
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
In my case, I was missing the .modal-dialog div
Doesn't fire event: shown.bs.modal
<div id="loadingModal" class="modal fade">
<p>Loading...</p>
</div>
Does fire event: shown.bs.modal
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<p>Loading...</p>
</div>
</div>
I had the same issue with bootstrap4.
The solution was to add it inside the jQuery document ready() function:
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
}
This happens when code might been executed before and it's not showing up so you can add timeout() for it tp fire.
$(document).on('shown.bs.modal', function (event) {
setTimeout(function(){
alert("Hi");
},1000);
});
I had a similar but different problem and still unable to work when I use $('#myModal'). I was able to get it working when I use $(window).
My other problem is that I found that the show event would not fire if I stored my modal div html content in a javascript variable like.
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
the event never fired because it didn't occur
my fix was to include the divs in the html body
<body>
<div id='myModal'>
...
</div>
<script>
$('#myModal).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
</script>
</body>
Remember to put the script after the call of "js/bootstrap", not before.
Had the same issue. For me it was that i loaded jquery twice in this order:
Loaded jQuery
Loaded Bootstrap
Loaded jQuery again
When jQuery was loaded the second time it somehow broke the references to bootstrap and the modal opened but the on('shown.bs..') method never fired.
Ensure that you are loading jQuery before you use Bootstrap. Sounds basic, but I was having issues catching these modal events and turns out the error was not with my code but that I was loading Bootstrap before jQuery.
Sometimes this doesn't work if:
1) you have an error in the java script code before your line with $('#myModal').on('show.bs.modal'...). To troubleshoot put an alert message before the line to see if it comes up when you load the page. To resolve eliminate JSs above to see which one is the problem
2) Another problem is if you load up the JS in wrong order. For example you can have the $('#myModal').on('show.bs.modal'...) part before you actually load JQuery.js. In that case your call will be ignored, so first in the HTML (view page source to be sure) check if the script link to JQuery is above your modal onShow call, otherwise it will be ignored. To troubleshoot put an alert inside the on show an one before. If you see the one before and not the one inside the onShow function it is clear that the function cannot execute. If the spelling is right more than likely your call to JQuery.js is not made or it is made after the onShow part
Make sure that you really use the bootstrap jquery modal and not another jquery modal.
Wasted way too much time on this...
In my case the problem was how travelsize comment.. The order of imports between bootstrap.js and jquery. Because I'am using the template Metronic and doesn't check before
i used jQuery's event delegation /bubbling... that worked for me. See below:
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
very good info too: https://learn.jquery.com/events/event-delegation/
The popular solution to put a setTimeout could work in some case, but is a terrible solution. I was myself using it amongst wraping it in $(document).ready() off course (but it never helped), but I was never able to have a reliable solution. Some browser/system take more time than other, and sometime 1000ms was not enough. And I was tired searching why the $(document).ready() wasn't helping, so :
I took a different approach.
I make the subscription to modal events when I need to use the modal for the first time.
Open my modal
and on the JS side :
function ShowModal() {
InitModalEventsOnce();
$('#MyModal').modal('show');
}
var InitModalEventsIsDone = false; // Flag to keep track of the subscribtion
function InitModalEventsOnce() {
if (!InitModalEventsIsDone) {
InitModalEventsIsDone = true;
$('#MyModal').on('shown.bs.modal', function () {
// something
})
$('#MyModal').on('hidden.bs.modal', function (e) {
// something
});
}
}
And that's it! The only reliable solution I found.
Try like this.
let mymodal=$('#myModal');
mymodal.on('show.bs.modal', function ()
{
alert('hi')
});
Below are the granular details:
show.bs.modal works while model dialog loading
shown.bs.modal worked to do any thing after loading. post rendering
I'm using the awesome CarouFredSel JQuery carousel plugin which includes features for integrating the JQuery TouchSwipe library for handheld devices as well.
The carousel elements are divs, within the div is an image and text wrapped in an <ahref> tag.
Everything works as it should, but I've noticed that if the carousel element (in this case a div) includes a link, the swipe effect on various mobile devices does not work.
If I remove the link around the image/text, the swiping motion works fine. It's almost as if preventDefault() is working in reverse. If I remove the link around the image, and leave the text as a link, the swiping works for the image, and not the text.
I can easily click the item as a link, I just cannot swipe if it IS a link.
Has anyone experienced this problem with CarouFredsel in particular?
Many thanks, SO.
Touchswipe is disabled by default for a elements.
See http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html
From the link:
By default the value of $.fn.swipe.defaults.excludedElements is "button, input, select, textarea, a, .noSwipe, " To replace or clear the list, re set the excludedElements array. To append to it, do the following (dont forget the proceeding comma) ...
excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div" });
I ended up just changing the defaults in the plugin, since all my modals were children of an anchor element.
excludedElements:"button, input, select, textarea, .noSwipe"
The carouFredSel with < a > doesn't work for me well with swipe 'inside'.
You can use excludedElements, but on Ipad you'll have to hold your finger to use < a > (longTap). That's not good for users. If you try to use carouFredSel({ swipe:( option { tap: function ... it won't work (at least in my case).
My solution is to use swipe (touchSwipe) separately:
$(".carusel").swipe({
excludedElements: "button, input, select, textarea, .noSwipe",
swipeLeft: function() {
$('.carusel').trigger('next', 4);
},
swipeRight: function() {
$('.carusel').trigger('prev', 4);
},
tap: function(event, target) {
window.open($(target).closest('.carusel-cnt').find('carusel-cnt-link').attr('href'), '_self');
}
});
Well, I'd really love to know if using links within TouchSwipe and the CarouFredSel plugin is possible, but I found a workaround that seems to work.
Hopefully it will help someone.
I ended up using a second touch jquery library, TouchWipe.
When, calling the CarouFredSel plugin, I set the swipe parameter to true:
$('#carousel-slider').carouFredSel({
width: '100%',
prev: '#prev-propslider',
next: '#next-propslider',
swipe: true
});
Then, calling both the TouchSwipe AND Touchwipe libaries (not sure if this matters, but I'm using the regular TouchSwipe swipe:true parameter for another slider without links), I wrote a separate function to call custom events for the TouchWipe plugin:
$('#carousel-slider').touchwipe({
wipeLeft: function() {
$('#carousel-slider').trigger('next', 1);
},
wipeRight: function() {
$('#carousel-slider').trigger('prev', 1);
}
});
Hopefully this helps someone, but I'd really love to know if TouchSwipe and CarouFredSel can work with <a href> tags as I cannot find any live working examples.
Thanks for the solutions with the excludedElements, that fixed my problem as well. Never thought of that.
But you don't have to use the touchwipe Plugin separately, there is "swipe.options" as a configuration option for touchswipe in the caroufredsel plugin.
See the caroufredsel options
There you can use all options of the touchswipe plugin, I think.
You can use below function to enable click after swipe.
`$('.class').swipe({
swipe: function(event, direction, distance, duration, fingerCount) {},
click: function(event, target) {
$(target).click();
},
threshold: 75
});`
https://stackoverflow.com/a/11919170/3223427
Caroufredsel is already integrated and compatible with touchswipe.
Add tochswipe js library
Add the touch events in the caroufresel configuration
JAVASCRIPT RESULT
$(document).ready(function () {
$('#foo2').carouFredSel({
auto: false,
responsive: false,
items: {
visible: 3,
width: 100
},
width: 600,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
swipe: {
onMouse: true,
onTouch: true
}
});
});
Here is a working demo