When the file input changes and receives a value, i want to set that value to a tr.file_name. After that i want to clone that TR and paste it to the
Cloning works, but for multiple files it is not working. Anyone that can help me?
<tr class="file_row">
<td class="file_title"></td>
<td class="text-center">
<a class='btn btn-info btn-xs' href="#">
<span class="glyphicon glyphicon-edit"></span> Edit
</a>
<a href="#" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-remove"></span> Del
</a>
</td>
<td>
<div class="fileUpload btn btn-primary btn-xs">
<span><b>+</b> Upload</span>
<input type="file" class="upload" />
</div>
</td>
</tr>
Javascript:
$(document).ready(function(){
var filename
$('.file_row').change(function(){
file();
});
file();
function file(){
var empty = true;
var filename;
$('.file_row').each(function(){
filename = $(this).find('.upload').val();
$(this).find('.file_title').text(filename);
if(filename != ''){
empty = false;
}
});
if(empty == false){
var row = $('.file_row:first-child').clone();
$(row).find('.upload').val('');
$(row).appendTo('table');
}
}
});
I've also made a fiddle.
Change your event binding from this:
$('.file_row').change(function(){
file();
});
To this:
$('table').on('change','.file_row', function(){
file();
});
As the method change only bind to events that are already on the page when you invoke it. Delegating the event to a common parent works when the element is added dynamically.
You forget to clean the file_title in the cloned tr
$(row).find('.file_title').text('');
updated jsfiddle: http://jsfiddle.net/a23ez9eg/4/
Related
While building a table, I'm binding onClick handler to td element:
<td data-person-id={person.id} onClick={this.removePerson}>
<button type="button" className="btn btn-default btn-default">
<span className="glyphicon glyphicon-remove" aria-hidden="true">Remove</span>
</button>
</td>
But when an event is handled, it points to button or span elements but not td one so it means I can't just get needed data-person-id attribute. How can I fix it?
Full code https://jsfiddle.net/osqbvuub/1/
Thank you.
<td>
<button
type="button"
className="btn btn-default btn-default"
onClick={this.removePerson.bind(this, person.id)}>
<span className="glyphicon glyphicon-remove" aria-hidden="true">Remove</span>
</button>
</td>
Let your button element handle onClick (otherwise you might have weird behavior like clicking outside of the button but inside of td triggering an event) and bind the id to the context.
Then, later on your removePerson function access id directly:
...
removePerson(id) {
// do stuff
}
...
I'm making a table.
I've made my rows editable with: ng-click="todo.editing = !todo.editing"
index.html
<tr ng-repeat="todo in todos>
<td>
<div ng-hide="todo.editing">{{ todo.id }} </div>
<div ng-show="todo.editing"><input type="id" ng-model="todo.id" /></div>
</td>
<td>
<div ng-hide="todo.editing">{{ todo.text }}</div>
<div ng-show="todo.editing"><input type="text" ng-model="todo.text" /></div>
</td>
</tr>
<button class="btn btn-warning btn-sm ng-scope" ng-click="todo.editing = !todo.editing"><span class="glyphicon glyphicon-pencil"></span></button>
I've made a button to add new rows to the table:
index.html
<button type="button" class="btn btn-default btn-block " ng-click="addRow($storage.todos)">New record</button>
script.js
$scope.addRow = function (arr) {
console.log(arr);
arr.push({'id':$scope.id, 'text': $scope.text});
};
Now I want to expand my addRow() function so I can add a new row and at the same time position myself at that row, and also put me in edit mode.
The problem with position is that I am using pagination. Let's say I am at page one in pagination and the newly row comes at page four. I want to automatically get there.
Can somebody give me a hint? Thanks for your time.
Just make editing property value true during pushing.
Like this
arr.push({'id':$scope.id, 'text': $scope.text,editing:true});
I created a fiddle:
https://jsfiddle.net/0t1trq6m/
addRow() method now looks like:
$scope.addRow = function () {
console.log("test");
var e = new Entry();
e.id = $scope.todos.length;
e.text = $scope.content;
$scope.todos.push(e);
}
I m adding a row in a table via jquery. Every row has some javascript associated with it.
When i add a new row using jquery, the javasccript works on previous rows, but not on newly added row.
Do i need to load the same js again ?? if yes, how?
js works on already html row, but not on row i added
<table>
<tr id="hello12">
<div class="formField" style="float:right" >
<span class="btn btn-success fileinput-button" >
<i class="glyphicon glyphicon-plus"></i>
<span>Add Attachments...</span>
<input id="fileupload" type="file" name="attachment" multiple>
</span>
</div>
</tr>
</tr>
<tr class="row">
<td>
<button type="button" id="override_button">
<b>+</b>
</button>
</td>
</tr>
</table>
$('#fileupload').fileupload({
url: '/attachments/create',
dataType: 'json',
done: function (e, data) {
alert("done");
},
});
$('#override_button').click(function(){
alert("hello")
$('#hello12').after('\ <tr id="hello12">
<div class="formField" style="float:right" >
<span class="btn btn-success fileinput-button" >
<i class="glyphicon glyphicon-plus"></i>
<span>Add Attachments...</span>
<input id="fileupload" type="file" name="attachment" multiple>
</span>
</div>
</tr>')
});
You can use on jquery function :
$("table").on("click", "#override_button", function(event){
alert("done");
});
or if you use jquery prior to 1.7 check live function
example: http://jsfiddle.net/rad_101/99q5jwrx/1/
Case 1: You are hard-bound to reload the script(which I donot feel is a necessity at all). You can save the script in an external file, and append it to the head of your html page.
<script language="text/javascript">
function load_js()
{
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'source_file.js';
head.appendChild(script);
}
// call the function, so as to run the scripts again on the page
load_js();
</script>
Case 2: (More efficiently) Use (as Dimitris Nastos pointed out)
$(document).on("click", "table .row", function(){
//write your "ASSOCIATED JS" code here.
});
This binds a click event to the document and all child elements within it. It then matches the element identifier provided as the second argument. Works on dynamic elements too.
Case 3: (Little more efficiently) In your case, table is a static element, and would the parent element of the new row. Hence, instead of traversing the whole DOM while writing $(document).on("click","element",function(){}), use
$(table).on("click", "table .row", function(){
//write your "ASSOCIATED JS" code here.
});
So Finally after lot of struggle i got the answer,
Fileupload binds the action to the html once it is loaded, so if you add a new html to the page ,
for each element you have to bind the fileupload again.( you can also use live action to add events to button, in that case you do not need to bind again)
var dofileupload = function(){
$('#fileupload').fileupload({
url: '/attachments/create',
dataType: 'json',
done: function (e, data) {
alert("done");
},
});
}
$('#override_button').click(function(){
alert("hello")
$('#hello12').after('\ <tr id="hello12">
<div class="formField" style="float:right" >
<span class="btn btn-success fileinput-button" >
<i class="glyphicon glyphicon-plus"></i>
<span>Add Attachments...</span>
<input id="fileupload" type="file" name="attachment" multiple>
</span>
</div>
</tr>')
}).each(function () {
dofileupload
}
This solves my problem
i am using bootstrap btngroup to select one value ..how can i display that selected value ?? here is my code.
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn btn-primary btn-sm active" data-toggle="fun" data- title="Y">YES</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="X">I don't know</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="N">NO</a>
</div>
<input type="hidden" name="fun" id="fun">
</div>
and JS
$('#radioBtn a').on('click', function(){
var sel = $(this).data('title');
var tog = $(this).data('toggle');
$('#'+tog).prop('value', sel);
$('a[data-toggle="'+tog+'"]').not('[data- title="'+sel+'"]').removeClass('active').addClass('notActive');
$('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
Tidy your code - remove the spaces in your data- title attribute, in both the HTML and JS, as these are causing it to break.
Add a <div id="display"></div> in your HTML somewhere and style it how you like.
Add this line to your JS click handler: $('#display').html(sel);
Here's a demo.
If you'd prefer the result to be the text of the radio button instead of the value, use $('#display').html($(this).html()); instead in step 3.
Done.
Not sure if this is what you mean, but to get the value (or text) from a clicked button in a button group, I use for example.....
HTML
<div id="aBtnGroup" class="btn-group">
<button type="button" value="L" class="btn btn-default">Left</button>
<button type="button" value="M" class="btn btn-default">Middle</button>
<button type="button" value="R" class="btn btn-default">Right</button>
</div>
<p>
<div>Selected Val: <span id="selectedVal"></span></div>
JS
$(document).ready(function() {
// Get click event, assign button to var, and get values from that var
$('#aBtnGroup button').on('click', function() {
var thisBtn = $(this);
thisBtn.addClass('active').siblings().removeClass('active');
var btnText = thisBtn.text();
var btnValue = thisBtn.val();
console.log(btnText + ' - ' + btnValue);
$('#selectedVal').text(btnValue);
});
// You can use this to set default value upon document load
// It will fire above click event which will do the updates for you
$('#aBtnGroup button[value="M"]').click();
});
CONSOLE OUTPUT
Left - L
Middle - M
Right - R
Hope this helps
Plunker here
I'm beginning with jQuery and using it with twig/Symfony 2.
I have a little problem : when I use this in a loop :
<a href="#" id="dialog_link"><button type="button" id="button_id" id-uservalue="{{user.id}}" class="btn btn-danger btn-xs">
Delete
</button></a>
Only the 1st Button works, the other just dont. I checked the value of {{user.id}} it changes.
This is the jQuery code :
click : function() {
var id_user = $('#button_id').attr('id-uservalue');
Thanks a lot, internet friends !
Since id is unique, you need to use class instead:
<a href="#" id="dialog_link"><button type="button" class="button_id" id-uservalue="{{user.id}}" class="btn btn-danger btn-xs">
then you can use:
click : function() {
var id_user = $(this).attr('id-uservalue');