I am working on a React App in which it requires working with tables and adding rows dynamically. I used this answer to achieve that: https://stackoverflow.com/a/54455262/13037132. I am trying to label an <input type="file" id={id} /> for styling the whole
in every cell of the table. The id={id} attribute in the input element is for dynamically adding a row when an Add Row button is clicked.
I found some solution for styling this input, but it requires labelling it, needs an id attribute to link to. How can I do that, since the id is already occupied? Is there a way to link this input to a label without using the id but something else? If you want any additional data on this, please let me know.
And I am also looking for a way to add columns too just like I am adding rows using the above-stated answer. Can anyone help?
Use a class instead of id, since multiple id with same value does not help, use a class and access that input by $(this):
$('.class_name').click(function(){
$(this) // this will acquire the clicked/target input
})
Related
I am trying to click on elements on a page. While I was looking through the code for a good way to identify the element, I noticed that each different element had a different data-userassetid. How would I access this element?
<div class="item-card-container" data-userassetid="142946016">
Using document.querySelector and querying the elements by the attribute. The attribute query is the attribute name and value between brackets.
In that case:
const userAssetElement = document.querySelector('[data-userassetid="142946016"]');
If you want to know more: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
This is my problem: i have this html
as you can see there are two <div class="sc-fjhmcy dbJOiq flight-information"></div> and, i want to get the element using the class attribute, but only with the flight-information value, because
I think the part that is written as nonsense code ("sc-fjhmcy dbJOiq...) change daily
I have already tried with this xmlpath, $x('//div[contains(#class, "flight-information)"'], but its not working,
What could I do?...
I checked your code and I think that there is no big issue with this.
You need to use one class name to get the element, not two names, as below.
$(".sc-fjhmcy")
Then, this will be run correctly.
Best regards
I want to track clicks on the following button/link with Google Tag Manager. I created a trigger in Google Tag Manager that triggers when the element_id = 100. This works fine, except that when I click exactly on the text, it doesn't do anything, the link looks like a button, with the text in the middle of it. I can't change anything to the html or css, otherwise I can think of multiple things, so I need to find a solution without changing the html. Also, the 'myclass' class and the 'label' class get used in other elements.
<a class="myclass" id="100" href="http://www.url.com">
<span class="label">Text</span>
</a>
Anyone an idea?
Thanks a lot,
The following workaround worked:
Create trigger when element text contains "Text". This will trigger events on the button and the label on the button, of all buttons with "Text" as label.
Create tag for that trigger that checks with simple javascript if either the id of the current element = 100, which will happen when you click the button but not the label, or that the id of the parent = 100, which happens when you click the label. You can get the element that triggered the tag using the built-in variable "Click Element". Which you need to access the parent element.
Technically, you shouldn't have a CSS ID that starts with (or is) a number, so not sure if your code example is accurate or not. Whatever the case, you're probably better off using "matches CSS selector" so that you don't need to use any custom JS.
If indeed your HTML uses id="100", then the above will work. If it's anything else that doesn't start with a number, then you can use
#whatever > span
I want dynamically add text-box in html page when user is press a button. and after that i want to get the respective field value or all field value.
I tried doing ng-repeat but it will not work. can anyone tell me how i will achieve this.
I would indeed use ng-repeat, and just push a new object onto the array. Maybe something like this?
<button ng-click="textFields.push("")">Add</button>
<textarea ng-repeat="val in textFields" ng-model="val"></textarea>
Well there are a few things you could try. One of them is loading a hidden div when clicked on the button. The hidden div contains the text box.
Like this :
$(document).ready(function(){
$("#hiddendiv").hide();
$("#button").click(function(){
$("#zmedia").show();
}};
And in your html form you just add a div that contains a textbox and the id of the dive should be "hiddendiv". The downside is that once the hidden div is loaded, it cant be removed. There are other scripts that are a lot more sophisticated, check these links out:
https://github.com/wam/jquery-addable
http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/
I would like to create a form that changes dynamically.
I have a form for creating a project (with fields such as: project_name, project_description...) and the project can have any amount (bigger or equal to 0) of categories.
What i want is to display a button which would give the user the option to add another category field. In addition I would also like the option for category fields to be "deleteable" by the user (if he changes his mind or made a mistake). What would be the best way to do so. I would like an Ajax type solution.
My solution so far is to leave an empty div beneath the last category and onclick of the button to load another field into that div with yet another div which will be used for the next div. Not to happy with this solution since i now have to count how many fields I have and give each div it's own id which complicates the matter even more.
Is there a more simple solution to this?
If you are trying to add fields dynamically with a button, you can easily do so by doing something like the following:
HTML:
<form>
<p>
<label>Name:</label> <input type="text">
<label>Age:</label> <input type="text">
<span class="remove">Remove</span>
</p>
<p>
<span class="add">Add fields</span>
</p>
</form>
JS:
$(".add").click(function() {
$("form > p:first-child").clone(true).insertBefore("form > p:last-child");
return false;
});
$(".remove").click(function() {
$(this).parent().remove();
});
Demo: http://jsfiddle.net/UeSsu/1/
I started to write a form generator is based on a definition in JSON a while back. It works but could use some enhancements. It's written using Prototype.js but it wouldn't be a huge effort to port it over to jQuery.
You're welcome to steal the code. (just view source)
I've done something similar. To delete fields I didn't really removed fields. I just hidden them with a display:none and had a hidden input "delete" that I trigger to true. Then, the page receiving the result knows which field is to be deleted in the database.
They are not deleted before the form is submitted. It's like a "two pass" conception. But if you don't really need a true ajax, it works fine. Otherwise you need your JS remove function to call the server and tell to delete the field with its id. A little bit more complex to code.