JQuery Get current ID of Widget - javascript

I have have the following
<div id="dualList"></div>
And I have written a plugin but for the sake of testing I have stripped it away. I am having problems with the plugin displaying the id of the div.
<script>
(function($) {
$.fn.DualList = function() {
var thisControl = $(this);
alert(thisControl.attr('id'));
}
})(jQuery);
</script>
And its bound on document on ready using
$("#dualList").DualList();
Any ideas why the ID isnt echoing out?

First off, as far as I can tell, it does work.
However, there are a couple of things that are not optimal in your code. You can't be sure that there's just one onject selected (it could be a class selector, for all you know). You should therefore iterate through all the members of the selection. Second, you don't need the jQuery constructor to get the id property. You can do it just with this.id:
$.fn.DualList = function() {
return this.each(function() {
alert (this.id);
});
};
Working example of this style of code

Widget is a collection wherever invoked, so
$(this.element[0]).attr("id")
will get you the id of the first element and so on..

Related

how to use jquery loop function to target many element with different ids

Currently, I have this code:
$(document).ready(function(){
// #filtertab-00 replace this with your element id
$('#filtertab-00 .box-content .es-nav .elastislide-next, #filtertab-00 .box-content .es-nav .elastislide-prev').click(function() {
// trigger lazy load
$("#filtertab-00 img.lazy").each(function(i) {
$(this).delay(150*i).fadeIn(1000, function() {
var src = $(this).attr("data-original");
$(this).attr('src',src);
});
});
});
});
and i want to use this function to target object names (id) as below:
filtertab-00
filtertab-10
filtertab-20
filtertab-30
filtertab-40
filtertab-50
filtertab-60
....
filtertab-90
Does anyone know how to use the loop function to get it work?
i just want this:
when i click pre or next button after i select a tab(name varies from filtertab-00 to filtertab-90),it will activate lazyloading for images at current selected tab.
any idea is welcome!
Perhaps you could use jQuery's attribute-starts-with selector. You can then just select all IDs that begin with filtertab- using jQuery like this:
$('div[id^="filtertab-"]').each( //magic goes here );
Note: This method is slow because it has to search the DOM for elements with IDs that meet the criteria, but it does the job. I've never noticed an appreciable latency.
This is solved through selector magic as filoxo described but since you want the images, here's another version involving find() to get your actual images.
$('div[id^="filtertab-"]').find("img.lazy").each(function(i) {
$(this).delay(150*i).fadeIn(1000, function() {
var src = $(this).attr("data-original");
$(this).attr('src',src);
});
});
In addition to that, check out the impressive list of jQuery selectors. They cover a lot of ground :)

jqTransform Update Select Options

I'm dynamically altering a select list's options. I am using the jqTransform plugin. It won't update itself automatically, which I didn't expect it would, but I can find a method for updating the display. I can't even find a method for removing it completely.
What I'd like is to find a method such as formelement.jqTransformUpdate() that will fix this. Any ideas?
I know it's an old question, but maybe it helps someone. I couldn't find the answer, so I looked into jqtransform.js code.
Just comment this line:
if($select.hasClass('jqTransformHidden')) {return;}
And then, after "onchange" event run:
$('#container select').jqTransSelect();
function selectRating(rating) {
$("#ratingModal .jqTransformSelectWrapper ul li a").each(function() {
if (parseInt($(this).attr("index")) == rating - 1) {
$(this).click();
}
});
}
A JS function I used in my own application to select specific option with the given rating.
I think you can modify it to meet your needs.
The idea is to use a.click event handler to select specific option in the transformed select list.
hi please try the following to selectively reapply styling to newly created or
select box returned from the ajax request
$('#container select').jqTransSelect();
regarding this:
That adds another drop-down to the page every time I call it now
When you comment this line:
if($select.hasClass('jqTransformHidden')) {return;}
add this just below:
if($select.hasClass('jqTransformHidden')) $select.parent().removeClass();
it's not a very elegant solution, but it worked in my case, the new select is still nested inside child and so on but it's working fine.
It could be better, try to add new method in jqtransform.js:
$.fn.jqTransSelectRefresh = function(){
return this.each(function(index){
var $select = $(this);
var i=$select.parent().find('div,ul').remove().css('zIndex');
$select.unwrap().removeClass('jqTransformHidden').jqTransSelect();
$select.parent().css('zIndex', i);
});
}
after that, just call it each time you need to refresh the dropdown:
$('#my_select').jqTransSelectRefresh();

jQuery Function Problem (Parent/Child)

I have a small problem with a jQuery script I wrote.
I have an HTML structure like this:
<div id="navigation">
<ul>
<li><b>Text1</b></li>
<li><b>Text2</b></li>
...
</ul>
</div>
Then, I have a click function binded to those li/a tabs that sets the value of the current page to href:
var currentpage = $(this).attr('href');
And, finally, an update function that is fired when it's needed that do many thing, but also changes the style of the currently selected li/a tab:
$('#navigation a').each(function()
{
var tab = $(this);
tab.parent().toggleClass('current', (tab.attr('href') == currentpage));
});
Everything works fine, but today I was trying to rewrite the last function on one line only -without calling each()- and I can't get it to work.
I've tried many solutions like:
$('#navigation a').parent().toggleClass('current', ($(this).children(':first').attr('href') === currentpage));
$('#navigation a').parent().toggleClass('current', ($(':only-child', $(this)).attr('href') == currentpage));
Can someone help me out?
Thanks!
You can't rewrite it as you'd like to.
The original code has to use ".each()" because it needs access to each individual <a> element in order to do its thing. In your rewrite, you're imagining that you can get this set to each element being processed, but that's just not how this works in JavaScript. In your attempted rewrite, the value of this in those parameters to "toggleClass()" will be this as it stands outside that entire jQuery function call chain. It'll have absolutely nothing to do with the <a> elements being processed by the call to "toggleClass()".
when your function is triggers i.e. on clicking the in that function you can get the reference to the clicked element, tag by using $(this). Then your code should be
$(this).parent().toggleClass('current', ($(this).children(':first').attr('href') === currentpage));

jQuery - How to link together a DOM element and a Javascript object?

I want to be able to link a javascript object with a dom element but cant find a way for this to be done properly. An example: say when opening a page with an inventory it loads all the items contained in it and when I hover over the images inside it creates a small tooltip with some information. Well there will be much of these items on the page and i want to be able to link the DOM element with an object so i can access its properties easily. I hope im explaining my self properly.
say I had this inside an inventory:
<div id="slot1"><img id="item1"></div>
<div id="slot2"><img id="item2"></div>
and say i have a javascript object called slot1 and slot2:
the object slot1 has all the properties that need to be shown in the tooltip so i would like to do something like this in the mouseover event:
this.showTooltip()
any help would be great ty if i need to explain it better just say!
-Thaiscorpion
Use jQuery data:
$("div.hasToolTip").hover(
function() {
//Get the associated data with the DOM element
//with $(this).data(someKey)
showToolTip($(this).data('toolTipInformation'));
},
function() {
//Here you can hide all tooltips
}
);
Obviously, before you can register this event, you have to assign the object to every DOM element with $(selector).data(key, value).
These example expects that every DOM element which should have a tooltip has a class named .hasToolTip.
Look at the jQuery documentation for more information about the .data() function.
Just have the javascript object know the ID of the object it's watching.
function Tooltipper(divID) {
this.id = divID;
}
Tooltipper.prototype.showTooltip = function () {
// do tooltip stuff
$('#' + this.id).tooltip(); // assuming that it has a tooltip thing
};
var slot1 = new Tooltipper('slot1'),
slot2 = new Tooltipper('slot2');
And then:
slot1.showTooltip();
Or better yet, instead of passing in the ID, pass in the object:
var slot1 = new Tooltipper($('#slot1'));
This way you don't have to do a DOM lookup each time.

jQuery ways to dynamically .append a div to the dom, and then find it later without setting an ID, class, or anyway to indentify it

Update: Everyone that contributed, it's well appreciated, you all are very kind and generous and all of you deserve my dear respect. Cheers.
Note: I'm making a simple jQuery tooltip plugin, the tooltip will fire on mouseover. The mouseover will create an instance of the div tool-tip that will be specific to each anchor that launched the div tool-tip. So each anchor with the class .c_tool will have its own created div that will erase after mouseout. Anyway all those details are irrelevant. What is important is how to create a div with .append() or .add() on and then find a way to call it and apply actions to that div without setting an identifier (id), class, or any means to identify it.
I know theres a way you could find the div by counting, so if you gave every created div the same class and then counted them to find that one, however I don't know if this is the most efficient method that is why I'm asking for help.
I'm not going to post the whole plugin script thats unnecessary, so I'll paste a simplified version.
hover me
hover me
$(document).ready(function() {
obj = $('a.c_tool');
obj.mouseover(function() {
/// append div to body it will be specific to each item with class c_tool, however I don't want to set an ID, or CLASS to the appended div
}).mouseout(function() {
/// remove added div without setting ID or class to it.
});
});
Working example:
http://jsfiddle.net/xzL6F/
$(document).ready(function() {
var tooltip;
obj = $('a.c_tool');
obj.mouseover(function() {
var element = $('<div>', {
html: "I'm a tooltip"
});
tooltip = element.appendTo($("body"));
/// append div to body it will be specific to each item with class c_tool, however I don't want to set an ID, or CLASS to the appended div
}).mouseout(function() {
tooltip.remove();
/// remove added div without setting ID or class to it.
});
});
To create a new DOM node you can use the jQuery constructor, like
$(document).ready(function() {
obj = $('a.c_tool');
obj.mouseover(function() {
if(!$.data(this, 'ref')) {
$.data(this, 'ref', $ref = $('<div>', {
html: 'Hello World!'
}).appendTo(document.body));
}
}).mouseout(function() {
$.data(this, 'ref').remove();
});
});
.appendTo() returns the DOM node of invocation (in this case, the newly created DIV) as jQuery object. That way you can store the reference in a variable for instance and access it later.
Referring your comment:
To remove all stored references, you should do this:
$('a.c_tool').each(function(index, node) {
$.removeData(node, 'ref');
});
you can use $.append(
);
http://api.jquery.com/append/
and to find the DOM created dynamically u can use
$("#dynamicallyCreatedDOMid").live("yourCustomTrigger",function(){
});
http://api.jquery.com/live/

Categories

Resources