I am using datepicker with jquery ui with input
<input type="text" name="first_day" id="datepicker-first_day" class="input-text" />
and the jquery
<script type="text/javascript">
$(function() {
$("#datepicker-first_day").datepicker({
dateFormat: 'dd/mm/yy'
});
});
</script>
I have a page that loads and then when a link is clicked it loads the page with the following:
function load_page() {
$('#load-page').load('pages/annual-leave/annual-leave', 'show=all');
}
The date picker works the first time the page is loaded but after calling the load_page function it stops working.
I have confirmed that jquery ui is loaded both times.
I have tried the following through answers on stack overflow
$(document).ready(function () {
$("#datepicker-first_day").live("click", function () { $(this).datepicker(); });
});
(this one doesn't even work the first time)
I have also tried other similar things to the .live like .on etc.
Nothing I try seems to work?
Has anyone had a similar problem or know why this may be happening?
I have searched all day through google and stack overflow for an answer but can't fix it.
Edit: It is also worth noting that when the page is initially loaded it also uses the load_page function.
Problem: When I activate jQueryUI tooltip it prevents another script on the page from working.
Description: I have a floating button on a page:
<div id="buttonTOC">
Table Of Contents
</div><!-- End button <div> -->
This is used by the following script to open a hidden div:
jQuery(document).ready(function($){
$("div#buttonTOC").click(function() {
$("div#table-of-contents").animate({height:'toggle'},500);
});
});
This works correctly but if I add a script to use tooltips then it stops functioning and nothing happens on click. The tooltip does work as expected.
I've tried some experiments to get this working including the following attempt to disable 'tooltip' on the div in question but this doesn't make any difference.
jQuery(function($) {
$( 'a#buttonText' ).tooltip({
track: true
});
$('#buttonTOC *[title]').tooltip('disable');
});
I would suspect a conflict between the scripts but then again I assume that something like a tooltip would be able to work regardless of the presence of other scripts.
I'd appreciate any guidance on how to implement this successfully.
Thanks
Your code has a typo:
$( 'p#buttonText' ).tooltip({
track: true
});
It should be a#buttonText, not p
Aside from that, there seems to be no problem with the script.
Note: JS/Jquery noob alert (yes, me)
There seems to be a conflict between the following two plugins:
TableSorter (2.9.1)
bootstrap-popover.js v2.2.1
The plugins work as they should separately, but when together, the popovers don't work. I've tried moving the calls to the popover script (and its initialization) before any other plugins, but no dice. I have a feeling the tablesorter script is somehow removing the titles from the DOM (another subject I know little about) before the popover script can load, but no dice.
In my HTML
<script src="../../js/jquery-1.8.2.min.js"></script>
<script src="../../js/jquery.tablesorter.js"></script>
<script src="../../js/jquery.tablesorter.pager.js"></script>
<script src="../../js/tooltips-popovers.js"></script>
<script>
$(function(){
$("#stats").tablesorter();
});
</script>
<script>
$("a[rel=popover]").popover({html:true,trigger:'hover'});
</script>
<script> /* Initiate pager */
$(function(){
var pagerOptions = {
container: $(".pager"),
};
$("table")
.tablesorterPager(pagerOptions);
});
</script>
Make sure you are initializing the popover script within a document ready event.
$(function(){
$("a[rel=popover]").popover({html:true,trigger:'hover'});
$("#stats")
.tablesorter()
.tablesorterPager({
container: $(".pager")
})
});
If that doesn't work, I can only guess that the popover links are inside the table? If so, they are added and removed dynamically, when sorting the table, so they might need to be added through a delegated event, the code above may not work in that case.
Update: As stated, the popup links are within the th, which I assume are in the thead? If so, try this code:
$(function(){
$("#stats")
.tablesorter({
initialized: function(table){
$("a[rel=popover]").popover({html:true,trigger:'hover'});
}
})
.tablesorterPager({
container: $(".pager")
})
});
I have created a simple .toggle script on one page to toggle a DIV. But when I put this exact same script on another page to toggle another DIV the second page script fails... I have tried multiple fixes but nothing works
Here is the script I am using on both pages The IDs are different but the script is the same
<script>
$(document).bind('pageinit', function() {
$('#slick-toggle').live('tap', function(event) {
$("#menu_box").toggle(400);
});
});
</script>
Any help would be greatly appreciated
Capt. Crunch
You may try the following:
<script>
$( document ).on( 'pageinit',function(event){
$('#slick-toggle').on('tap', function(event) {
$("#menu_box").toggle(400);
});
});
</script>
Hope this helps, let me know about your result.
I'm new to Plone and jQueryUI, and have not been able to get any jQueryUI working on a Plone page.
I installed Plone 4 (4.1.4 41143) and jQueryUI 1.8.16 (http://plone.org/products/collective.js.jqueryui),
Under Zope Management Interface > portal_javascripts, collective.js.jqueryui.custom.min.js is present and enabled.
To try to implement the example from http://jqueryui.com/demos/button/, I placed in the body text of a Plone page:
<script type="text/javascript">
jQuery({function($) {
$( "input:submit, a, button", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
});
</script>
<DIV class=demo>
<BUTTON type=submit>A button element</BUTTON> <INPUT value="A submit button" type=submit> An anchor
</DIV><!-- End demo -->
but the resulting page does not show the expected result.
I've tried replacing "jQuery" in the code above with "$", "collective.js.jqueryui.custom.min", but nothing has worked yet.
I was able to get some jQueryUI working outside of Plone, but would be interested in knowing how to use it within Plone. Any help appreciated.
The content of your script tags is probably being deleted by Plone's HTML filtering.
You can change that in "Site Setup", "HTML Filtering". (The dialog there is confusing, you have to click two buttons. First remove from 'nasty tags', then 'save' at the bottom of page.)
Be aware though, that there are good security reasons for not allowing users to use script, embed and other tags. It can lead to all kind of trouble, for instance when they are also allowed in comments, or less experienced users copy/paste dangerous code.
If you're just practicing, and not putting your site on the big bad Internet, it can be fine, but if you start deploying a real site it is much better to put script stuff into page templates of your own file-based add-on product.
Your syntax within the script tag is incorrect. Try this:
jQuery(function($) {
$( "input:submit, a, button", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
})($);
Yes, you may need to allow script tags as described above, but the example still did not work for me until I replaced the word jQuery with the $ sign, at least when using collective.js.jqueryui 1.8.16.9 on Plone 4.2.1.1.
<script>
$(function() {
$( "#progressbar1" ).progressbar();
$( "#slider" ).slider();
$( "input:submit, a, button", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
});
</script>
Putting ($) just before the semicolon on the line above also worked but I saw no difference.
The script worked on a file system page template even when script was included in the "nasty tags" list. Also, the script can be inserted into the document's head with the following in a page template:
<metal:slot fill-slot="javascript_head_slot">
<script>
$(function() {
$( "#slider" ).slider();
$( "#progressbar1" ).progressbar();
$( "input:submit, a, button", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
});
</script>
</metal:slot>
(I'd love to hear if there is a more appropriate prefix, but I don't really know javascript.)
I've just had a similar issue trying to get my scripts and jquery UI to work with a plone/zope setup. The solution was to register them in the javascript registry (/portal_javascripts).
The scripts themselves were added to /portal_skins/custom which is also where the homepage I was working on resides.
Script tags are filtered out from the source as already mentioned above, and the scripts from the registry automatically added instead.
Keep in mind also that order is important in the javascript registry.
Hope this is of some help to other users who come across this question,.