jquery load() after a h4 tag - javascript

How do I get jqery's load to load sometime after a particular tag? In my case, I'll be loading a form after the h4 tag. That's where it needs to go. My problem is: the H4 tag will disappear. Is there anyway to get the form to load under the H4 tag?
jquery:
$("#loadForm").click(function() {
$("#entry").load("load.forms.php?option=" + $("#loadForm").val());
});
markup:
<div id="post">
<div id="entry">
<h4>My Heading</h4>
//The Form goes here
</div>
</div>

Why not use InsertAfter
http://api.jquery.com/insertAfter/
Then you can select out the h3 tag and insert after it

You can add an extra element under the heading, and load the data in there?
$("#loadForm").click(function() {
$("#entry div.form").load("load.forms.php?option=" + $("#loadForm").val());
});
<div id="post">
<div id="entry">
<h4>My Heading</h4>
<div class="form"></div>
</div>
</div>

Related

modify / move an existing html tag in the DOM (javascript)

I want to move my div class="contentlinks" tag with its content, to place it in the div class="row" after the div class="col-12".
Here is the basic html architecture :
<span id="data">
<section id="" class="thesectionQ">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
</div>
</div>
</section>
<div class="col-12 contentlinks">
<a class="btn">link1</a><a class="btn">link2</a>
</div>
</span>
Tags are dynamically created in js... my problem is that I can't seem to use appendChild ...
my problem is that I can't seem to use appendChild ...
I'm trying to target my section with a class="thesectionQ" in a variable as well as my div class="contentlinks" that I want to move :
for example...
var thedata2 = document.getElementById('data').getElementsByClassName('thesectionQ');
var thedata = document.getElementById('data').getElementsByClassName('contentlinks');
thedata2.appendChild(thedata);
but I have errors ... and too often
give section id so it become easy.
document.querySelector('#sectionId div.row')
.appendChild(document.querySelector('div.contentlinks'))

Javascript Function parameter to target html ID and add CSS Class

I am trying to display a gallery of coaches on a webpage by displaying images with a name. I would like to enable a popup window onClick that will display more information for each coach by toggling the CSS class .-enable {} by targeting specific container divs using their associated ID's. I setup the html so a popup window appears with a "close" button by toggling the css class .enable on that specific container.
I thought to use a really simple function with a parameter to select the id, then toggle a class on the id. In my example, everything wrapped within the first tag is visible by default, and the following div is activated by toggling the css class .-enable. My example "Chris" is a coach and by clicking on the default container block, I activate function "coachWindow(coach)" and pass "Chris" as a parameter in the function to select the div with ID "chris" and toggle the CSS class.
function coachWindow ( coach ) {
document.querySelector("#" + coach).classList.toggle("-enable");
}
.-enable {
display:block;
}
<a onclick="coachWindow(chris)"><div>
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h3 class="coach-name">Chris</h3>
</div>
</div>
</div>
</a>
<div id="chris" class="coach"> <!--(-enable class appears here)-->
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h3 class="coach-heading">Chris</h3>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>
Text block on this coach.
</p>
</div>
<button onclick="coachWindow(chris)" class="coach-button">Close</button>
</div>
</div>
</div>
I wasn't sure about the querySelector options, but I saw an example with jQuery that looked like $('#' + parameter) capable of targeting parameter ID's
When I run document.querySelector(chris).classList.toggle("-enable"); from the console, the popup box appears, however running the same id through function coachWindow returns undefined and typeError results.
How can I write my function so I can pass through any coach ID and display the popup window for that corresponding coach?
This is much simpler than you think. First, don't focus on ids as this will make for a more complex and brittle solution. If you structure your HTML correctly, it's just a matter of showing or hiding the appropriate div by locating it with the DOM .closest() and .nextElementSibling() methods and then adding and removing a pre-set class with .classList.add and .classList.Remove. With this approach, it doesn't matter what the ids are (you don't even need to use them) and you can add/remove coaches at any time without having to modify the JavaScript. Just keep the correct HTML structure.
Also, don't use <a> elements just as a click event trigger. Only use them when you are navigating, otherwise it's semantically incorrect. Just about any visible element can have a click event set up on it as you'll see below. Along the same lines, you can style anything to look like anything, so even non-link elements can look like links or buttons or whatever.
Speaking of semantics, don't use headings (h1...h6) because of how they make the text look. In fact, never use any HTML element because of the built-in styling that comes with it. Use the right tag to describe your content and use CSS to style the elements later. An h3 should only ever be used to describe content that is at a third sub-level in a hierarchy. That means that they should only ever appear as children of an h2 and that h2 needs to be in an h1.
// Get all the "links" into an array
let links = Array.prototype.slice.call(document.querySelectorAll("h1.coach-name"));
// Loop over the array of links
links.forEach(function(link){
// Set up a click event handler for each link
link.addEventListener("click", function(){
// Locate the outermost div of the clicked element and
// remove the hidden class from the following element
link.closest(".enlarge").nextElementSibling.classList.remove("hidden");
});
});
// Get all the close buttons into an array
let closeButtons = Array.prototype.slice.call(document.querySelectorAll(".coach-button"));
// Loop through all the close buttons
closeButtons.forEach(function(btn){
// Set up a click event handler for each
btn.addEventListener("click", function(){
// Locate the nearest ancestor div that holds the popup
// and add back the hidden class to hide the current popup
btn.closest(".coach").classList.add("hidden");
});
});
.coach {
border:6px double #e0e0e0;
padding:5px; position:absolute;
top:25px; left:25px;
background-color:#55f;
color:#ff0;
padding:10px;
border-radius:3px;
}
.enlarge h1, .coach h1 {
font-size:1em;
margin-top:.5em;
padding:3px;
text-align:center;
}
.enlarge h1 {
border:1px solid #808080;
background-color:#e0e0e0;
display:inline-block;
border-radius:2px;
width:75px;
cursor:pointer;
}
.enlarge h1:hover { box-shadow:0 0 1px #606060; }
/* This will be set on the popups by default
and then removed as needed. */
.hidden { display:none; }
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Chris</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden"> <!-- each popup is hidden by default via CSS -->
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Chris</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
<!-- ********************************************** -->
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Mary</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden">
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Mary</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
<!-- ********************************************** -->
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Steve</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden">
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Steve</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
<!-- ********************************************** -->
<div class="enlarge">
<div class="chris-img coach-img-sizing">
<div class="coach-overlay">
<h1 class="coach-name">Alice</h1>
</div>
</div>
</div>
<div id="chris" class="coach hidden">
<div class="lightwindow"></div>
<div class="coach-box">
<div class="coach-container">
<h1 class="coach-heading">Alice</h1>
<div class="image-container chris-img coach-img-sizing"></div>
<div class="coach-text">
<p>Text block on this coach.</p>
</div>
<button class="coach-button">Close</button>
</div>
</div>
</div>
I think your code is not complete, since i cannot see the css style that makes your div hidden. i assume it is something like this:
.coach {
display:none;
/* more styling... */
}
This happens because of CSS priorities. When the DOM experiences changes and the element is rendered again, it takes both CSS classes and process them. But, since both classes (what you define for coach and -enable) are together and both try to set display to different values, the rule that is at last is processed.
So, in order to fix this, you need to order your CSS rules in the following way:
.coach {
display:none;
}
.-enable {
display:block;
}
That way, if -enable is present, it will be the last style applied after applying .coach.
There are more rules about this, for instance, if you're applying CSS styles based on ID or element name, there are different priority rules. You can read more here

Display html of previous element using jquery?

I am a beginner.
I want to display the HTML of previous element when the button is clicked.
I am able to display HTML content of button using outerHTML property. But when i use prev() function with the current object, it is showing error.
function show(currentObject) {
alert($(currentObject)[0].outerHTML);
}
above code gives the html content of the current button.
(Click) is shows as alert.
but
function show(currentObject) {
var prevObject = $(currentObject).prev();
alert($(prevObject)[0].outerHTML);
}
above code is giving me error!!
error: TypeError: $(...)[0] is undefined
Below is the html
<div class="row">
<div class="col-md-12"><a class="navbar-link" href="/somelink">linktext</a></div>
<div class="col-md-12"><p>click below button</p></div>
<div class="col-md-4"><button onclick="show(this)" class="btn btn-primary">Click</button></div>
</div>
Is there a way to do it right?
You can use .prev().html() to getting previous element html, check updated snippet below..
alert($('.currentItem').prev().html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">Previous Element</div>
<div class="item1 currentItem">Current Element</div>
If you want to use pure Javascript use previousElementSibling
document.getElementById('foo').addEventListener('click', currentObject);
function currentObject() {
alert(this.parentNode.previousElementSibling.outerHTML);
}
body {
font: 13px Verdana;
}
<div class="row">
<div class="col-md-12"><a class="navbar-link" href="/somelink">linktext</a></div>
<div class="col-md-12">
<p>click below button</p>
</div>
<div class="col-md-4"><button class="btn btn-primary" id="foo">Click</button></div>
</div>

<a> element not working properly when hiding parent?

I made this script, and despite one oddity, it works fine. It's hiding/showing the parent of div element with a class containing specific content. The problem when I press my <a> elements, that act as buttons, they "filter" the divs, but it leaves the first comment <a>? If I change the element do a <div> instead no problem, but with an <a> element it behaves weirdly? Is this just a bug or?
here is a JSFiddle: https://jsfiddle.net/g1puxhs7/2/
HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a>Comment</a>
</div>
</div>
<style>
.row {
width: 200px;
margin: 10px;
background: #ccc;
padding: 4px;
}
</style>
SCRIPT:
//--Filter by Status--//
$('.viewBtn').click(function() {
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});
The problem is with your links:
<a class='viewBtn'>Published<a>
<a class='viewBtn'>Completed<a>
<a class='viewBtn'>Created<a>
You have 6 opening a tags, instead of 3 opening and 3 closing tags.
This is why the browser adds closing a tags in your script in a bunch of places, one of them in your first div—and then your whole DOM tree looks different than what you want.
Your markup needed to be cleaned up. Here is your markup cleaned up. Also, i find it best to add href for you anchor tags, and then you can comment them out with #, or you can add javascript:void(0). If you use the # approach, in your JS, you can add e.preventDefault();
HTML Cleaned:
<div>
<a class='viewBtn' href="#">Published</a>
<a class='viewBtn' href="#">Completed</a>
<a class='viewBtn' href="#">Created</a>
</div>
<div class="orders" id="orders">
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff" onclick="Comment">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
<div class="row">
<div class="status">
Completed
</div>
<a class="stuff">Comment</a>
</div>
</div>
JS with preventDefault():
$('.viewBtn').click(function(e) {
e.preventDefault();
var txt = $(this).text();
$('.status:contains("' + txt + '")').parent().toggle();
$(this).toggleClass('down');
});

get the last element with jquery

I have the following elements:
fieldset (class="A") > div > p > several input and labels
I want to get the last div in the fieldset - with the div tag included
i.e. not from the "p" tag that is inside the last "div"
I tried :
$('.A').children().last().html()
but it gives me the last div without the div tag (i.e. from the p inside)
any ideas why or how i can include the div tag in the query?
html:
<div class="form">
{{ form.as_p }}
<fieldset class="A">
{% for b in B%}
<div id="b-{{ forloop.counter0 }}">
{{b.as_p}}
</div>
{% endfor %}
</fieldset>
</div>
html() will only get the innerHTML. You can make use of the native outerHTML property by retrieving the native DOM element
$('.A').children().last()[0].outerHTML
Try this : You can clone the last div. Add it to some temp jquery element and take .html() will give you outer html of last div
$(function(){
var tempDiv = $('<div></div>');
tempDiv.append($('.A').children().last().clone());
alert(tempDiv.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="form">
<fieldset class="A">
<div id="a">
<p>a</p>
</div>
<div id="b">
<p>b</p>
</div>
<div id="c">
<p>c</p>
</div>
</fieldset>
</div>
I think you don't need to use other functions. You can just try
$(".A > div:last-child")
to select your last div with DIV tag included.

Categories