Jquery .each() only replacing first found - javascript

So I have this script which should automatically load up an Items tooltip on dom ready.
It works perfectly if I'd wish to only have the first found item to show a tooltip, but sadly that's not my goal.
The current code:
$(document).ready(function(){
$('#dbobject').each(function(){
$(this).load('data/fetch.php?id='+ $(this).attr('tdbid'), function(){
});
});
});
It works perfectly for the first item, and whatever I do I seem to break the script every time!
It currently looks for any href containing tdbid="ID HERE" tag, then load up the value of the ID from fetch.php.
How can I revise this code in a way so it will look up ALL links with tdbid in it's anchor and not only first one found?
Thank you in advance!

An identity has to be unique in the page to work properly. When you select an element by id, then you will only get the first one, because there is only supposed to be one.
Instead of selecting using the id, you can select all the anchor elements that has a tdbid attribute:
$('a[tdbid]').each(function(){

You're calling each on #dbobject. I assume you only have one of those. It sounds like you want to be doing $("a[tdbid]").each(...)

Related

Selecting a generated id with jQuery

I have an html element like this:
<div id="myelement_9082173219731721923">
I want to add a class to this element to select it with css.
It is loaded after the other stuff on the site, because it´s generated by an external javascript.
That´s why I tried:
$('[id^="myelement_"]').load(function()
{
alert("im here");
$('[id^="myelement_"]').addClass('myclass');
});
But it doesn´t reach the alert. What am I doing wrong?
Thanks
This should do the work, load on the div element will never happen. Use a DOM change listener instead. And you don't need the quotes around the id selector. It is not wrong, but not a must have.
$("body").on("DOMSubtreeModified", function() {
$('[id^="myelement_"]').addClass('myclass');
});
Working example.
You should change body to the most smallest selector of your DOM, where the div#myelement_ will be appear. And if it happens only one time, change on to one. Then the listener disables itself and will not run constantly on changes.

Is there a way of selecting elements by their title in JS?

I am trying to create a program to select elements on the page, but it seems that the only thing that makes them unique are there titles. Is there any way of selecting certain things on a web page by their titles? I found this script but it will not select or click on the elements.
What am I doing wrong? Any help will do. Thanks
How can I get it to work on A and not div, sorry, that was the problem
My script that I am using --
$(document).ready(function () {
$("a[title=\"Learn More About Becoming A VIP\"]").click();
});
It says Div is not defined when I try to run script. Why So?
There is a way to select elements by their title attribute in javascript:
document.querySelectorAll('div[title="john"]');
======
You can also select elements that have a title beginning with john:
document.querySelectorAll('div[title^="john"]');
Or elements that have the (space-bounded) word john somewhere in their title:
document.querySelectorAll('div[title~="john"]');
Your selector should work if title value is john. You might wan't to select element that contains certain string as follow:
$('div[title*="john"]')

using .replaceWith() jQuery

I have a div that has this elements:
<div id = "menu">
<a>Elemento1</a><br/>
<a>Elemento2</a><br/>
<a>Elemento3</a><br/>
</div>
Each time one of the elements gets clicked I want a new div with different content to be added beside this list, depending on which element is clicked, it should add a diferent list. I'm new to web development, and I found that using the jQuery function .replaceWith() may do it, but is there any way I can use this function, adding divs I got in other .html files?
Thanks!
To get a certain part of another HTML file, use jQuery load function. A basic usage in your case, would be:
$('#result').load('ajax/test.html #container_you_want_to_load');
To add an element after or before the link, you have a few choices. The question is if you really need it. Perhaps it's enough to define one target div into which you'll load your content. In that case, the above example would suit perfectly.
If you however want to add element next to <a> tag, consider using after or before jQuery functions.
To catch a click even on one of your links, check click
Why not just have <div id="content"></div> after the menu, then use
$("#content").load("your_file.html");?
replaceWith is used to replace some DOM elements with different ones. I don't think this function can solve this.
You can use .load function to get html files content and insert it wherever you want. Just bind a click event to every link and use their href atributtes to get the respective file. Don't forget to return false in the end of the event.
something like this:
<div id="menu">
Elemento1
Elemento2
Elemento3
</div>
<div id="content"></div>
$("#menu a").click(function(){
$("#content").load(this.href);
return false;
});

How can I reuse this function?

I've wrote a function which is working fine and all but when I try to reuse it on multiple html blocks with the same class, it breaks. I've tried to use the .next() and .closest() method but without results. Where do I apply these? The function is to recreate a <select> dropdown but by using a unordered list.
It is important that the classes and function stay the same as the list is generated by the CMS and can be multiple times a page, so having a solution where I change the code and call each function separate is not good..
Demos
Dropdown works fine (function works fine on one unordered list)
Dropdown breaks (when reusing function and html code)
Your script had a number of things that needed changing. This should work, as best as I could understand what you were trying to do.
Main point being this:
$(".cloned").click(function(){
$('.options').toggle();
e.preventDefault();
});
The $('.options') selector inside the handler selects all the elements with the options class, regardless of where you clicked in the document. That's why every dropdown was activating on a click.
You should only select the specific .options element for the click. There are many ways to do this, but this is what I did:
$(this).next('.options').toggle();
This can be better.. Check out this fiddle
using toggleClass()
Fiddle

How do I hide an element with the same markup via jquery?

I have two custom dropdown lists that have the same markup. I need to have only one show at a time. Right now, I'm able to open both at the same time. Both should also close when I click off the list.
The same markup for both lists is required, so I can't use unique ID's or additional classes to make this happen.
Here is a link to my fiddle example: http://jsfiddle.net/dg7Lc/29/
Any help would be greatly appreciated, thanks!
-D
Consider adding a data attribute such as 'active' via jquery when you click on one of them, then hide all those that have that attribute.
$('.custom-select').eq(0).hide() will hide the first one.
Use .show() instead of .hide() to show (obviously) and change the index to (1) to get the second one.
First thought would be if you could wrap a span or div around either or both and use that to get around the "same markup" limitation. Other than that, though, I'd suggest using order in page - use .next() and .prev() to get between them, and something like
$("div.custom-select").get(0)
or
$("div.custom-select").get(1)
to select them from outside.
edit: if you can run them off of something like an onmouseover, onchange, or whatnot, it's even easier - the one that's changing will be passed into the function as the "this" parameter. Just hide both, and show this, or show both and hide this.
edit2: similarly, once you have one of them hidden properly - well, that one will be hidden, and respond to the ":hidden" selector. Use that to distinguish between them (and save the distinction as a jquery variable) before you go showing or hiding anything else
Hide the first:
$('.custom-select').first().hide();
Hide the second:
$('.custom-select').last().hide();
And then put these lines of code where needed.
http://jsfiddle.net/dg7Lc/31/
Basically, closing the others:
$('.custom-select').not(this).find('ul').slideUp('fast');
And for closing when clicking outside the box, I used this piece of code but it's a bit dirty:
$("body").click(function(e) {
var should = true;
for($e = $(e.target); should && $e.length; $e = $e.parent()) {
should = !$e.is(".custom-select");
}
if(should) {
$('.custom-select').find('ul').slideUp('fast');
}
});
You can bind a click to the document, that looks to see if they clicked on the custom-select or the document outside it and hides any open lists as it should:
$(document).click(function(ev){
if(!$(ev.target).is('.custom-select span')){ $('.custom-select').find('ul').slideUp('fast'); }
});
Updated JSFiddle

Categories

Resources