How to append unique element of div to another div - javascript

I have 2 div like
<div id="destination" runat="server"></div> and <div class="errorDiv"></div>
I write a jquery function
$(document).each(function () {
if ($("#destination").find("div").html() !== $(".errorDiv").html()) {
$("#destination").append($(".errorDiv"));
$("#error").append($("#destination"));
}
}).change();
In this function, if destination div contains errorDiv content skips, else append to destination. Then destination will append to another div. But, my check doesn't work . How can I append only unique elements of div? errorDiv content is produced in ASP page and this content is generic.
While page is running I catch the some error messages and I want to append something about these messages to destination div. for example; if I catch
<div class="errorDiv">A</div>
<div class="errorDiv">A</div>
<div class="errorDiv">B</div>
<div class="errorDiv">B</div>
<div class="errorDiv">A</div>
<div class="errorDiv">C</div>
contents I want to append only
<div class="errorDiv">A</div>
<div class="errorDiv">B</div>
<div class="errorDiv">C</div>
divs to destination div.
But with my function, all divs are appended.

So it sounds like you get new .errorDivs and want to add them to #destination only if equivalent text isn't already there.
To do that, you need to loop through the divs in #destination, rather than just looking at the HTML of the first one. See comments:
$(document).each(function() { // <== Calling .each on $(document) makes no sense
// Get an array of the currently-known errors in destination
var errors = $("#destination div").map(function() {
return $(this).html();
}).get();
// Loop through the "new" errors
$(".errorDiv").each(function() {
// Is the text of this error already in the destination?
if ($.inArray($(this).html(), errors) == -1) {
// No, add it
$("#destination").append(this);
$("#error").append($("#destination")); // <== This seems very strange
}
}
}).change(); // <== Triggering the change event on document seems odd

Related

How to get inner html based on inner div height?

As per my requirement i'm looking for jquery code which could do pagination by html contents..
I did some research on it but didn't get any feasible solution for the same.
here is sample code what I'm trying to achieve:
<div id="parent">
<div id="child" style="height:30%">---contents-----</div>
</div>
now according to requirement I'm using below js code to detect if div is overflown.
checkOverflow () {
let element = document.getElementById('child');
if (element.offsetHeight < element.scrollHeight ||
element.offsetWidth < element.scrollWidth) {
return true;
} else {
return false;
}
}
above function is returning true if contents are overflown on child div, now I want to truncate overflown contents to second page and add pagination on page so user can click on button to display more contents on second page.
I don't know how to achieve above thing but I've tried to get contents position of element.offsetHeight, but that didn't works
Thanks.

work on all <span> at the current <div> then check for the value of an attribute of the <span>

i am kinda stuck with my javascript, I am making a greasemonkey script for a site, that restricts me to use plain-old javascript only. For now, my script currently does is, search for all the tables, and table row with ProjectTable-row then for each ProjectTable-row look for a div with ProjectTable-status, if that div is not found, it will delete the whole row.
it works great.
document.getElementById("gmSomeID").onclick = function showAlert() {
console.log('invoked');
var projectDescriptions = document.querySelectorAll('tr.ProjectTable-row'),
projectDescriptions = Array.prototype.slice.call(projectDescriptions);
projectDescriptions.forEach(function(el) {
if (el.querySelector('div.ProjectTable-status')) {
} else {
el.parentNode.removeChild(el);
}
});
}
but, now I do not know how to work on the current div and loop on all span inside it. I am still 2 steps short.
Loop on all span
Search for all span which contains data-content="apple" if none of the span has this attribute, then delete it.
Something like this:
For a HTML tag like this:
<div class="ProjectTable-status">
<span data-content="apple">
</span>
</div>
this will not be deleted data-content is apple.
For a HTML tag like this:
<div class="ProjectTable-status">
<span data-content="banana">
</span>
</div>
this will be deleted, no span has data-content="apple".
For HTML code like this:
<div class="ProjectTable-status">
<span data-content="banana"></span>
<span data-content="apple"></span>
</div>
this will NOT be deleted, the div contains at least 1 span that has data-content of apple.
I have no idea, how to proceed now and really tired or trying anything, i do not even know how to check for attribute value.
Hope someone can guide or put me at the right path.
Thanks!
Starting with what you provided, I've just slightly refactored it to check for an "apple" span within each div as it loops through. Using continue, we can execute the next iteration of the loop without deleting the div element if we find that it contains an "apple" span. This code is not tested, but just what came off the top of my head, so it might need some tweaking.
document.getElementById("gmSomeID").onclick = function showAlert() {
console.log('invoked');
var projectDescriptions = document.querySelectorAll('tr.ProjectTable-row'),
projectDescriptions = Array.prototype.slice.call(projectDescriptions);
//pointer to work with current div
var currentDiv;
projectDescriptions.forEach(function(el) {
currentDiv = el.querySelector('div.ProjectTable-status');
//do we have a div?
if (currentDiv) {
//look for an apple within the div
if(currentDiv.querySelector('span[data-content="apple"]')){
//go to the next iteration of the loop without delete
continue;
}
}
//if we made it this far, we didn't find an apple
el.parentNode.removeChild(el);
});
};

Load Content From a Hidden Div?

There is a tutorial here: http://perishablepress.com/slide-fade-content/
and the code it provides is:
$(document).ready(function(){
// Ajax Slide & Fade Content with jQuery # http://perishablepress.com/slide-fade-content/
$('.more').live('click',function(){
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
$('#ajax').css('display','block').animate({height:'1px'}).empty();
}
$('#ajax').css('display','block').animate({height:'200px'},function(){
$('#ajax').html('<img class="loader" src="http://example.com/slide-fade-content/loader.gif" alt="">');
$('#ajax').load('http://example.com/slide-fade-content/slide-fade-content.html.html #'+href,function(){
$('#ajax').hide().fadeIn().highlightFade({color:'rgb(253,253,175)'});
});
});
return true;
});
});
This will load content from an external file, is there a way to do something similar but to load the content from a hidden div on the same page?
replace
$('#ajax').load('http://example.com/slide-fade-content/slide-fade-content.html.html #'+href,function(){
with
var contentTobeLoaded=$("#myHiddenDivId").html()
$('#ajax').html(contentTobeLoaded).fadeIn(600,function(){
Assuming you have the hidden div with the id myHiddenDivId
EDIT : As from your comment and sample link provided, Here is my updated solution
1) Have the content for each item in a seperate div and hide it. this div should have unique id
2) when you click on the links you get the id and load content from the hidden div corresponding to that.
HTML
<div id="divHiddenContainer" style="display:none;">
<div id="divItem1"><span style="background-color:Gray;">God, My description about item 1 goes here</span></div>
<div id="divItem2"><span style="background-color:yellow;">Brother,My description about item 222 goes here</span></div>
<div id="divItem3"><span style="background-color:orange;">Hello,My description about item 333 goes here</span></div>
</div>
Item 1
Item 1
Item 1
<h3>Content goes here</h3>
<div id="ajax"></div>
Javascript
$(".aItemLnk").click(function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#divItem" + id).html();
$('#ajax').html(contentTobeLoaded).fadeIn(600, function () {
//do whatever you want after fadeIn
});
});
Here is the working sample : http://jsfiddle.net/9xZrq/
Second sample which has the fadeOut before fadeIn : http://jsfiddle.net/9xZrq/1/
You can change the delay you need for fadeIn from 600 to 1200 or 1500 or whatever you want
Note that you need to have some connection between the link id and hidden div id so that you can figure out which div to be showed.
I suppose that your div already contains his data and you just want to show it, so you can use:
$('#id_of_your_div').show().fadeIn();
Or I've mistaken you and you want to load the content from a div to an another one? So you can retrieve his content with html().
If I understand right... just call your object html attribute to do that...
$('#yourdiv').html();
This will return the content of the div no matter it is hidden or no.
Should be able to just do something like this (if I gather you rightly) - http://jsfiddle.net/HTrep/6/
You should be able to load content from a hidden div fairly simply, since you're using jquery to have the $() method.
Give the div an id, then using $('#id-of-element').innerHTML will give you the contents of the hidden div.

Get all html between two elements

Problem:
Extract all html between two headers including the headers html. The header text is known, but not the formatting, tag name, etc. They are not within the same parent and might (well, almost for sure) have sub children within it's own children).
To clarify: headers could be inside a <h1> or <div> or any other tag. They may also be surrounded by <b>, <i>, <font> or more <div> tags. The key is: the only text within the element is the header text.
The tools I have available are: C# 3.0 utilizing a WebBrowser control, or Jquery/Js.
I've taken the Jquery route, traversing the DOM, but I've ran into the issue of children and adding them appropriately. Here is the code so far:
function getAllBetween(firstEl,lastEl) {
var collection = new Array(); // Collection of Elements
var fefound =false;
$('body').find('*').each(function(){
var curEl = $(this);
if($(curEl).text() == firstEl)
fefound=true;
if($(curEl).text() == lastEl)
return false;
// need something to add children children
// otherwise we get <table></table><tbody></tbody><tr></tr> etc
if (fefound)
collection.push(curEl);
});
var div = document.createElement("DIV");
for (var i=0,len=collection.length;i<len;i++){
$(div).append(collection[i]);
}
return($(div).html());
}
Should I be continueing down this road? With some sort of recursive function checking/handling children, or would a whole new approach be better suited?
For the sake of testing, here is some sample markup:
<body>
<div>
<div>Start</div>
<table><tbody><tr><td>Oops</td></tr></tbody></table>
</div>
<div>
<div>End</div>
</div>
</body>
Any suggestions or thoughts are greatly appreciated!
My thought is a regex, something along the lines of
.*<(?<tag>.+)>Start</\1>(?<found_data>.+)<\1>End</\1>.*
should get you everything between the Start and end div tags.
Here's an idea:
$(function() {
// Get the parent div start is in:
var $elie = $("div:contains(Start)").eq(0), htmlArr = [];
// Push HTML of that div to the HTML array
htmlArr.push($('<div>').append( $elie.clone() ).html());
// Keep moving along and adding to array until we hit END
while($elie.find("div:contains(End)").length != 1) {
$elie = $elie.next();
htmlArr.push($('<div>').append( $elie.clone() ).html());
};
// htmlArr now has the HTML
// let's see what it is:
alert(htmlArr.join(""));
});​
Try it out with this jsFiddle example
This takes the entire parent div that start is in. I'm not sure that's what you want though. The outerHTML is done by $('<div>').append( element.clone() ).html(), since outerHTML support is not cross browser yet. All the html is stored in an array, you could also just store the elements in the array.

MooTools Fx.Slide throwing this.element is null

The following code is throwing the error "this.element is null". However, the wid_cont is definitely grabbing an element.
window.addEvent('domready',function(){
var min = $(document.body).getElements('a.widget_minimize');
min.addEvent('click',
function(event){
event.stop();
//var box = ;
var wid_cont = ($(this).getParents('.widget_box').getElement('.widget_box_content_cont'));
var myVerticalSlide = new Fx.Slide(wid_cont);
myVerticalSlide.slideOut();
}
);
});
It's moo tools 1.2.4 and has the fx.slide included....
it does not return a single element but an array due to getParents() and possible other similarly marked up elements, Fx.Slide requires you pass it a single element.
here it is at least partially working when passing first item of the array: http://www.jsfiddle.net/KFdnG/
however, this is imo ineffective and difficult to manage if you have a long list of items and need a particular content layer to unfold only, you want to keep the lookup to the content layer more local.
something like this:
http://www.jsfiddle.net/KFdnG/4/
// store an instance into each content div and set initial state to hidden.
$$("div.widget_box_content_cont").each(function(el) {
el.store("fxslide", new Fx.Slide(el).hide());
});
$$('a.widget_minimize').addEvent('click', function(event) {
event.stop();
// can't use this.getNext() due to wrapper by Fx.Slide which does not have the instance.
this.getParent().getElement("div.widget_box_content_cont").retrieve("fxslide").toggle();
});
which works on the markup of:
<div class="widget_box">
<div class="widget_box_content">
link
<div class="widget_box_content_cont">
some content
</div>
</div>
<div class="widget_box_content">
link 2
<div class="widget_box_content_cont">
some content 2
</div>
</div>
</div>
this is also better as you won't be making a new instance of the Fx.Slide class on every click but will reference the ones already attached to the element.

Categories