I am trying to create a dynamic table with each row containing two date fields. I am using Jquery datepicker. For some reason only the first row is showing in the date picker calendar. Other dynamically created fields are not showing the calendar. I should mention that the first row is by default in place when this page is loaded. Only from the second line it's dynamically created. All solutions say I should reinitialize the .datepicker(). I did and it's not working. I tried changing names and Ids still no solution. Is there something I am missing here. Below is the code used for this purpose.
Yes I know there are several questions related to this here in this site. But some how I couldn't find a solution to this as they aren't working for me.
Javascript:
$("#addurl").click(function(){
var idValue = "input[id='breachCount']";
var counter = $(idValue).val();
var trValue = $("#rowPH"+counter).html();
var countNew = parseInt(counter)+1;
$(idValue).val(countNew);
var newFile = "<tr id='rowPH"+countNew+"'>"+trValue+"</tr>";
$(newFile).insertBefore("#addLink");
var nameTemp, actNm;
var dcounter=0;
$('#rowPH'+countNew+' input').each(function(){
nameTemp = $(this).attr("name");
if(nameTemp){
actNm = nameTemp.substring(nameTemp.indexOf("."));
$(this).attr("name","breachList["+countNew+"]"+actNm+countNew);
}
});
$('.datepicker').each(function(i) {
this.id = 'datepicker' + i;
}).datepicker();
});
Html:
<table>.....
<tr id="rowPH0">
<td>
<input type="checkbox" checked="checked">
</td>
<td>
<input class="text_box_2 div_center" type="text" value="" name="breachList[0].breachText">
</td>
<td>
<input id="datepicker0" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[0].activationDt"><img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
<input id="datepicker1" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[0].deactivationDt">
<input type="checkbox" name="breachList[0].deactiveNa" checked="checked">
</td>
<td>
<input class="text_box_2" type="text" value="" name="breachList[0].note">
</td>
</tr>
</tbody>
<tbody>
<tr id="rowPH1">
<td>
<input type="checkbox" checked="checked">
</td>
<td>
<input class="text_box_2 div_center" type="text" value="" name="breachList[1].breachText1">
</td>
<td>
<input id="datepicker2" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].activationDt1">
<img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
<input id="datepicker3" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].deactivationDt1">
<input type="checkbox" name="breachList[1].deactiveNa1" checked="checked">
</td>
<td>
</tr>
<tr id="addLink">
<td colspan="5" >+ Add another row
<input type="hidden" id="breachCount" value="${fn:length(auditStandardBreachsForm.breachList)-1}"/>
</td></tr>
...</table>
Not necessary to assign unique ids to each field. Datepicker can identify each uniquely. Try putting following code in your js.
$('.datepicker').each(function(){
$(this).datepicker();
});
I've used it for multiple fields.
*Update*
I read your js code and it's messed up. All you want to do is (from what you've stated) is when user clicks on Add Another Link , you want to add a new row in table and want them to be able to work with jQuery datepicker. Right?
The reason above code is not working is, in this case, text fields are being added dynamically . While datepciker gets initialized on onDocumentReady. So datepicker can not attach itself to these newly created form fields. A solution is to attach datepicker while creating new fields itself.
Here's a working model I prepared for what you want to achieve. See demo on http://jsfiddle.net/phazorrise/bRE6q/
here is my updated code
Javascript
Modified at the bottom of the above javascript
var nameTemp, actNm;
$('#rowPH'+countNew+' input').each(function(){
nameTemp = $(this).attr("name");
if(nameTemp){
actNm = nameTemp.substring(nameTemp.indexOf("."));
$(this).attr("name","breachList["+countNew+"]"+actNm);
$(this).attr("id","breachList["+countNew+"]"+actNm+countNew); //added
}
});
$('.datepicker').each(function(i) {
$(this).removeClass('hasDatepicker').datepicker(); //changed ref: phazor comment
});
Related
I'm getting info from a json file and creating a table with the results. what i need to do is to change the class of one of the elements on a click.
this is part of my code:
$scope.firstAvailables = function(){
$http.get('/app/json/products.json')
.then(function(data){
$scope.listOfProducts = data.data.products;
}
The html view:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Nickname</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in listOfProducts">
<th><a class="one">{{x.name}}</th>
<th><input type="text" class="form" id="theBox" value="1" style="width:40%"></th>
<th><button type="button" class="btn btn-primary" ng-click="toChange(x)">Change</button></th>
</tr>
</tbody>
</table>
What i want to do is to change the class from the input on different rows (not all, just a few). For that, i'm using the next piece of code that lives inside of toChange(x) (which lives on the button):
$scope.toChange = function(val){
//to get the specific value
var specific = val;
//to create a new name for the class
var y = 'some-' + specific.name;
//with JQuery remove the previous class and add the new one
$('#theBox').removeClass('algo').addClass(y);
//With this i receive on the console all the input html tag
console.log(document.getElementById('theBox'));
}
To here everything it's ok if i click on one row. But, if then i click on another, the class from the selected row, sum the name previous name and the new instead of replace:
console log from very first clicked element
<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">
console for the second element
<input type="text" class="algo-non algo-mollit" id="theBox" value="1" style="width:40%">
console for the next element
<input type="text" class="algo-non algo-mollit algo-liquit" id="theBox" value="1" style="width:40%">
What can i do to prevent the sum of the previous class names? The idea is to have on every click:
first click:
<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">
second click:
<input type="text" class="algo-mollit" id="theBox" value="1" style="width:40%">
third click:
<input type="text" class="algo-liquit" id="theBox" value="1" style="width:40%">
I'm using AngularJs, Javascript and Jquery.
Thanx in advance.
The problem is that $('#theBox') is selecting all of the inputs.
First click: the class algo-non is added to all of the inputs.
Second click: the class algo-mollit is added to all of the inputs.
Third click: the class algo-liquit is added to all of the inputs.
Use id="theBox-{{ $index + 1 }}" or id="theBox-{{ item.name }}", then select the inputs individually.
// Guaranteed to be unique
<input type="text" class="form" id="theBox-{{ $index + 1 }}" value="1" style="width:40%">
// Risk duplicates (if items have same name)
<input type="text" class="form" id="theBox-{{ x.name }}" value="1" style="width:40%">
This is the base of a table that I have.
It could have many more rows and the last number in the name attribute indicates the row number. I want get the name attribute of any of the inputs inside the last row. It does not matter which input is because then I will split the string and only keep the last number.
How can I achieve this?
Thanks!
<table id="tableNames">
<tbody>
<tr>
<td>
<input type="text" name="contact1_1"/>
<input type="text" name="contact2_1"/>
<input type="text" name="contact3_1"/>
</td>
<td>
<input type="text" name="phone1_1"/>
<input type="text" name="phone2_1"/>
<input type="text" name="phone3_1"/>
</td>
</tr>
</tbody>
</table>
:last selector with split() and pop()
console.log( $("#tableNames tbody tr:last input:last").attr("name").split("_").pop())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableNames">
<tbody>
<tr>
<td>
<input type="text" name="contact1_1"/>
<input type="text" name="contact2_1"/>
<input type="text" name="contact3_1"/>
</td>
<td>
<input type="text" name="phone1_1"/>
<input type="text" name="phone2_1"/>
<input type="text" name="phone3_1"/>
</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
alert($("#tableNames").find("tr:last").find("input").attr("name"));
})
Or a shorter version:
$(document).ready(function() {
alert($("#tableNames tr:last input").attr("name"));
})
Here is a fiddle of this getting the name of the input on the last row:
https://jsfiddle.net/L7k2w6Ls/2/
$('#tableNames tr:last input').map(function(){return $(this).attr('name');}).get();
The other answers will do exactly what you are asking. In an attempt to be more generally helpful, I want to make sure this isn't an XY problem.
It sounds like you are effectively encoding some application data in the name of your input elements. It may be worth asking if that is what you actually want to do. Often times I have data related to an element, and the best place to put that for jQuery to find is in the elements data array. Even if the server actually needs that same piece of information in the name, putting the data somewhere more easily accessible to javascript can help minimize bugs in the future and simplify your application. So I might suggest a completely different solution like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableNames">
<tbody>
<tr>
<td>
<input type="text" name="contact1" data-more="1"/>
<input type="text" name="contact2" data-more="1"/>
<input type="text" name="contact3" data-more="1"/>
</td>
<td>
<input type="text" name="phone1" data-more="1"/>
<input type="text" name="phone2" data-more="1"/>
<input type="text" name="phone3" data-more="1"/>
</td>
</tr>
</tbody>
</table>
$( function(){
$("#tableNames tr:last input").each( function(){
var input = $(this);
console.log( input.attr( 'name' ) + ' has data ' + input.data( 'more' ) );
});
} );
I have a tag system implemented into my website for three different categories. I set it up for a twitter account so I have "Keywords", "Mentions" and "Hashtags". What I need is that when a user inserts a tag in the text input for Mentions for it to prepend a "#" symbol before the text entered. The same goes for Hashtags except for the "#" symbol. I have put together a demo of what I have so far. Any help will be greatly appreciated.
JSFIDDLE
<div id="wrapper">
<table>
<tr>
<th></th>
<td id="keyword-filter">
<h5>Keywords</h5>
<input type="text" id="keywordInput">
<br>
Include:
<input type="radio" name="keywordInclude" checked="true">Any
<input type="radio" name="keywordInclude">All
<b>Keywords</b>
</td>
</tr>
<tr>
<th></th>
<td id="mention-filter">
<h5>Mentions</h5>
<input type="text" id="mentionInput">
<br>
Include:
<input type="radio" name="mentionInclude" checked="true">Any
<input type="radio" name="mentionInclude">All
<b>Mentions</b>
</td>
</tr>
<tr>
<th></th>
<td id="tag-filter">
<h5>Hashtags</h5>
<input type="text" id="hashtagInput">
<br>
Include:
<input type="radio" name="tagsInclude" checked="true">Any
<input type="radio" name="tagsInclude">All
<b>Hashtags</b>
</td>
</tr>
</table>
According to the documentation and source code of the tagsInput plugin you can use the onAddTag callback to fire whenever a tag is added. You can grab the tag element which is just created in the DOM and prepend the text with a #.
See the updated jsfiddle for a working example. You also need to check if the user didn't enter a # already.
$('#mentionInput').tagsInput({
'defaultText':'add name',
'onAddTag':function(tag) {
var span = $('#mentionInput_tagsinput .tag span').last();
if (span.text().substring(0, 1) != '#') {
span.text('#' + span.text());
}
}
});
I have a table insite form where I want to be able to duplicate a group of fields as many times as I want. And I also want to have field id, name, and label's for attributes of those new group of fields increase by 1. I've tried this so far with jQuery, and got it to at least duplicate the group of fields, but remove doesn't work. And I'm not sure how to do +1 for each of those 3 attributes. I appreciate any help I can get.
<tr>
<td>name<span class="description"></span>
</td>
<td>
<input type="text" name="type_1" id="type_11" class="regular-text" />
</td>
</tr>
<tr>
<td>pic<span class="description"></span>
</td>
<td>
<input type="file" name="logo_1" id="logo_1" />
</td>
</tr>
<div class="formRowRepeatingSection">Add New
</div>
<div class="repeatingSection"></div>
JS - Jquery
$(function(){
$('#addPro').click(function() {
$('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1'+i+'[]" id="pro_1'+i+'[] class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1'+i+'[]" id="pro_pic_1'+i+'[]" /></td></tr>');
});
});
i need repate in '#repeatingSection' this code html when click '#addPro'
edit:-
$(function(){
$('#addPro').click(function() {
$('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1'+i+'[]" id="pro_1'+i+'[]" class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1'+i+'[]" id="pro_pic_1'+i+'[]" /></td></tr>');
});
});
i will edit now .... but i need when click in #addPro insert new row
HTML
<table>
<tr>
<td>name<span class="description"></span>
</td>
<td>
<input type="text" name="type_1" id="type_11" class="regular-text" />
</td>
</tr>
<tr>
<td>pic<span class="description"></span>
</td>
<td>
<input type="file" name="logo_1" id="logo_1" />
</td>
</tr>
</table>
<div class="formRowRepeatingSection">Add New
</div>
<div id="repeatingSection"></div>
jQuery
$(document).ready(function () {
var i = 0;
$('#addPro').click(function () {
console.log(i);
i++;
$('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1' + i + '[]" id="pro_1' + i + '[]" class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1' + i + '[]" id="pro_pic_1' + i + '[]" /></td></tr>');
});
});
Demo here
What I changed:
replaced in html: class to ID in the <a> element and in the div to append to #repeatingSection
added " closing the ID here id="pro_1'+i+'[] class="regular-text"
added var i = 0; outside the click function and i++; inside it.
I added also opening and closing tags for <table>,maybe you have them somewhere else in the code you didn't posted. I added just to have correct html markup.
I have an HTML table
<table id="sometable">
<tr>
<td>
<table class="wTable">
<tr>
<td>
<input type="radio" name="rdGroup" val="0" />
</td>
<td>
<input type="radio" name="rdGroup" val="5" />
</td>
<td>
<input type="radio" name="rdGroup" val="10" />
</td>
</tr>
</table>
</td>
</tr>
</table>
The reason for the table within a TD is for the purpose of skinning and positioning. I'm not great when it comes to JQuery and was wondering if there was a selector technique to get access to that radio button when that cell is clicked.
For example, previously my code was set as (before skinning):
<table>
<tr>header stuff</tr>
<tr>
<td>data</td>
<td>data 2</td>
<td><input type="radio" name="rdGroup" value="0"> No Warranty </br>
<input type="radio" name="rdGroup" value="5"> 1 year Warranty </br>
<input type="radio" name="rdGroup" value="10"> 2 year Warranty </br>
</td>
<td>data 3</td>
</tr>
<tr>footer stuff</tr>
</table>
Above is the original basic table structure.
$("#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:first,#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:last").addClass("info");
The above added a class named info to the header and footer of the table (i didn't care for any of the data in them)
From there I created a td click function to process data:
$("#dnn_ctr391_Account_ctl00_ctl01_grdItems tr:not(.info) td:nth-child(7)").click(function() { //DO CODE HERE });
And within that click function I was able to access data from the other cells I needed:
var warval = 0;
warval = $(this).closest("tr").find("input[type=radio]:checked").val();
Is there a way for me to get access using the same style of coding to get access to when that cell is clicked to get the radio button value, and then leave that table to go back to the TD it is in, and then get access to the other td's using the $(this).closest("tr").find() method?
Thanks for any help you can provide.
I think you're looking for something like this:
$('table#sometable table.wTable td').click(function () {
var isChecked = $(this).children('input[type=radio]').val();
//To get 'back to the tr'
var $warval = $(this).closest("tr");
});
Ok, from what you said in the comments, I hope this is helpful:
First of all, I would advise changing the table markup to divs. This is not mandatory, but it will lead to cleaner and more manageable code. Something like this maybe:
<p>data 1</p>
<p>data 2</p>
<div>
<input type="radio" name="rdGroup" id="rdGroup_0" value="0" />
<label for="rdGroup_0">No Warranty</label>
</div>
<div>
<input type="radio" name="rdGroup" id="rdGroup_5" value="5" />
<label for="rdGroup_5">1 year Warranty</label>
</div>
<div>
<input type="radio" name="rdGroup" id="rdGroup_10" value="10" />
<label for="rdGroup_10">2 year Warranty</label>
</div>
<p>data 3</p>
<div class="footer">Footer</div>
Your jQuery hook could be as simple as this:
$(function() {
$('input[type=radio]').change(function() {
// do whatever needs to be done here when the radio button value changes
console.log("value '"+this.value+"' was selected for the warranty option");
});
});
If you need to set the corresponding value when loading the form with the data stored in your DB, you could do it with this function (if you've set your radio box IDs as shown above):
var setWarrantyOption = function(value) {
$('#rdGroup_' + value).click();
};
You can fiddle around with the code here: http://jsfiddle.net/gruese/fsj2v/
Please tell me if that helps or if I've maybe misunderstood your problem.