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
Related
I'm trying to create a pop up window which is triggered upon selecting an option from a dropdownlist using JQM .
The popup datarole:
<!--popup window inside index page -->
<div data-role="popup" id="puProd"> TODO POP UP STUFF </div>
And this is the JS code:
$(document).ready("#index", function (event) {
$("#ddlSelectProduct").on("change", function () {
$("#puProd").popup("open");
});
Am I doing something wrong? Because the pop up won't open.
Will appreciate answers
Thank you
Use the jQuery Mobile pagecreate event instead of document ready:
$(document).on("pagecreate","#index", function(){
$("#ddlSelectProduct").on("change", function () {
$("#puProd").popup("open");
});
});
DEMO
Lets say i have 10 Tabs. And one of these tabs will link to external URL. How to do it please?
I prefer to make it perform like a normal HREF action. Because when i use:
onclick="window.location='http://www.google.com';"
or
$("#tab-08").click(function(){ ........... });
.. there definitely is a DELAY about 1 or 2 seconds, upon the click of that particular Tab.
So how do i override a jQuery UI TAB back to normal link please?
Some more code would be useful but how about something like this?
Javascript:
$("#tabs").tabs({
active: false,
collapsible: true,
beforeActivate: function (event, ui) {
window.open($(ui.newTab).find('a').attr('href'), '_blank');
return false;
}
});
HTML:
<div id="tabs">
<ul>
<li>Page</li>
<li>Page</li>
</ul>
</div>
Your solution also works, but I think you are dealing with a browser related problem that is causing the delay.
I'm opening a dialog programmatically with this piece of code:
$.mobile.changePage('#about', {
transition: 'pop',
changeHash: false
});
#about block is on the same page:
<div id="about" data-role="dialog">
<!-- -->
</div>
But every time I do that, pageInit event is called, which is a very unwanted behavior.
Is there any way around this?
I'm not sure what you mean by "which is a very unwanted behavior" but if you want to only run code once for a dialog then add a check to see if it has been initialized yet:
$(document).delegate('#about', 'pageinit', function () {
if ($(this).hasClass('ui-dialog') === false) {
//code in here will only run once per page load/refresh
}
});
jQuery Mobile adds classes to each of the widgets it initializes, you can check the widgets for these classes to test if they have been initialized yet or not.
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.
I have a drag and drop interface with JQueryUI, and when a user drags an element into one of its containers and drops it, I want to display some information about the selected item.
$(document).ready(function()
{
$( ".element" ).draggable({snap: ".elementContainer"});
$( ".elementContainer" ).droppable({
drop:function(){
$("table").append('<tr><td class="elementContainer ui-droppable"></td></tr>');
}});
});
So it's creating a new element with the UI droppable class. My question is, why won't it fire a "drop" event on the newly created element?
It won't fire because when you run $(".elementContainer").droppable(...) it binds the droppable widgets to the .elementContainer elements that exist at that time, s you'll need to run the plugin again for newly created elements with the class.
Something like this:
$(document).ready(function() {
$( ".element" ).draggable({snap: ".elementContainer"});
$.fn.bindDroppable = function() {
return this.droppable({
drop:function(){
$('<tr><td class="elementContainer"></td></tr>')
.find(".elementContainer").bindDroppable().end().appendTo("table");
}
});
};
$(".elementContainer").bindDroppable();
});
This is the plugin version to cut down on code...but the basic premise is you need to call .droppable(...options...) on all the new <td> elements as well, since the widget code wasn't run on them before...because they didn't exist yet.