I'm dynamically appending confirmation-popover html to a div when clicking a particular section. popover is working fine when i place the popover html directly in to the div. But not working when it is dynamically appended. Any idea to re-initiate the popover so that to identify a popover is attached after the page load.
Inside ts file im doing like
var test = '<button class="btn btn-sm" mwlConfirmationPopover placement="right" (confirm)="confirmClicked = true" (cancel)="cancelClicked = true">Click me!</button>';
$("#search_replace_body").html(test);
Related
I have a puppeteer implementation I'm working on to fill out a form on a website that (sadly) doesn't offer an API.
Everything goes great until I use this code to click the second button on a list of buttons:
await page.click('#calculateCharge'); // open the set values dialog
Reason being, the #calculateCharge id is used multiple times on the page, like this:
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 80.00</span></button>
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 35.00</span></button>
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 42.00</span></button>
Puppeteer clicks the first button every time because whoever wrote the HTML didn't id the buttons dynamically. The ids are all the same, so I don't know how to access the 2nd or third buttons. I also don't have access to the HTML source (not my page), so I can't fix it from the other side.
Any ideas?
I solved my issue by using xPaths instead of ids.
First, right click on the button in your browser and click inspect. In the inspector's HTML tree, right click on the highlighted HTML and copy the full xPath.
Second, set the element as a variable using the copied xPath. Note the x after the $.
let butt = await page.$x('xPath')
Last, click the button by referencing the first position of the variable's array.
await butt[0].click()
Copy/paste from my production file:
let butt = await page.$x('/html/body/div[1]/div/main/div[1]/div[2]/div[2]/div/div/div/form/div[1]/div[2]/table/tbody/tr[5]/td[2]/div/div/button');
await butt[0].click();
I've made two tables, and I added one checkbox for each.
The checkboxes aren't default checkbox, but it's an image that gets changed on click, here the code:
<button class="btn btn-lg btn-customPrint-md no-print" ng-click="checkBoxPrint2 = !checkBoxPrint2"><i class="fa fa-1x" ng-class="checkBoxPrint2 ? 'fa-square-o' : 'fa-check-square-o'"></i></button>
so onClick it changes the FontAwesome icon.
Then I have a Print Button, which prints the page following the print css rules:
<button class="btn btn-lg btn-custom-md pull-right" ng-click="vm.$window.print()"><i class="fa fa-print fa-2x"></i></button>
Now I would like to know how can I make it print ONLY the tables that have the checkbox checked (meaning with "fa-check-square-o" icon) ?
My initial idea was doing it with ng-class, so when the button is pushed, it gives a "noPrint" class to the element that hides it from print, does it make sense?
You can use ng-show or ng-hide based on your boolean properties to hide/show tables.
I'm not sure that I understand your question perfectly but a simple example would be:
$scope.showElement = false;
<div ng-show="showElement">This only shows if the variable is true</div>
In your case you could use checkBoxPrint2 as an expression for ng-show/hide, on each one of the elements that you would like to hide. You could for example only keep the headers always visible but hide the contents.
Here's more information and examples for you:
https://www.w3schools.com/angular/ng_ng-show.asp
How do I insert a new line into a data-* attribute? I have read articles/responses saying escape sequences, but none have worked.
Let's say I have a button tag and when clicked I want to pass data to a javascript method and display a dynamic popup modal.
<button id="myButton" data-toggle="modal" data-target="myModal" data-info="Some content. This content is on a new line"
Data-info will get pushed to a div in the modal. What needs to go between the two sentences to display them on separate lines. (Essentially a within the data-info attribute)
Maybe you can do an array on data-info with differents text you need.
Next create p elements inner the modal window or other you want with te information of the data-info
<button id="myButton" data-toggle="modal" data-target="myModal" data-info='{"text1":"Hello world","text2":"Bye world"}'>
Hello</button>
$( "#myButton" ).click(function() {
$("#content").append($("<p></p>").text($("#myButton").data("info").text1));
$("#content").append($("<p></p>").text($("#myButton").data("info").text2));
});
Here and example: https://jsfiddle.net/hectoruch/bfx0Lnvv/
I am trying to make a button on user profile that will allow the user to choose file and after the file has been chosen, it will be uploaded with the same button.
I want the button appearance as that defined by the code below:
<button class="btn btn-primary form-control"><span class='glyphicon glyphicon-camera'></span> Change Photo</button>
I want to change it into:
<input type='Image' onchange="this.form.submit()"/>
But with bootstrap classes and <span class='glyphicon glyphicon-camera'></span> Change Photo instead of 'submit' text on button.
How can I do it?
If you just want to change the text text inside of the button you can use JavaScripts innerHTML function to set the value, but you will have to include the span.
button = getElementsByClassName("btn btn-primary form-control")[0];
button.innerHTML="<span class='glyphicon glyphicon-camera'></span> Change Photo";
This assumes that you only have one object with that exact class on the page. If you have more you will have to add the logic to select the correct button.
If you need to do something with the file that is loaded you will need to have some sort of server side language or scripting language since this can not be done in HTML and CSS alone.
I have a button here.
<button type="button">#item.StepsToList steps to list</button>
I want the button to go to the page similar to my action below.
/ManageSpaces/id/Overview
I'm trying to do this by putting this action link inside the button.
#Html.ActionLink("Manage Yoga Space and Calendar", "Overview", new {controller = "ManageSpaces", action = "Overview", id = item.YogaSpaceId })
How to make the action link above work inside the button tag?
Buttons aren't for navigation. That's what hyperlinks are for. Putting a non-anchor <a> inside of a <button> isn't valid, either. If your focus is on the look of a button, your choices are to
use a button. Capture the click event and navigate the page using window.location, or
use a hyperlink. Add a CSS framework such as Bootstrap or Foundation, and apply one of their button styles.
Assuming you're familiar with jQuery at all, something like this works for the former point:
<button class="link-button" data-url="/some/url">I navigate somewhere</button>
<script>
$('.link-button').on('click', function(e) {
window.location = $(this).data('url');
});
</script>
For the latter point, Bootstrap and Foundation both have dedicated styles for making just about anything look like a "button":
Bootstrap
I navigate somewhere
Foundation
I navigate somewhere
It's unclear what you're trying to achieve. Do you want to simply navigate to a new page? If so you should use an Html.ActionLink by itself instead of a <button> - that's what they're for. You can style the resulting <a> element to look like a button. If you want to post a form to a new action method, you should specify that in your call to Html.BeginForm, then the button will automatically submit to that action when clicked.
#Html.ActionLink("Manage Yoga Space and Calendar", "Overview", new { controller = "ManageSpaces", action = "Overview", id = item.YogaSpaceId }, new { #class = "btn btn-default " })