I have the current code in my 'index.ejs' file. I would like to pass the item as a parameter to the deleteItem() and updateItem() functions. However, simply writing item is not working.
<% items.forEach((item) => { %>
<li class="list-group-item">
<span class="description"><%= item %></span>
<button class="btn btn-default btn-xs pull-right" id="delete-button" onclick="deleteItem()">
<i class="glyphicon glyphicon-trash"></i>
</button>
<button class="btn btn-default btn-xs pull-right" id="update-button" onclick="updateItem()">
<i class="glyphicon glyphicon-pencil"></i>
</button>
</li>
<% }) %>
To be specific, I want the individual items in the forEach loop to be passed when their buttons are clicked. I am using embedded javascript as you can see.
I have looked up answers saying one needs to make use of document.getElementById(), but I tried implementing it and it didn't work. Not sure if I did it correctly, though.
Related
I want to click on this link automatically. the href and data-id is generated randomly on website. and also have other links on website which have same class and same link name.
I want to click the first link among the other similar link on the webpage.
<a class="btn btn-success btn-mini bid-now ProjectTable-control" href="www.example.com/random" data-id="13033246">Bid Now</a>
Here are some more code for better understanding:
<td class=" ProjectTable-cell ProjectTable-priceColumn price-col"><span class="average-bid">$2400</span><div class="ProjectTable-controls">
<a class="btn btn-success btn-mini bid-now ProjectTable-control" href="/projects/view_new.php?id=13033253#placebid" data-id="13033253">
Bid Now
</a>
<a class="btn btn-primary btn-mini repost ProjectTable-control" data-ttref="PostProject_ProjectListingLoggedIn" data-type="p" data-qts="PostProject" data-id="13033253" href="https://www.example.com/buyers/repost.php?id=13033253">
Post a project like this
</a>
document.getElementsByClassName('bid-now ProjectTable-control')[0].click()
I'm getting mad about this.Long story short :
This is the show-cart.php where cart is shown.
When i click Remove button , the event I call works 1 over 10 times about.Below it's the simple code.What's wrong? Why it's not working properly?
<button type="button" class="btn btn-danger">
<span onclick="alert('smth')"; class="glyphicon glyphicon-remove""></span> Remove
</button>
This is my console
Try putting the onclick function on the button element instead of span. The following snippet shows this along with some other cleanup in your code.
<button type="button" class="btn btn-danger" onclick="alert('smth')">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
I have an web app which is working phine on the simulator,android and ios, but on windows phone one onclick event does not work. This is my HTML code:
<ul id ="triggerresolutionbg" class="table-view">
<li class="table-view-cell media">
<element>
<button class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav" id ="triggerLeft" onClick = "triggerText(this.id)" ></span>
</button>
</element>
<button class="btn btn-link btn-nav pull-right">
<span class="icon icon-right-nav" id ="triggerRight" onClick = "triggerText(this.id)"></span>
</button>
<element>
<center id ="triggerText">After I...</center>
</element>
</li>
</ul>
I´m using Ratchet,Bootstrap and JQuery.
Why the onclick methods on Windows Phone does not work ?
According to the HTML5 spec for button putting interactive content inside a button element is invalid.
Content model:
Phrasing content, but there must be no interactive content descendant.
So you should not expect event listeners to work on elements inside a button. Some browser violate the spec and permit this, but others do not. Try attaching the onclick handler to the button element itself.
Since you are using this.id, I would recommend restructuring your HTML in the process, but something like this should work.
<button class="btn btn-link btn-nav pull-left" onclick="triggerText(this.firstElementChild.id)">
<span class="icon icon-left-nav" id="triggerLeft"></span>
</button>
I am running E2E on my angular application using Protractor. I am running into a very weird problem.
I am using the Bootstrap Dropdown which has some options. I need to click on one of the options.
I referred this answer which tries to do something similar, but doesn't work for me:
Protractor - how to select heavily nested dropdown element?
My structure looks like:
<div id="fc-more-btn" class="btn-group btn-group-sm dropdown" role="group" dropdown="" is-open="ctrl.fcDropdown">
<button type="button" class="btn btn-default dropdown-toggle filetree-btn" tooltip="More Actions" tooltip-trigger="mouseenter" tooltip-placement="bottom" ng-disabled="ctrl.sd.noSelections" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu filetree-dropdown" role="menu">
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewFile()">
New File
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewDir()">
New Folder
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections" ng-click="ctrl.copyFiles()">
Copy
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.clipboardEmpty||ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.pasteFiles()" disabled="disabled">
Paste
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||ctrl.sd.multipleSelections" ng-click="ctrl.renameFile()">
Rename
</a>
</li>
</ul>
</div>
In my test, I am trying to click on the Rename link.
The code I have written is:
element(by.css('.dropdown-toggle')).click().then(function(){
//click on rename
});
On running the test, there is a small flicker over the dropdown toggle button, and it seems that the button is clicked. However, the dropdown that should be shown is not shown.
As a result of this, I am not able to simulate a click to rename. Am I doing something wrong?
Try selecting by cssContainingText, very helpful with dropdowns and nested elements!
element(by.cssContainingText('option', 'Rename')).click();
I am trying to use bootstrap tooltips - but currently I cannot get them to display. I've followed all the instructions on the Bootstrap Docs guide, but they still aren't working. Is there something I might be missing?
HTML:
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="Refresh inbox"><i class="fa fa-refresh"></i> Refresh</button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as read"><i class="fa fa-eye"></i> </button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as important"><i class="fa fa-exclamation"></i> </button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Move to trash"><i class="fa fa-trash-o"></i> </button>
JS:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
And a code pen can be found here:
http://codepen.io/anon/pen/LpzPxR
My initial guess was that something was wrong with the CSS but I can't seem to get it to work in the pen either.
EDIT: I've fixed the issue in the codepen but the actual template is still displaying incorrectly - http://i62.tinypic.com/2ik2u6s.jpg
You're almost there: you are just missing jquery, before bootstrap.js.
From bootstrap documentation:
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files)
See forked codepen
NB: I also added font-awesome.css as you have icons from that latter library.
Edit: from this screenshot posted in comment and the conversation, it appeared that OP had also jQuery UI Tooltip, which is conflicting with bootstrap tooltips.