I have a problem with Javascript. I have a database. I query my database to a form. I reference id to JS function(like this show_modal();). When I click button function works but sometimes doesn't work? Why? Sometimes alert shows the value of functions sometimes nothing does.
HTML
<div class="product-card--body">
<div class="card-image">
<img photourl"]?="" src="<?=$value["/>
" alt="">
<div class="hover-contents">
<a class="hover-image" href="product-details.html">
<img photourl"]?="" src="<?=$value["/>
" alt="">
</a>
<div class="hover-btns">
<a class="single-btn" href="cart.html">
<i class="fas fa-shopping-basket">
</i>
</a>
<a class="single-btn" href="wishlist.html">
<i class="fas fa-heart">
</i>
</a>
<a class="single-btn" href="compare.html">
<i class="fas fa-random">
</i>
</a>
<a class="single-btn" data-target="#quickModal" data-toggle="modal" href="#">
<i class="fas fa-eye" id="get_arr_id" onclick="show_modal(<?=$value[" productid"]?="">
); ">
</i>
</a>
</div>
</div>
</div>
</div>
JS
function show_modal(id){
var sendData = new FormData();
sendData.append("id", id);
alert(id);
}
Click on an a tag can be conflict with onclick event on an i tag.
Related
when I click on title ( Title Goes Here) text. I am getting null for nextElementSibling instead of a element...
Edit
you can nest any elements inside an <a> except the following :
<a>
<button>
follow link
<a> and<button> both are invalid..
but I am getting null for a tag.. not for button tag.... I am looking for more clarity and valid source...
if I console log console.log(document.links) .. it's give three HTMLCollection collection...
End Edit
Below Example Code
console.log(document.links)
document.querySelectorAll(".viewAbstractToggleTitle").forEach(function(item) {
item.addEventListener("click", function(e) {
if (e.target.parentElement.classList.contains('viewAbstractToggleTitle')) {
console.log(e.target.parentElement.nextElementSibling.nextElementSibling)
console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling);
console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling);
}
})
})
<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">
<a href="javascript:void(0)">
<span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">
<span style="font-weight: 600;font-size:16px;">
Title Goes Here
</span>
<span> ( 1-10 page )</span>
</span>
<br>
<div class="authors">
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
</div>
<button>
button tag
</button>
<a class="inlineBlock" href="" download>
<i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>
<a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>
<div class="showTabe sTab">
<div class="tabBox">
<div class="tab">
<label class="label" for="tab1_">Abstract</label>
<label class="label" for="tab2_">Graphical of Author </label>
</div>
<div class="box">
<div class="content"><input id="tab1_"> Description
</div>
<div class="content"><input id="tab2_">
<p>image</p>
</div>
</div>
</div>
</div>
<br>
</a>
</li>
Your HTML is invalid. You have disallowed things like nested hyperlinks. This means the HTML parser, which is designed to be forgiving in spite of errors, has to come up with a new interpretation of your element tree. Here's what Firefox at least translates it to:
<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">
<a href="javascript:void(0)">
<span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">
<span style="font-weight: 600;font-size:16px;">
Title Goes Here
</span>
<span> ( 1-10 page )</span>
</span>
<br>
<div class="authors">
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
</div>
<span>
span tag
</span>
</a>
<a class="inlineBlock" href="" download="">
<i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>
<a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>
<div class="showTabe sTab">
<div class="tabBox">
<div class="tab">
<label class="label" for="tab1_">Abstract</label>
<label class="label" for="tab2_">Graphical of Author </label>
</div>
<div class="box">
<div class="content"><input id="tab1_"> Description
</div>
<div class="content"><input id="tab2_">
<p>image</p>
</div>
</div>
</div>
</div>
<br>
</li>
You can get this information for yourself by copying the HTML from your browser's DOM inspector.
As you can see, the other <a/> elements are not siblings of .viewAbstractToggleTitle. This is because the DOM parser had to insert a closing of your first <a/> element since you cannot nest them.
<div class="">
<span>
<div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-text">
<div class="ant-upload-list-item-info">
<span>
<i aria-label="icon: paper-clip" class="anticon anticon-paper-clip">
</i>
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="fileDoc.doc">fileDoc.doc</span>
<span class="ant-upload-list-item-card-actions ">
<a title="Remove file">
<i aria-label="icon: delete" title="Remove file" tabindex="-1" class="anticon anticon-delete">
...
</i>
</a>
</span>
</span>
</div>
</div>
</span>
</div>
<div class="">
<span>
<div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-text">
<div class="ant-upload-list-item-info">
<span>
<i aria-label="icon: paper-clip" class="anticon anticon-paper-clip">
...
</i>
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="fileJpeg.jpeg">fileJpeg.jpeg</span>
<span class="ant-upload-list-item-card-actions ">
<a title="Remove file">
<i aria-label="icon: delete" title="Remove file" tabindex="-1" class="anticon anticon-delete">
...
</i>
</a>
</span>
</span>
</div>
</div>
</span>
</div>
This is my case, i want to select the " .ant-upload-list-item-card-actions > a" when the class "ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" contains fileDoc.doc
I made this
candidateUploadFileButton = '#filesUpload';
candidateUploadRemoveButton = '.ant-upload-list-item-card-actions > a';
cy.get(this.candidateUploadFileButton, {force: true}).contains(fileName);
cy.get(this.candidateUploadRemoveButton).click();
It works for a single input only for a single div class, if there two classes like in the previously example , it doesn't work beacuse it says there are multiple values
I added this picture, maybe it will help what i want to do, i want to press Remove button for the file named "fileDoc.doc"
https://i.stack.imgur.com/voQqp.png
Refer here:
As per your markup, you can use this:
cy.contains(fileName).next().find('> a').click()
I am new to Angular. Here is my code. The code below throws an error. If I replace the tag <a> with a button it works. You can view error in my sc https://i.stack.imgur.com/qDaw4.png
<div class="item userItem" *ngFor="let friend of friends">
<a class="btn-ask icon-caret-right" routerLink="/{{friend.username}}">
Ask
<fa-icon [icon]="faAngleRight"></fa-icon>
</a>
<a class="icon-star" routerLink="/{{friend.username}}">
<fa-icon [icon]="faStar"></fa-icon>
</a>
<img class="userAvatar userMood userMood-26"src="https://d15eldcwi10xcl.cloudfront.net/ee7/e9161/a3e2/43c8/b27b/c52a5703c5f9/thumb/1005453.jpg" alt="">
<a class="userItem_content" routerLink="/{{friend.username}}">
<span class="userName">{{friend.name}}</span>
<span class="userName" dir="ltr">#{{friend.username}}</span>
</a>
</div>
I have an expand/collapse using jQuery which works fine on the first level:
This is my razor file:
#model IntDashMakeRecAssgnmntsPoRespMngrVM
<div style="border:1px dotted blue;padding:5px">
<div>
<i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
</div>
<i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (#Model.Audits.Count())</span>
<div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
#foreach (var audit in Model.Audits)
{
<div>
<i id="expandRecommendations#(audit.AuditID)" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations#(audit.AuditID)" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>#audit.AuditAcnCd</b></span>
<div id="RecommendationDiv#(audit.AuditID)" style="margin-left:40px;padding:5px;border:0px dotted black">
#foreach(var finding in audit.Findings)
{
foreach(var rec in finding.Recommendations)
{
<div style="display:none;">
<a asp-controller="InternalRecommendations" asp-action="Details" asp-route-id="#rec.RecommendationId"
title="Make assignment for #audit.AuditAcnCd">
<b>#audit.AuditAcnCd/#finding.FindingCd/#rec.RecCd</b>
</a>
</div>
}
}
</div>
</div>
}
</div>
</div>
This is my jQuery:
$("#collapseMakeRecAssignments, #expandMakeRecAssignments").click(function () {
$("#MakeRecommendationAssignmentsDiv").toggle();
$("#collapseMakeRecAssignments, #expandMakeRecAssignments").toggle();
});
This is very simple to make the first level expand and collapse.
But now I need the nested 3 newly shown divs in the expanded div to each expand.
This is the jQuery I am writing to try and expand the inner divs.
// Wire up dynamic toggle
var expandNodes = $('i[id^="expandRecommendations"]');
expandNodes.each(function (index) {
console.log(this.id);
console.log(parseInt(this.id.replace(/[^0-9\.]/g, ''), 10));
expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
expandNodeDivId = "RecommendationDiv" + expandNodeId;
console.log("#" + expandNodeDivId)
$("#" + expandNodeDivId).click(function (e) {
$("#" + expandNodeDivId).toggle();
});
});
In this line:
var expandNodes = $('i[id^="expandRecommendations"]');
I am getting all of my i tags that have a font awesome class (+ sign in a circle) acting as an expand button.
Now I roll through each of the "+ in a circle" buttons in the expandNodes collection and get the unique id I assigned to each of them with razor building on the server side (
<div id="RecommendationDiv#(audit.AuditID)" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
and try to add a click event to each one to toggle itself which should show itself and the anchor divs nested inside of itself:
But it just won't won't expand.
Here are the console.logs showing I'm getting the right id's to call the element to expand:
These console.log lines show I am getting the write information to try to wire this up but I just can't get them to expand:
expandRecommendations279938 // the div I clicked on
279938 // able to parse the audit id from the id of the element I clicked on.
#RecommendationDiv279938 // concatenated the Text part of the element I want to expand with the id for the second part of the element to expands id.
Anyone see the problem here? Any help would be greatly appreciated.
UPDATE 1
Here is the HTML source produced from the server side.
<div style="border:1px dotted blue;padding:5px">
<div>
<i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
</div>
<i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (3)</span>
<div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<i id="expandRecommendations279938" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279938" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>testOIGFinding1</b></span>
<div id="RecommendationDiv279938" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4581">
<b>testOIGFinding1/4/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4582">
<b>testOIGFinding1/4/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4573">
<b>testOIGFinding1/7/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4574">
<b>testOIGFinding1/7/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4575">
<b>testOIGFinding1/7/3</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4576">
<b>testOIGFinding1/7/4</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4577">
<b>testOIGFinding1/7/5</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4578">
<b>testOIGFinding1/7/6</b>
</a>
</div>
</div>
</div>
<div>
<i id="expandRecommendations279939" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279939" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>testOCFOFinding1</b></span>
<div id="RecommendationDiv279939" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4579">
<b>testOCFOFinding1/1/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4583">
<b>testOCFOFinding1/1/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4584">
<b>testOCFOFinding1/1/3</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4585">
<b>testOCFOFinding1/1/4</b>
</a>
</div>
</div>
</div>
<div>
<i id="expandRecommendations279959" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279959" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>TestOigAllRecommendations</b></span>
<div id="RecommendationDiv279959" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4586">
<b>TestOigAllRecommendations/1/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4587">
<b>TestOigAllRecommendations/1/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4588">
<b>TestOigAllRecommendations/1/3</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4589">
<b>TestOigAllRecommendations/2/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4590">
<b>TestOigAllRecommendations/2/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4591">
<b>TestOigAllRecommendations/2/3</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4592">
<b>TestOigAllRecommendations/3/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4593">
<b>TestOigAllRecommendations/3/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4594">
<b>TestOigAllRecommendations/3/3</b>
</a>
</div>
</div>
</div>
</div>
</div>
I figured it out.
Here is the revised JavaScript:
// Wire up dynamic toggle
var expandNodes = $('i[id^="expandRecommendations"]');
expandNodes.each(function (index) {
expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
create_expand_toggle(expandNodeId);
});
function create_expand_toggle(nodeId) {
$("#" + "expandRecommendations" + nodeId).click(function (e) {
console.log("Clicking");
$("#" + "RecommendationDiv" + nodeId).toggle();
});
}
I was referencing the same div I wanted to expand in the button click. I needed to make a second reference to the i tag with the font awesome + class acting as the button to hook up the click event.
Once tip. I tried to make a var for the two node id references and use them so it would be more readable. But then the click event for all three plus signs on that level show the same div. The last div. So I have to concatenate the ids in the create_expand_toggle function.
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