I am using the jquery slider and using append() to update the value, but it will keep adding it unless I empty it on the start event. Is there a way where I can just updated the value instead of printing it out every time the action takes place. i tried replaceWith but no luck there.
start: function(event, ui){
$('#current_value').empty();
},
slide: function(event, ui){
$('#current_value').fadeIn().append('Value is '+ui.value);
},
You probably want something like
slide: function(event, ui){
$('#current_value').text('Value is '+ui.value);
$('#current_value').fadeIn();
}
text() documentation
you need to use html() not append(), append adds the value at end of the given element, html sets the innerHtml for the given element.
$('#current_value').html('Value is '+ui.value).fadeIn();
If i understand you right, you should:
var existing = $('#current_value').html();
$('#current_value').html(existing + ui.value).fadeIn();
Related
I'm having trouble creating and applying a tooltip to each of the images inside a div. The text of the tooltip should be the img's id. This seems like it would be fairly simple, so there must be something I am missing, or not understanding. Here's what I'm using:
$("#myDiv img").tooltip({
content:$(this).attr('id'),
track:true
});
Additionally, these images will be replaced depending on what the user clicks — once the images are deleted (by calling .empty on the containing div), do I need to delete the tooltips, or will they be automatically deleted from memory?
Sorry for the novice question!
You're attempting to get the id of all the img elements. Use .each to parse each element separately.
$("#myDiv img").each(function(){
$this = $(this);
$this.tooltip({
content: $this.attr('id'), // $this[0].id is faster
track: true
});
});
There is no need to remove the tooltip manually; the event bindings are deleted when the element is removed from the DOM.
Try this instead:
$("#myDiv").tooltip({
items: "img",
content: function() {
var el = $(this);
return el.attr( "id" ); // $this[0].id is faster
},
track: true
});
jsFiddle Demo
Reference:
http://jqueryui.com/tooltip/#custom-content
I'm trying to create a jquery drag and drop solution and am a little lost with how I achieve the following.
Allow '.todo-task' to be dropped into any of the 4 'backlog, pending, inProgress, completed' div containers.
Use a highlight helper to show where the task will be placed in the container.
Be able to drag and drop with in a container to change to order.
my first issue is that I cannot seem to be able to activate the drag items correctly.
I have created a jsfiddle with the code I have so far. Appreciate any guidance / help
here is my jquery code
$(".task-container").contents().find(".todo-task").draggable({
connectToSortable: ".ui-droppable",
helper: function (event) {
},
iframeFix: true,
// stop: makeSortable()
stop: function (event, ui) {
// alert('stop');
}
});
$(".ui-droppable").sortable({
placeholder: "ui-state-highlight",
opacity: .5,
//dropOnEmpty: true,
helper: 'original',
beforeStop: function (event, ui) {
newItem = ui.item;
},
receive: function (event, ui) {
},
}).disableSelection().droppable({
over: ".ui-droppable",
activeClass: 'highlight',
drop: function (event, ui) {
$(this).addClass("ui-state-highlight");
}
})
I'm not sure exactly what else you're trying to achieve in terms of the "disabled" style CSS, but I just forked and monkeyed around with this for a minute:
jsfiddle
One thing is that I think your jQuery methods are redundant. Why say:
$(".task-container").contents().find(".todo-task").draggable( ...etc.
When you can just as easily do this:
$(".todo-task").draggable( ...etc.
So I cleaned a little bit of that up.
The other thing I did was to make the .task-container droppable.
See the jQuery API: droppable methods
This allows you to sort and move between columns, but like I mentioned this fix seems to behave strangely with your CSS class methods.
I have been searching for quite some time without success. I want to detect when a particular jquery ui dialog has lost focus.
I know I can detect when it gains focus like so:
focus: function(event, ui) { console.log('focus in: '+this.id); }
However the focusout event does not get triggered in any way I've tried:
focusout: function(event, ui) { console.log('focus out: '+this.id);}
This is my (PHP echo'ed) code:
<script type=\"text/javascript\">
$(\"".$element."\").click(function(e){
$(\"#".$divname."\").load('".$url."').dialog({
title: '".$title."',
modal:".$modal.",
resizable: true,
width:'".$width."',
height:'".$height."',
show: 'clip',
hide: 'clip',
open: function(event, ui) {\$(\".ui-widget-overlay\").css({'background-image': 'url(\"../css/stripe_small.png\")','background-repeat':'repeat', 'opacity':'0.8'})},
minimize: '#toolbar',
focus: function(event, ui) { console.log('focus in: '+this.id); },
focusout: function(event, ui) { console.log('focus out: '+this.id);}});
});
</script>
<div id=\"".$divname."\"></div>";
Everything works allright, apart from the focus out detection. Is there a way to do this, or do I have to iterate all window elements to find out which has the focus ?
EDIT: Alternatively, I would like to know if I can find which UI Dialog is the one at the front.
Since nobody has answered I will give a brief answer to what I have come up with.
jQuery's blur and focusout do not seem to trigger for my dialogs:
When trying to listen for events of a dialog widget:
$(".ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable").blur(function({ //NOP });
When trying to listen for events of the divname used for a dialog:
$("#divname").blur( function({ //NOP });
Do not get triggered.
Weirdly enough, focusin does work:
$("#divname").focusin( function({ console.log('focused in'); });
A hackish solution (which may be a bit heavy if there are many ui-dialogs on the page as it so happens in my case, but which works nonetheless, is to listen for click events on ui-dialogs:
$(".ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable").live('click',function(){
$(this).addClass('ui-active').removeClass('ui-inactive');
});
What this does it the exact opposite: instead of trying to detect a dialog losing focus, onclick I iterate all dialogs. The one with the highest ZIndex is at the top, the rest are not (and thus have lost focus):
var topZindex = 0;
$(".ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable").each( function( ){
var thisZindex = parseInt($(this).css('zIndex'), 10);
if ( thisZindex > topZindex ) topZindex = thisZindex;
});
It would be really nice if somehow a callback would trigger when the entire ui-dialog lost focus, but I can't seem to find another solution on the web, and I cannot get blur or focusout to trigger.
I'm using jQueryUI to create a dialog, I want the dialog object to be destroyed when it's removed.
So I did something like this:
thisDialog.dialog({
autoOpen: true,
close: function(event, ui) {
thisDialog.dialog("destroy");
}
});
What I want to do is maintain the existence of the element that thisDialog is attached to, but simply destroy the jQueryUI .dialog() object that is attached to it, not change my DOM.
Sample:
http://jsfiddle.net/ytWPV/1/
Update:
This may be a bug/issue with jQueryUI? If someone can show that, I'll accept that as an answer as well
I am not sure what you want to accomplish with "destroy" versus "close", but I will assume you have good reasons.
If you can successfully close your dialog (essentially setting the entire DIV that represents your dialog to the CSS equivalent of display:none) but want to go further and have the html more permanently removed from the DOM, I would add some logic to the close function that would use a selector (any selector will suffice) to find the top-most DIV for your dialog and then to manually set the .html() for that DIV to and empty string. That will basically wipe out the internal HTML and leave you with only your original that once acted as a dialog...
You could also try cloning the element if it doesn't change such as:
$("#win2").clone().attr("id","random").dialog({
autoOpen: true,
height: 60,
width: 50,
modal: true,
close: function(event, ui) {
alert($(".hide").html())
this.dialog("destroy");
}
});
...which the original code came from your example.
I've searched everywhere, but I can't seem to find any help...
I have some textboxes that are created dynamically via JS, so I need to bind all of their classes to an autocomplete. As a result, I need to use the new .live() option.
As an example, to bind all items with a class of .foo now and future created:
$('.foo').live('click', function(){
alert('clicked');
});
It takes (and behaves) the same as .bind(). However, I want to bind an autocomplete...
This doesn't work:
$('.foo').live('autocomplete', function(event, ui){
source: 'url.php' // (surpressed other arguments)
});
How can I use .live() to bind autocomplete?
UPDATE
Figured it out with Framer:
$(function(){
$('.search').live('keyup.autocomplete', function(){
$(this).autocomplete({
source : 'url.php'
});
});
});
jQuery UI autocomplete function automatically adds the class "ui-autocomplete-input" to the element. I'd recommend live binding the element on focus without the "ui-autocomplete-input"
class to prevent re-binding on every keydown event within that element.
$(".foo:not(.ui-autocomplete-input)").live("focus", function (event) {
$(this).autocomplete(options);
});
Edit
My answer is now out of date since jQuery 1.7, see Nathan Strutz's comment for use with the new .on() syntax.
If you are using the jquery.ui.autocomplete.js try this instead
.bind("keydown.autocomplete") or .live("keydown.autocomplete")
if not, use the jquery.ui.autocomplete.js and see if it'll work
If that doesn't apply, I don't know how to help you bro
Just to add, you can use the .livequery plugin for this:
$('.foo').livequery(function() {
// This will fire for each matched element.
// It will also fire for any new elements added to the DOM.
$(this).autocomplete(options);
});
To get autocomplete working when loaded dynamically for the on() event used in jQuery > 1.7, using the syntax Nathan Strutz provides in his comment:
$(document).on('focus', '.my-field:not(.ui-autocomplete-input)', function (e) {
$(this).autocomplete(options)
});
where .my-field is a selector for your autocomplete input element.
.live() does not work with focus.
also keyup.autocmplete does not make any sense.
Instead the thing I have tried and working is this
$(document).ready(function(){
$('.search').live('keyup' , function()
{
$(this).autocomplete({ source : 'url.php' });
});
})
This works perfectly fine.
You can't. .live() only supports actual JavaScript events, not any custom event. This is a fundamental limitation of how .live() works.
You can try using this:
$('.foo').live('focus.autocomplete', function() {
$(this).autocomplete({...});
});
After reading and testing everyone else's answers I have updated it for the current version of JQuery and made a few tweaks.
The problem with using keydown as the event that calls .autocomplete() is that it fails to autocomplete for that first letter typed. Using focus is the better choice.
Another thing I have noticed is that all of the given solutions result in .autocomplete() being called multiple times. If you are adding an element dynamically to the page that will not be removed again, the event should only be fired once. Even if the item is to be removed and added again, the event should be removed and then added back each time the element is removed or added so that focusing on the field again will not unnecessarily call .autocomplete() every time.
My final code is as follows:
$(document).on('focus.autocomplete', '#myAutocomplete', function(e){
$(this).autocomplete(autocompleteOptions);
$(document).off('focus.autocomplete', '#myAutocomplete');
});
autocomplete is not an event rather a function that enables autocomplete functionality for a textbox.
So if you can modify the js that creates the textboxes dynamically to wrap the textbox element in as a jquery object and call autocomplete on that object.
I just noticed you edited your post with this answer. It was obvious to me so I'm posting it below for others. Thank you.
$(function()
{
$('.search').live('keyup.autocomplete', function()
{
$(this).autocomplete({ source : 'url.php' });
});
});
This works for me:
$(function()
{
$('.item_product').live('focus.autocomplete', function()
{
$(this).autocomplete("/source.php/", {
width: 550,
matchContains: true,
mustMatch: false,
selectFirst: false,
});
});
});
You can just put the autocomplete inside input live event, like this:
$('#input-element').live('input', function(){
$("#input-element").autocomplete(options);
});