Why is this div completely invisible to jQuery? - javascript

I have this div (the topmost one in the markup below) in my HTML code that I'm trying to find via jQuery .children(). For some reason jQuery just can't find it.
This can be tested by running this:
$($('<p class="info-item"><span class="info-item-key">Gender:</span><span class="info-item-value">Male</span><span class="info-item-edit-button"> <a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a></span><div class="form-inline info-item-edit-input"><div class="form-group"><div class="input-group"><input type="text" class="form-control" value="" /><div class="input-group-addon"><a class="black-link info-item-edit-save-link"><i class="fa fa-check"></i></a></div></div></div></div></p>')[0]).children()
Here is the same markup contained in that code, but better formatted:
<p class="info-item">
<span class="info-item-key">Gender:</span>
<span class="info-item-value">Male</span>
<span class="info-item-edit-button">
<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
</span>
<div class="form-inline info-item-edit-input">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="" />
<div class="input-group-addon">
<a class="black-link info-item-edit-save-link">
<i class="fa fa-check"></i>
</a>
</div>
</div>
</div>
</div>
</p>
For context, I'm trying to use jQuery to show the edit form when the edit button is clicked.
Is there any reason why this div seems to be invisible to jQuery? .contents() can't find it either. (Try it.)
If it helps, that div is initially hidden with display: none in CSS, but even trying it in a JS console session attached to a document that doesn't have that CSS results in the div not being found either. (Try it in the StackOverflow JS console, or any other site, if you want.)

That's because the markup is invalid. div can't be child of a p element. p element can only have phrasing content.
Consider this simple example:
$('<p><div></div></p>');
This is how my Chromium browser renders the above markup:
<p></p><div></div><p></p>

The following fiddle shows you how to access the div you are looking for. I added some text within the div so you can see the alert.
https://jsfiddle.net/xw9Lteww/1/
JS
$(document).ready( function() {
alert($(".form-inline").text());
});
HTML
<p class="info-item">
<span class="info-item-key">Gender:</span>
<span class="info-item-value">Male</span>
<span class="info-item-edit-button">
<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
</span>
<div class="form-inline info-item-edit-input">
hey
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="" />
<div class="input-group-addon">
<a class="black-link info-item-edit-save-link">
<i class="fa fa-check"></i>
</a>
</div>
</div>
</div>
</div>
</p>

Related

unexpected closing tag angular error

Writing an angular app in bulma, copied the template directly from the template site for testing and I get this error. I have checked and checked and everything is closed properly, yet somehow I keep getting an unclosed nav error. Oddly enough when I delete the closing nav tag, the site compiles correctly, but is broken. I have no idea what to do.
Code
<section class="hero is-info is-fullheight">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="../">
<img src="http://bulma.io/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>Home</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-superpowers"></i>
</span>
<span>Examples</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-book"></i>
</span>
<span>Documentation</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="https://github.com/dansup/bulma-templates/blob/master/templates/landing.html">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>View Source</span>
</a>
</span>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-6 is-offset-3">
<h1 class="title">
Coming Soon
</h1>
<h2 class="subtitle">
$this is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.
</h2>
<div class="box">
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Enter your email">
</p>
<p class="control">
<a class="button is-info">
Notify Me
</a>
</p>
</div>
</div>
</div>
</div>
</div>
Error
`compiler.js:486 Uncaught Error: Template parse errors:
Unexpected closing tag "nav". It may happen when the tag has already
been closed by another tag. For more info see
https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-
implied-end-tags ("
</div>
</div>
[ERROR ->]</nav>
</div>`
in my case I was forgetting a detail in the tag
<button class="btn btn-primary" (click) "handleClickMe()
">Click me !</button>
I forgot to put the "=" in (click)="handleClickMe()
Usually if you see an "Unexpected closing tag <something>" the problem isn't actually with that <something> but rather with an adjacent element that hasn't been properly closed. Paste stuff here: https://validator.w3.org or any similar HTML validator service, or use a better editor/IDE that offers syntax highlighting to help you find these errors.
You are missing a closing </div> tag.
You close navbar-brand, navbar-menu and navbar-end but you do not close <div class='container'>
As this missing </div> tag ought to be directly before </nav>, you get the error telling you, in fact, exactly where you ought to look. "I found a </nav> I wasn't expecting to see!" ... Ok, so go look at wherever you have a </nav> and figure out what element nearby is missing or has typos, etc.
Adding for future reference, for Angular
I've also seen this where you have invalid html like this
<p>
<div>
</div>
</p>
Change the p to a div and it'll work

Disable toggle inheritance from parent tag

Hi i was wondering if it is possible to override or disable inheritance from a parent tag.
what i want to do is to be able to make use if the "input-group" class but having a particular tag not inheriting the toggle function from the parent a-tag.
the reason i'm doing this is because i'm using a plugin and i want to add a button looking consistent with the overall theme.
Here is some code:
<div class="col-lg-12 col-md-6">
<lable class="lfInputLable">From date</lable>
<div class="dropdown">
<a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target="#">
<div class="input-group">
<!-- COMMENT: i want the span tag shown under this comment NOT to inherit the a-tag's toggle function, it being inside it and all -->
<span type="button" id="dateRemove" class="input-group-addon" ng-click="clearToDate()"><i class="glyphicon glyphicon-remove"></i></span>
<input type="text" class="form-control" data-ng-model="data1.dateDropDownInput1" data-date-time-input="YYYY-MM-DD HH:mm" disabled="disabled"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="data1.dateDropDownInput1" data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }" />
</ul>
</div>
</div>
So is this at all possible?

Jquery Target a tag in the third child of previous sibling

I'm not so great with traversing in jquery. Here is my markup:
<div class="row planarea">
<div class="col-md-6">
<h1>Agera Fixed Advantage 12</h1>
Fixed Price - 12 Months<br>
Utility: Con Edison
</div>
<div class="col-md-3">
<span class="price">$0.0799</span> <span class="killowats">/ kWh</span>
</div>
<div class="col-md-3">
<a class="nolink showmore" data-toggle="collapse" data-target="#24moscollapse" aria-expanded="false" aria-controls="24moscollapse">
<div class="selectdetails">
Details <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</div>
</a>
<label >
<input type='radio' name="prefs" class="hidecheck" value="mail">
<span></span>
</label>
</div>
</div><!--row-->
<div class="row collapse detailsrow" id="24moscollapse">
<div class="col-xs-12 plandetailsbox">
stuff
</div>
</div>
what I want to do is something similar to this:
$('.detailsrow').on('show.bs.collapse', function () {
$(this).prev().closest().("a.showmore").html('<div class="selectdetails">Details <i class="fa fa-chevron-circle-up" aria- hidden="true"></i></div>');
})
I can't seem to figure out how to target that a tag and it's getting kind of confusing. I need to target what I believe is the a tag in the third child of the previous sibling for every repeated row of this information. Any help would be appreciated.
closest() finds the first parent. And closest(selector) finds the first selector matched parent.
Whereas, you are looking for a child. So, you can use find(selector).
Change this:
$(this).prev().closest().("a.showmore")
To this:
$(this).prev().find("a.showmore")

Handlebar content dynamic

I have the code below that should display the chat window when I click on the user name in <li>
Code <ul> which contains the User list and received the click
<ul class="chat-contacts">
<li class="online" data-user-id="USERCODE">
<a href="#">
<div class="media">
<div class="media-body">
<div class="contact-name">USERNAME</div>
</div>
</div>
</a>
</li>
</ul>
This is the chat window code. If I put a static content of the <ul> window appears, however when I feed the the <ul> with content dynamic the click does not work. Can someone help me??
<script id="chat-window-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="chat-collapse" data-target="#chat-bill">
<i class="fa fa-times"></i>
<a href="#">
<span class="pull-left">
<img src="{{ user_image }}" width="40">
</span>
<span class="contact-name">{{user}}</span>
</a>
</div>
<div class="panel-body" id="chat-bill">
</div>
<form id="messageForm">
<input id="nameInput" type="hidden" class="input-medium" value="Macbook" />
<input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem" />
</form>
</div>
</script>
Your click event is not working. The event doesn't know the element exists.
This can happen when using jQuery('.chat-contacts li').click(function(){// do something})
I would try setting the click event with this:
jQuery(document).on('click', '.chat-contacts li', function(){
});
Setting the event with on will force jQuery to scan for new elements in the list.

Toggle not working with screenreader

I have the following code:
if (screen.width > 769) {
$(".searchIcon").on("click", function () {
$(".searchForm").toggle("slow");
$(".searchIcon").children().toggleClass("icon-search").toggleClass("icon-close");
$("#SearchBox").focus();
});
}
And my markup:
<div class="searchContainer navbar-right hidden-xs hidden-sm">
<button class="searchIcon" aria-label="Search" type="button">
<i class="icon-search" aria-hidden="true"></i>
</button>
</div>
<div class="searchContainer hidden-md hidden-lg">
<i class="icon-search" aria-hidden="true"></i>
</div>
<div class="navbar-form navbar-right searchForm" style="display: none;">
<label class="sr-only" for="#SearchBox">Search</label>
<input id="SearchBox" class="form-control" type="text" placeholder="Search">
</div>
When the button is clicked, the .searchForm container slowly toggles into view to show the search box. This works fine on desktop and mobile devices, but when navigating using a screen reader (using the built in accessibility tools on the iPad), selecting the button to click it has no effect. What am I missing here?
It seems as though I found my answer here:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
I changed my JS to this:
if (screen.width > 769) {
$(".searchIcon").on("click", function(e) {
e.preventDefault();
var pressed = e.target.getAttribute("aria-pressed") == "true";
//change the aria-pressed value as the button is toggled:
e.target.setAttribute("aria-pressed", pressed ? "false" : "true");
$(".searchForm").toggle("slow");
$(".searchIcon").children().toggleClass("icon-search").toggleClass("icon-close");
$("#SearchBox").focus();
});
}
and my markup to this:
<div class="searchContainer navbar-right hidden-xs hidden-sm">
<button class="searchIcon" aria-label="Search" type="button" aria-pressed="false">
<i class="icon-cmich-search" aria-hidden="true"></i>
</button>
</div>
<div class="searchContainer hidden-md hidden-lg">
<i class="icon-cmich-search" aria-hidden="true"></i>
</div>
<div class="navbar-form navbar-right searchForm" style="display: none;">
<label class="sr-only" for="#SearchBox">Search</label>
<input id="SearchBox" class="form-control" type="text" placeholder="Search">
</div>
I've only been using aria for the last 3 months or so, and there is still a huge learning curve here for me, but this produced the result I was expecting. The search box now slowly toggles into place just as it did with the desktop/mobile device.

Categories