I have following html:
<div class="square draggable"></div>
<div class="circle draggable"></div>
<div class="square_box droppable"></div>
<div class="circle_box droppable"></div>
I need to use hover style enabled only when shape of draggable and droppable object match.
I'm using jQuery UI drag-and-drop
jQuery('.droppable').droppable( {
***
hoverClass: 'hovered',
***
});
Thank you in advance.
Use the accept option like:
$('.square_box').droppable({
accept: '.square'
});
If you have so many shapes, define the relationships as an array of key-value pairs, iterate over it and initialize them as droppable.
Related
I try to make the items of a list draggable, but it doesn't work. jQuery doesn't seem to add the ui-draggable class, or maybe Angular removes it.
Javascript
$('.results_video').draggable({
});
HTML
<div class="results_video" ng-repeat="video in results.list">
{{video.title}}
</div>
Note that if I just write the following html, it works
<div class="results_video"></div>
Any suggestions?
I have found the solution. I need to make these divs draggable after they have been loaded. In my case:
var VideoCtrl = function ($scope){
$scope.$watch('search', function(){
//Some code that updates the divs
$('.results_video').draggable();
});
};
Is it possible to manually trigger the sortstop event of a jQuery sortable control?
I have tried $(selector).trigger('sortstop') but nothing seems to happen.
some of the relevant HTML:
<div data-zone="name">
<div class="section disabled" id="section-1">Some section template 1</div>
<div class="section" id="section-2">Some section template 2</div>
<div class="section" id="section-3">Some section template 3</div>
</div>
<button class="trigger-button">Trigger stop</button>
and some of the JavaScript:
$("[data-zone]").sortable({
placeholder: 'ui-state-highlight',
cancel : ".section.disabled",
stop: function(){
console.log('sort-stopped');
}
})
$(".trigger-button").click(function(){
console.log('trigger-button clicked');
var $zone = $('[data-zone]');
console.log($zone);
$zone.trigger('sortstop');
});
JsFiddle of the problem.
Events are used by jQuery UI to notify your code that something has happened with their code, not the other way around.
You should be looking for methods that you can use to control the sortable object rather than trying to control ui elements by triggering events:
// Are you looking for this?
$( ".selector" ).sortable( "cancel" );
// Or this?
$( ".selector" ).sortable( "enable" );
$( ".selector" ).sortable( "disable" );
There is also no "sortstop" event. There is a "stop" event and a "beforeStop" event that sortables trigger when sorting is finished or about to finish, but these are sent out by the sortable object, not read by the sortable object in order to perform actions.
If what you really wanted was to listen for these events so you could perform some actions, then this is what you might want to do:
$("[data-zone]").on('stop', function(evt, ui) {
// sortable has notified that it has stopped, do stuff here
});
More info can be found on the jQuery UI documentation for sortable:
http://api.jqueryui.com/sortable/
Also, here is the sortable.js source file on github
https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.sortable.js
I have a list of objects. Each object has its own values. On webpage they are presented as rows. What I want to do is to add JQuery dialog that pops up when a link on a specific row is clicked. What is the best way to do that? Is is better to define a dialog in every row or just use one? Problem is I can't reach elements inside dialog to fill them with row data. Is there any good example concerning this? Thank you
Just use one dialog, it should be initially hidden anyway:
<div id="rowDialog" style="display:none">
<div id="rowDialogDiv">in here we are
</div>
<button id="rowDialogButton>Custom button</div>
</div>
initialize dialog, not showing it at first:
$('#rowDialog').dialog({ autoOpen: false });
put in an event handler for the row:
$("tr").click(function(){
var rowClicked = $(this);
$('#rowDialogDiv).text('In the dialog, show we clicked row:' + rowClicked.index());
$('#rowDialog").dialog("open");
});
Strongly suggest you give the table and ID and then access the table rows from that for speed and, just in case you have multiple tables etc.
You can also have event handlers for the dialogs elements:
$('#rowDialogButton').click(function(){
//do button stuff
});
something like this maybe?
<div id="myDialog">
<input id="myElementThatICanAccess" />
</div>
The jQuery Code:
$("#myDialog").dialog({
options:....
});
$("tr").click(function(){
$("#myElementThatICanAccess","#myDialog").val($(this).val()); // or whatever value you want
$("#myDialog").dialog('open');
});
I have the following script which works as long as the are static html
$('li.tab').each(function(index) {
$("#tab" + index ).click(function() {$("#tabs").tabs( "select" , index );});
});
This is what the static html looks like:
<div class="item" id="tab0"><div class="icon" style="background-image: url('http://intranet/icon0.png');"></div> Default</div>
<div class="item" id="tab1"><div class="icon" style="background-image: url('http://intranet/icon1.png');"></div> Reports</div>
<div class="item" id="tab2"><div class="icon" style="background-image: url('http://intranet/icon2.png');"></div> Other</div>
If I use a database to generate the 3 html lines via jquery/ajax, do I have to use the jquery live function to connect the click event look in the script above?
If yes, how would I do this?
yes you need to use live
$('li.tab').each(function(index) {
$("#tab" + index).live('click', function() {
// ...
});
});
$('.your_target_class').live('click', function () {
//your code here.
});
Instead of .live(), use .delegate() which you bind to an object that surrounds what you're targeting. You can chain .delegate() plus it's better performance wise (you can look it up here http://jquerybyexample.blogspot.com/2010/08/bind-vs-live-vs-delegate-function.html)
Also, don't forget to use .die()/.undelegate(), otherwise you're running a risk of firing multiple requests (ie, if your .live() declaration gets called multiple times, your click event will fire multiple times. You can look this up here jQuery UI ajax tabs - requests multiplying when loading links within tabs)
Mind you, jQuery 1.4.2 has a bug in it's .live(), take that into account.
When dynamically creating a div using an .ajax() function. I'm unable to attach the .tabs() widget to the newly created .
This link creates the new div and pulls the #tabs div from "somefile.php"
Creates New Div
Here is the dynamically created div:
<div id="newdiv">
<div id="tabs">
<ul>
<li>Example One</li>
<li>Example Two</li>
</ul>
</div>
</div>
Here is the script I'm using. Output - Error: (d || "").split is not a function
Copy code
$( "#tabs" ).live(function(){
$(this).tabs()
});
I'm able to show the tabs when adding an event parameter, However I want the tabs to display without an event.
Copy code
$( "#tabs" ).live("click", function(){
$(this).tabs()
});
Someone please help me understand what I'm missing. I've been stuck on this for 3 days.
Chris
Are you trying to assign the live handler before the AJAX callback has completed?
My suspicion is you need to move your code into the success handler of your AJAX object and not use live because I don't think it does what you think.
If you post more of your code we'll be able to help you out a bit more.
My guess as to what you're trying to do:
$.ajax({
type: "GET",
url: "/tabs/",
async: true,
success: function() {
$('#tabs').tabs()
}
});
RSG is correct in that you're using the live function incorrectly. The live function is specifically for attaching event handlers to elements and calling functions. As RSG pointed out, in your case the best thing to do is call the tabs widget in the success function of the ajax request.