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/
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 have a text box and a button, i'm trying to figure some messaging functionality using a jQuery tutorial but having trouble finding a good direction. i want the input from the text box to appear in a DIV underneath the DIV containing "Sent messages appear here". testing using www.htmledit.squarefree.com to test the code out below and using F12 (dev mode) i can see the HTML tree
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<div>
<p>
<input type = "text"
id = "textfield" />
<button type ="button" id="btn">Add Message </button>
</p>
<Script>
$( "#btn" ).click(function() {
var message = $.trim($("#textfield").val())
$("#sent").append(message);
$("#sent").append("<br />");
});
</Script>
</div>
<div id="sent" style="font-style: italic">
<div>Sent messages appear here.</div>
</div>
The appended message if i type "U" in the textfield output fine on the bottom screen BUT the html tree does not have DIV tags. the following methods seem helpful but the references about them are a bit confusing. .html(), .text(), .append(), and $("html") functions
the tree should look like this in the element console.
I think that you append the text. The message doesn't wrap with 'div tag.
so to do this, It's very easy.
$("#sent").append('<div>' + message + '</div>');
$("#sent").append("<br />");
append function. It's append the element into the target.
you should add the html tag to append the message
html function. It's to get the children html element of the target.
text function. It's to get the all text for the target.
if you call text function, you only get the string without any html element.
It's a difference with html.
Html is get children html element.
I come across two following code snippets :
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
<p id="demo">Click the button to change the layout of this paragraph</p>
<button onclick="myFunction()">Click Me!</button>
<h1>My First JavaScript</h1>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button>
<p id="demo"></p>
I am not able to understand why the different type="button" attribute has been added in second code snippet?
What's the difference between two buttons?
In your examples the addition of the type="button" makes no difference whatsoever (remove it and you'll see).
Typically you would specify the type of your button if it is being used in a form, as the default type of <button> is submit, and clicking it would cause a <form> to be submitted, and typically either reload the current page or load a new page.
By specifying the type as button instead of the default submit, you prevent that behavior.
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
It has so many Attributes and type is one of them and this type has 3 values:
button (Normal button)
reset (to handle reset action, specially for form)
submit (to handle form submit)
To know other properties you can read:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
https://www.w3schools.com/tags/tag_button.asp
The attribute type decide the style of <Button>. It's default value is button in Internet Explorer.However, in other browser,it's default value is submit even in standard of W3C.
So you need to define the type of button always.
There are three types of buttons:
submit — Submits the current form data. (This is default.)
reset — Resets data in the current form.
button — Just a button. Its effects must be controlled by something else (that is, with JavaScript).
Button attribute is not that big deal, because it changes nothing in your code.
The only difference in your two code versions are writing the whole code after the "onclick" attribute (code2) and writing the function name after the "onlick" attribute (code1).
You can read about the button attributes and differences between input and button with the same attributes on this site http://html.com/attributes/button-type/
I hope it will help you a lot.
Writing <button type="button"> defines the button as a clickable button.
There is no big difference with <button>, but it is more safe to put a type attribute to the button element because some browsers may use different default types for the <button> element, which could lead to bugs.
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 currently have a button that is functioning a little strange. Whenever you click right in the middle of the button, it works and carries on the requested action. However, if you click anywhere near the outside border of the button, then the action doesn't get carried out.
Here is the current code:
#if(mode == "Edit"){
<div class="Delete"><button class="btn btn-danger">
#Html.ActionLink("Delete Profile", "Delete", "GPS", new { Id = Model.provider.Company.Id.Value, oem = Model.provider.Id},
new { onclick = "return confirm('Are you sure you want to delete this provider?
All GPS Devices attributed to this provider will be removed as well.')" })</button></div>
}
If you check the resulting HTML of your code you will see the following structure:
<div>
<button>
<a></a>
</button>
</div>
Your event onclick is only attached to the <a> tag, so if you click in any place inside the <button> but outside the <a>, the action won't be fired.
By default <a> tags are inline, it means (among other things) its size is defined by its content so it won't fullfill the <button>, you can see this visually using the inspect tools from any brosers (like Chrome Developer Tools).
You can fix this using CSS to change the dimensions of your <a> tag. Try with display:block, width and height.
The final answer will depend on your other style rules.