I'm trying to append the contents of a container from one to the other without losing any sort of binding and I'm scratching my head wondering why it's so difficult :D
<div class="container">
<div class="field">
<label>Password</label>
<input type="username" />
</div>
</div>
<div class="container">
<div class="field">
<label>Password</label>
<input type="password" />
</div>
</div>
// This puts the actual container in, I need the inner contents of it
$('.container').eq(0).append($('.container').eq(1));
// This loses any sort of binding that applies to what I'm moving
$('.container').eq(0).append($('.container').eq(1).html());
// This screws up the HTML
$('.container').eq(0).append($('*', $(container).eq(1)));
Seems like such a simple and common task but I've got no idea how to get around this? My first answer would be to wrap the content in another container and move that instead.
What d'ya think? Am I going mad or is this impossible? :D
This should do what you want:
$('.container').eq(0).append($('.container').eq(1).children());
JSBin Example - You'll notice the change function still works on the appended field.
Related
I have this situation:
<div id="first">
<div>
<p>text</p>
</div>
</div>
<div id="second">
<div>
<button class="button">click</button>
</div>
</div>
...
<div id="first"> ... </div>
<div id="second"> ... </div>
...
and so on, the structure repeats.
This structure is created dynamically so I can't use any specific class nor id for the first div.
I need to retrieve the text in the first div when I hit the button in the second div.
(NOTE: I need a pure javascript solution, not a jQuery solution)
Thanks
Assuming you have an event handler for the button click, you could do this from that event handler:
function buttonClickHandler(e) {
var first = this.parentNode.parentNode.previousSibling;
var paragraphs = first.getElementsByTagName("p");
var text = paragraphs[0].textContent;
}
If you have common and known class names on the the divs marked first and second, then you can make your Javascript code much more insulated from markup changes which is generally a good idea.
P.S. I presume you know that you should't have duplicate id values in your HTML. This code doesn't use them, but you should be using class names instead of id values if you're going to have duplicates.
I am trying to clone a DIV to prevent data reputation; this is a frequent thing I want to do over various pages so I don't want to make bug structural changes.
I would like to Clone mApageLeft with the class maContent, and all of its inner div's and content into another div named cloneContent.
I have looked at other examples of Clone, and my attempt does not show anything. Thanks in advance for any help.
<div>
<div>
<div>
<div id="mApageLeft" name="mApageLeft" class="maContent">
<div> header and some text here
</div>
<div> text and image here
</div>
<div> text and another image here
</div>
</div>
</div>
</div>
</div>
<div id="mobileArea">
<div id="mobileMainArea">
headers, links and sme text
<div name="cloneContent" id="cloneContent" class="maContent"></div>
<script>
$(function(){
var $mainAreaClone = $('#mApageLeft').clone();
$('#cloneContent').html($mainAreaClone);
});
</script>
</div>
</div>
Your code works fine when I test it on fiddle. Even after that, if you wanna try something else, you can try append() instead of html() function. Usually when you clone, you want to append the cloned object, you don't want to put is as inner HTML. However, that will also work.
I've only been using angularjs for a day so warning this may be a dumb question!
I have set of divs which display fine if I use the following:
<div class="numbers">
<div ng-class="classes[0]">0</div>
<div ng-class="classes[1]">1</div>
<div ng-class="classes[2]">2</div>
<div ng-class="classes[3]">3</div>
<div ng-class="classes[4]">4</div>
<div ng-class="classes[5]">5</div>
</div>
..but I thought that it would be better to use a loop so I tried:
<div class="numbers" ng-repeat="class in classes">
<div ng-class="class">{{$index}}</div>
</div>
The problem is that when using the ng-repeat each of the repeated items seems to get wrapped with its parent div which forces the width too wide and stops each number floating left.
Here it is on jsfiddle:
http://jsfiddle.net/alanbeech/BLBJq/19/
Put ng-repeat directive on inner div tag
<div class="numbers" >
<div ng-repeat="class in classes" ng-class="class">{{$index}}</div>
</div>
Updated fiddle http://jsfiddle.net/vittore/BLBJq/21/
Thanks this helped me too. For some reason I thought ng-repeat was supposed to be on the outer element rather than the inner. However, it makes sense that it should be in the inner element that needs to be repeated
I have a setup, something confusing like this:
<ListView>
<ItemTemplate>
<div id="Content">
<asp: TextBox ID="OuterTextBox" />
<div id="Controls">
<asp: ComboBox ID="InnerComboBox"/>
</div>
<div>
<asp: Button ID="Submit" />
</div>
</div>
</ItemTemplate>
<ListView>
Wonky I know, this is just a mockup. The real thing is worse. This is an ItemTemplate so this is obviously going to dynamically generate IDs when the page is compiled. What I'm trying to do is use jquery to create an object that starts at the level of the div labeled "Content", then search all of it's children (recursively) to find the value of each specified control. In this example, they are OuterTextBox and InnerComboBox. What is confusing me is the ridiculous hierarchy of elements. How do I do this the most efficiently? I can only assume that shortly down the road, there will be changes to the hierarchy of divs, so I'm hoping to get something that won't break as soon as I move something, so explicit paths to the controls aren't going to work. Here is the concept I'm currently trying to expand on:
function ClientIDS(obj) {
var txt = $(obj).prevAll('input[id*="txtTextBox"]:first');
alert($(txt).val());
return false;
}
I would then do something like OnClientClick="ClientIDS(this)" in the server control.
This code is simple and clean, and worked perfectly when all of the controls were in the same div (as siblings). Can anyone come up with a way to find the controls in a similar, simple fashion to this when the controls get broken up by divs like this?
The usual way you find other items in the same container as you, but not necessarily siblings is to use .closest() to find the desired common ancestor constainer and then use .find() to find the actual element you're looking for in that container using class names.
I'm not sure exactly where your click starts, but lets say you had multiple items that came from this itemTemplate that I've modified to have a few classes:
<ListView>
<ItemTemplate>
<div class="Content">
<asp: TextBox ID="OuterTextBox" class="textbox"/>
<div id="Controls">
<asp: ComboBox ID="InnerComboBox"/>
</div>
<div>
<asp: Button ID="Submit" />
</div>
</div>
</ItemTemplate>
<ItemTemplate>
<div class="Content">
<asp: TextBox ID="OuterTextBox" class="textbox"/>
<div id="Controls">
<asp: ComboBox ID="InnerComboBox"/>
</div>
<div>
<asp: Button ID="Submit" />
</div>
</div>
</ItemTemplate>
<ListView>
Then, from the submit button, you could use:
$(this).closest(".Content").find(".textbox")
And that would give you the textbox that was in the same container as the button that was clicked on.
If I understand you correctly, you could try:
$('#content').find('input').each(function(){
//do something
});
The input selector could obviously be replaced with another selector, such as a certain class.
The layout of my page:
<div id="header">This is where you select tabs</div>
<div id="main">
<div id="left">Main Content</div>
<div id="right">Sidebar</div>
</div>
<div id="bottom">
<form>
<input id="msgForm" type="text" name="chat" size="100"/>
<input id="enterB" type="submit" value="enter"/>
</form>
</div>
The left and right needs to change content when you select another tab on the header. I am thinking of putting the innerHTML of each tab into an array, and when I want to switch tabs I just arrayOfContent[currentTabId] = getElementById("left").innerHTML; getElementById("left").innerHTML = arrayOfContent[switchTabId]
And the same for right. This page will use ajax requests to add divs and remove old divs (which for the current tab I can just remove divs with javascript by id, but for tabs not currently active I'll have to split strings as I'll mark a <!-- SPLIT ME --> at the end of every js-created div.)
Will this work? Are there better approaches to this?
according to me,
better approach is to use jquery library and Ui library
http://jqueryui.com/demos/tabs/
see the example of ajax page.