Develop Reference

Get <div> elements without id in GWT

If i have html like this.Is there a way get a text apple between < div class="a" > and send it trought ajax to gwt application ?
<div class="A">
<div class="B">
<img class="icon" src="/images/ico.png" alt="" />
<div class="a">apple</div>
<div class="b">bannana</div>
</div>
</div>
and i have JavaScript like this :
$function(){
$('.B .icon').click(function(){
$(this).closest('.B').addClass('marked');
});
}

I would add this as a comment if I had enough reputation as I'm confused about your structure and question in general. Apologies if I don't understand correctly, but if you're typically traversing back up the DOM structure to the parent in your case could you use find to grab the element? .html() will grab the current content of said element.
$(function() {
$('.icon').click(function(){
var html = $(this).closest('.B').find('div.a').html();
// Do what you want with the contents. Simple alert as example.
alert(html);
});
});
This should get you what you're looking for. Please mark it as the answer if you find it matches what you need.
I'd suggest using .parent() rather than .closest('.B') if your elements will always be in the order you've posted and if further searching of the ancestor elements isn't needed.

Making a Div Dynamically using javascript/Jquery

I have following HTML code for a DIv, i was wondering if there is way i can make same div programaticaly using Javascript / Jquery.
Or is there a way i can append div having class "panel panel-default" in div having ID accordion it as first element every time.
Thanks for help

you can Use .prepend() or .prependTo().
prepend() puts the prepending elem at first index
$('#accordion').prepend("<div> this is new div</div>");
Since you wanted to copy html each time in a click. you Should use unique id(#appendpanel is duplicating each time) and use clone().For avoiding duplicate you can try this(use class name instead id)
avoid copy id demo
sample live demo

You need to change the markup to add some ids
<a id="clone">Add</a>
then
<div style="display:none" id="addme">...</div>
then
jQuery(function ($) {
var $cp = $('#addme');
$('#clone').click(function(){
$cp.children().clone().prependTo('#accordion')
})
});
Demo: Fiddle

Aside from using the createElement and assigning all of the attributes and adding them in the correct hierarchical order, there are a couple ways to do this.
1) enclose the elements as text and use $.parseHTML( htmlString ) to return a DOM node.(this is jquery)
2) paste the html inside a <script> tag with it's type set to something like type="html". The benefit of this is that if the script has an id, you can reference it via document.getElementById("idOfScriptTag"). The browser won't parse the contents of the script tag if it doesn't recognize its type, so you can just leave it on the page until you need it.

If I understand you correctly you want to add some html code through javaScript/jquery at a paticular poisitionin the DOM.You can do it in the following way
$(".some_class_of_div" ).html(
'<div class="class1" style="position:absolute; width:25px !important; display:none;">\
<img class="class2" src="http://xylz.com/static/img/black.png" style="width:30px;height:17px;padding-left: 10px;display:none;" title="try by click" >\
<div class="class3" style="position:absolute; width:25px !important; padding-left: 10px;display:none;">\
<img class="class4" src="http://xylz.com/static/img/border.png" style="width:20px;">\
<div class="class5" style="position:absolute; width:25px !important;display:none;">\
<img class="class6" src="http://xylz.com/static/img/settings.png" style="width:20px;">\
</div>\
</div>\
</div>\
<form class="class7" method="get" style="display:none;" accept-charset="utf-8">\
<input name="some_id" type="hidden" value="1">\
</form>');
Here I have used a class of div and added some html to it.The html can be anything you want.Instead of class you can also use id.hope that helps.

remove parent span tag using jquery?

I want to remove both span tag using Jquery from following code
Because div is child of span it will give errors in w3validators:
<td class="col-1 col-first">
**<span>
<span>**
<div class="user-picture">
<a href="/users/shoprite-mp" title="View user profile.">
<img typeof="foaf:Image" src="http://locationbasedmedia.co.za/sites/default/files/styles/thumbnail/public/pictures/picture-580-1379344365.jpg" alt="Shoprite Mp's picture" title="Shoprite Mp's picture"/>
</a>
</div>
**</span>
</span>**
</td>

use
$(".user-picture").unwrap();
$(".user-picture").unwrap();
Used unwrap twice as to remove both parent spans and keep the internal structure.

Another solution would be this:
$('td').click(function () {
var content = $('.user-picture', this).detach();
$(this).append(content);
$('span', this).remove()l
});
unwrap works perfectly well for your scenario, but at times you want to move the .user-picture around a bit more than just 2 levels, detach helps with that while keeping the object (including it's attributes and events) intact.

How to get a div which is removed from the DOM when it's parent has been made .empty()?

I have a div in a HTML file
"<div id="abc" hidden="hidden">
<div id="statIndicator">
<span id="imgInd" class="status-indicator-border">
<img src="../../LibSrc/SharedResources/IMG/loading-trace.gif" />
</span><span id="messageIndicator">Updating Plots...</span>
</div>
</div>"
I insert the statIndicator div in another div using append.
so that div becomes
<div id="parentDiv">
<div id="statIndicator">
<span id="imgInd" class="status-indicator-border">
<img src="../../LibSrc/SharedResources/IMG/loading-trace.gif" />
</span><span id="messageIndicator">Updating Plots...</span>
</div>
</div>
On refresh I write $('#parentDiv').empty() it deletes whatever is inside the 'parentDiv'.
But when I try to append statIndicator using $('#statIndicator'), it return "[]", though I have the 'statIndicator' div in Html.
Is there a way in which I can get the 'statIndicator' div?

No. $.empty() deletes the contents, so your "statIndicator" div no longer exists at all.
Just remove it from "parentDiv" before you call $.empty(). Either store it in a variable or put it back where it started, in "abc".

I think jquery.append() moves the selected elements without making a copy. So you can explicitly create a copy using the .clone() method and append it's result. Something like:
$('#abc #statIndicator').clone().appendTo('#parentDiv');
This is creating a copy and then appending it at the new location.
Once you do this there will be two divs with the same id, so it will be a good idea to always reference the statIndicator's parent container in your selectors.

You can use .detach() function if you want only parentDiv to be removed

Use same div to toggle different parts of the page

Hello I have the following code:
Javascript/jQuery:
$(document).ready(function() {
$(".clickMe").click(function() {
$(".textBox").toggle();
});
});
Html code printed with a for loop:
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 3</div>
I would like to be able:
When the page loads I want the to be hidden and toggle on click.
Using the same ids for <a class="clickMe"> and <div class="textBox"> to be able to toggle or hide the correct/equivalent <div> element.
jsFiddle code:
http://jsfiddle.net/A7Sm4/3/
Thanks
Edit 1: Class instead of Id
Edit 2: Fixed jsfiddle link

id are supposed to be unique
you should use class to do this
[EDIT] updated the jsfiddle to fit Marko Dumic's solution: http://jsfiddle.net/SugvH/

Something like this should do the trick:
$(document).ready(function() {
var divs = [];
$(".textBox").each(function(index) {
divs[index] = this;
});
$(".clickMe").each(function(index) {
$(this).click(function() {
$(divs[index]).toggle();
});
});
});

ID must (as per spec) be unique on the page. You can easily rewrite this to use class attribute:
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>
...
Initially, you need to either hide div.textBox when DOM becomes ready, or hide it using CSS.
Then you attach click handlers to a.clickMe:
$(function () {
$('a.clickMe').click(function () {
// find first of following DIV siblings
// with class "textBox" and toggle it
$(this).nextAll('div.textBox:first').toggle();
});
});
However, maybe you don't control the markup but desperately need this done, you can keep your markup as it is and still make it work due to the fact that jQuery uses Sizzle framework to query the DOM which can be forced around the limitation of document.getElementById() (which returns only one element).
E.g. suppose you used id instead of class, if you write $('#clickMe'), you'll get the jQuery collection of only one element (jQuery internally used .getElementById() to find the element), but if you write $('#clickMe'), you get the collection of all elements with the id set to "clickMe". This is because jQuery used document.getElementsByTagName('a') to find all anchors and then filtered-out the elements (by iterating and testing every element) whose attribute value is not "clickMe".
In that case (you used your original markup), this code will work:
$(function () {
$('a#clickMe').click(function () {
$(this).nextAll('div#textBox:first').toggle();
});
});
Again, don't do this unless you absolutely need to!

$(document).ready(function() {
$("a").click(function() {
$(this).parent().find("div").toggle();
});
});
Use something similar to this.

Try appending an index to each pair of a/div's ids (clickme1 and textbox1, etc). Then when an a is clicked, read the id, take the index off the end, and show/hide the textbox with the same index.