I'm trying to enable each of the list items classed "draggable" to be drag enabled for dropping into the #content div. However, the first problem is that I'm not getting an alert on the click handler. What am I missing?
<script type="text/javascript" src="<?php echo plugins_url('', __FILE__)?>/jquery-ui.js"></script>
<script type="text/javascript">
jQuery('.draggable').click
(
function()
{
alert('clicked'); //DOES NOT FIRE
jQuery(this).draggable();
jQuery( "#content" ).droppable
({
drop: function( event, ui )
{
//drop/paste jQuery(this).text();
}
});
});
</script>
<ul class="keywords">
<li class="draggable" id="kw-1">keyword one</li>
<li class="draggable" id="kw-2">keyword two</li>
<li class="draggable" id="kw-3">keyword three</li>
</ul>
Can you check if your jquery is loaded correctly? Your script only shows that you are loading jquery-ui.js.
Otherwise, your code works when both jquery and jquery-ui are loaded.
Related
I try build page based on Bootstrap with JQuery UI sortable list.
I have one list in global space and two lists in Tabs
and I like to drag items from external list and drop it to tab navigation for adding into list
However when I switch to bootstrap tab navigation the external item on drop disappear but doesn't appear in tab list
this is my example based on JQ UI "Connect list with Tab"
This is my JS FIDDLE
$(function() {
$( "#sortable0, #sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" );//.tabs();
$('#myTab a:last').tab('show');
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "option", "active", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});
});
HTML
<div id="external-tab">
<ul id="sortable0" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">ExItem 1</li>
<li class="ui-state-default">ExItem 2</li>
<li class="ui-state-default">ExItem 3</li>
</ul>
</div>
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
</ul>
<div class="tab-content">
<div id="tabs-1" class="tab-pane">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
</ul>
</div>
<div id="tabs-2" class="tab-pane">
<ul id="sortable2" class="connectedSortable ui-helper-reset">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
</ul>
</div>
</div>
</div>
It's a shame nobody else got to your question in the past year... I'm guessing this is no longer relevant for you personally, but maybe we can help to resolve this issue for any other user searching on Google for solutions to include jQuery UI's API for Draggable/Droppable items, integrated with Bootstrap's tabbed component.
If I'm reading your question correctly, you'd like to be able to drag items from the external list into either of the two tabs. If your problem is similar to the one I'm personally tackling at the moment, you might also want to drag items from tab one into tab two, and vice-versa. I've updated your fiddle with a solution that accommodates both of these needs. The lists are also sortable, as they were previously, and the classes of items dragged from one space to the other are retained as well.
Items I might consider adding in the future are:
The ability to drag not only onto the tab, but also the space below it
Adding all attributes from the parent element dragged, not just the class list
However, for the moment, all I've done is to rectify the solution you posted.
The updated fiddle is here: http://jsfiddle.net/cr8s/96dsB/30/
Also, since the Internet is a fickle place and things disappear all the time, here's the updated JS (I left your HTML unchanged, and that's already in the question above):
$(function() {
$('.tab-pane > ul').sortable().disableSelection();
var
$tabs = $('#tabs'),
$tabItems = $('#myTab > li', $tabs);
$('#myTab a:last').tab('show');
$tabItems.droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var
$item = $(this),
href = $item.children('a').attr('href'),
$list = $(href).find('.connectedSortable');
console.log($list);
$list.append($('<li />').html(ui.draggable.html()).attr('class', ui.draggable.attr('class')));
$list.closest('.tab-pane').addClass('active').siblings().removeClass('active');
$item.addClass('active').siblings().removeClass('active');
}// drop(event, ui)
});// $tabItems.droppable()
$('#external-tab > ul > li').draggable({
appendTo: 'body',
helper: 'clone'
});
});// end of doc ready
Hope that solves this problem for some folks! It certainly gets me closer to solving my own use case, and I'll likely continue to update the fiddle linked above as I add additional features like the two I mentioned earlier.
Given the sample of the Kendo UI to load a tooltip with ajax data.
<ul id="products" class="dairy-photos">
<li><a href="#" data-id="11">
<img src="#Url.Content("~/content/12.jpg")" /></a> </li>
</ul>
#(Html.Kendo().Tooltip()
.For("#products")
.Filter("a")
.LoadContentFrom("Details", "Tooltip")
.Position(TooltipPosition.Top)
.Width(220)
.Height(280)
.Events(events => events.RequestStart("requestStart")))
<script type="text/javascript">
function requestStart(e) {
e.options.data = {
id: e.target.data("id")
}
}
</script>
This is working fine, but the call to the Tooltip controller is made only once !?
I'm unable to find a way to make sure the call is made -every- time the tooltip is hovered. Any help on this one ?
Seems like this is fixed in the latest release :
http://www.kendoui.com/forums/mvc/tooltip/load-tooltip-content-via-ajax-everytime-it-opens.aspx
#(Html.Kendo().Tooltip()
//...
.Events(e =>
{
//...
e.Show("show");
}))
<script type="text/javascript">
function show() {
this.refresh();
}
How to stop auto sliding in a flex slider? I have loaded that slider in my mobile web page. When the page is opened, it slides to the next image without any slide or tap event. How to stop this auto slide transition? I need to make it working only when a screen is tapped or slided.
Here is my code:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<div class="flexslider">
<ul class="slides">
<li>
<img src="img1.png"/>
</li>
<li>
<img src="img2.png"/>
</li>
</ul>
</div>
By default Flexslider has value slideshow: true so you have to change the value to false.
$(window).load(function() {
$('.flexslider').flexslider({
slideshow: false
});
});
I want to make the div - "small_box" in the first item of sortable list to be always not visible. I tried with jquery first() but that works only once and only for one and same element whenever it's dragged. How can i simple make it back to be visible when I dragg it into other than first place and then make invisible "small_box" for the item which jumps in the first place?
I put the live example here: http://jsfiddle.net/kriskasper/3knnn/
<ul id="sortable" class='connectedSortable'>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
<li>
<div class="small_box">small box</div>
<div class="big_box">big box</div>
</li>
</ul>
And here is jquery ui function:
$(function() {
$( "#sortable" ).sortable({
connectWith: ".connectedSortable",
placeholder: "ui-state-highlight",
forcePlaceholderSize: true,
opacity: 0.6,
revert: 70
});
});
Please help.
You should play with the sortable plugin events. The sortreceive event is fired when the connected element receives an item. My guess would be something like ...
$("#sortable").bind("sortreceive", function(event, ui) {
$(".connectedSortable .small_box").show();
$("#sortable .small_box").first().hide();
});
Here's my code in the <head></head>:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
// <![CDATA[
$(function() {
});
$(document).ready(function () {
$('#dialog1')
.dialog({
position: 'center',
modal: true,
autoOpen: false
})
;
$('.panier')
.unbind('click')
.click(function(event) {
event.preventDefault();
$('#dialog1').dialog('open');
});
});
// ]]>
</script>
And the html code:
<div data-role="page">
<div data-role="header">
<h1>Choisissez vos pizzas !</h1>
</div>
<div data-role="content">
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a class="panier" href="/" data-role="button" data-icon="search">Voir panier</a></li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="dialog" id="dialog1" class="app-dialog">
<div data-role="header">
<h3>A dialog</h3>
</div>
<div id="content" data-role="content">
<p>I am a dialog....!</p>
</div>
</div>
When I launch my page everything's fine until I click on the "panier" button: the error raised is:
Uncaught no such method 'open' for dialog widget instance
I really don't know why this doesn't work, because a dialog widget instance should have an open() method.
Any idea?
I think you are confusing the jquery mobile dialog with the jquery UI dialog. A jquery mobile dialog is really another JQM page just styled to look a bit more like a dialog (overlay, rounded corners). To display a JQM you just use the $.mobile.changePage('#yourDialog', optionalTranistion) method. That said JQM dialogs do have a close method (I'm not sure but there may have also had an open method at some point).
So for your code,
$(document).ready(function () {
/* $('#dialog1') this is JQUI code
.dialog({
position: 'center',
modal: true,
autoOpen: false
})
;*/
$('.panier')
.unbind('click')
.click(function (event) {
event.preventDefault();
//$('#dialog1').dialog('open');
$.mobile.changePage('#dialog1');
});
});
There is also a popup widget for JQM that is in development (and has been for a little while now).
You may also be interested in the simple dialog plug in for JQM.