I want to add DOM object into my html, but after adding they are being removed immediately.
Could someone please help to debug below presented code?
function addVertex () {
var iTr = document.createElement('tr');
var jTr = document.createElement('tr');
iTr.id = 'block';
iTr.className = 'block';
jTr.className = 'block_2';
iTr.appendChild(jTr);
document.getElementById('vertex_table').appendChild(iTr);
}
<form>
<table>
<tbody id="vertex_table">
<tr>
<td>Vertex start</td>
<td>Vertex end</td>
<td>Weight</td>
</tr>
</tbody>
</table>
<input type="submit" value="Add Vertex" onclick="addVertex()"/>
</form>
The problem is that the form is submitted when you click button with type="submit". This causes page reload. I assume that in your case you don't actually need to send form. So change button type to button and it will work:
<input type="button" value="Add Vertex" onclick="addVertex()" />
Related
With the code below, I am trying to access a particular column "quantity" from a row in a table. What is happening is one of the rows is selected by default when page loads while the rest of the rows can be selected when user chooses. I created a click event handler to handle manual selection.
When accessing the column with a class name, it returns nothing. I need to assign this value to an input box in the same form. I would attach the image of the row
Table Markup:
<tr valign="top" class="row6">
<td>
{if $tpl_order_details[lineitems].quantity > 1}
{if $radio_flag == "false"}
<input type="radio" name="line_item" class="radio_class" id="line_item" value="{$tpl_order_details[lineitems].mSku}" checked onclick="handleClick(this);"/>
{assign var=radio_flag value='true'}
{else}
<input type="radio" name="line_item" class="radio_class" id="line_item" value="{$tpl_order_details[lineitems].mSku}" onclick="handleClick(this);" />
{/if}
{/if}
</td>
<td>
{$tpl_order_details[lineitems].sku}
</td>
<td>
</td>
<td>{$tpl_order_details[lineitems].item_description}</td>
<td class="quantity_class" >{$tpl_order_details[lineitems].quantity}</td>
<td>{$tpl_order_details[lineitems].item_status}</td>
Markup with the Input field outside the loop:
<table>
<tr>
<td><label for="new_quantity">Enter New Quantity</label></td>
<td><input type="number" id="split_quantity" name="split_quantity"
min="1" max="6"></td>
<td><button type="submit" value="Save"
name="submit_action">Submit</button></td>
<td><button type="submit" value="Cancel"
name="submit_action">Cancel</button></td>
</tr>
</table>
JavaScript:
// This is to handle the radio button selected by default on page load.
$( document ).ready(function() {
var firstRadioValue = 0;
firstRadioValue = $("input[name='line_item']:checked").val();
$('input[name="split_quantity"]').attr('max', firstRadioValue);
var quantity = $(".radio_class").parent().find(".quantity_class").val();
alert(quantity);
});
// This is to handle the radio button that user actually chooses.
var currentRadioValue = 0;
function handleClick(line_item) {
alert('New value: ' + line_item.value);
currentRadioValue = line_item.value;
$('input[name="split_quantity"]').attr('max', currentRadioValue);
}
You're not going far enough up the tree to find the class. You have:
var quantity = $(".radio_class").parent().find(".quantity_class").val();
which gets you to the parent <td> The element you're looking for is a sibling of this:
<td class="quantity_class" >...
What you want to do is go one element higher (the table row), then find the class you're looking for from there, so use closest(). Note that .quantity_class doesn't have a value so you have to get the text in the table cell:
var quantity = $(".radio_class").closest('tr').find(".quantity_class").text();
In addition, I do not see any markup with the max attribute or any markup with the name of split_quantity.
EDIT - based on a conversation with the user it was found that there needed to be a number of changes. First, the table holding split_quantity needed to be identified so it could be targeted in the grander markup:
<table id="split_quantity_id">
<tr>
<td><label for="new_quantity">Enter New Quantity</label></td>
<td><input type="number" id="split_quantity" name="split_quantity" min="1" max="6"></td>
<td><button type="submit" value="Save" name="submit_action">Submit</button></td>
<td><button type="submit" value="Cancel" name="submit_action">Cancel</button></td>
</tr>
</table>
Then we got rid of the onclick="handleClick(this) inline JavaScript in favor of letting jQuery handle the click event. Finally we refactored the functions:
$(function() {
var firstRadioValue = 0;
firstRadioValue = $("input[name='line_item']:checked").closest('tr').find('.quantity_class').text();
$('input[name="split_quantity"]').attr('max', firstRadioValue);
var quantity = $(".radio_class").closest('tr').find(".quantity_class").text();
console.log(quantity);
$('table').delegate('.line_item', 'click', function(){
currentRadioValue = $(this).closest('tr').find('.quantity_class').text();
console.log(currentRadioValue);
$('#split_quantity_id').find('[name="split_quantity"]').attr('max', currentRadioValue);
});
});
NOTE: It was also discovered that the OP is using Smarty 2 which is an older version of Smarty using an older version of jQuery, so .delegate() is used instead of on().
I am using a button in a table and my button is a single element but on top, I am changing the row of the table based on some condition, so when my final table created is I see button in all rows, which is fine and as per the requirement.
Now I need to use a function on button click which I want to perform the same action in each row to remove the row where the button is placed. when I am using a single function it's working only for first time and not after that, how can I use the same function for all buttons?
here is my code:
function AddValueinrow() {
if(anotherTeamname=='DEV'){
if(selectedValue=="dummy value1"){
row = document.getElementById("DEVFirstrow");
}
if(selectedValue=="dummy value2"){
row = document.getElementById("DEVSecondrow");
}
var w = row.insertCell(6);
w.innerHTML = '<button onclick="Releaseentry()" type="button" id="show" class="btn btn-primary">Release</button>';
}
function Releaseentry() {
if(anotherTeamname=='DEV'){
if(selectedValue=="dummy value1"){
$('#DEVmyTable > tr').eq(0).children('td').remove();
}
if(selectedValue=="dummy value 2"){
$('#DEVmyTable > tr').eq(1).children('td').remove();
}
}
}
Find the parent row by using .closest(), and remove it.
Note: Instead of using inline onclick calls, use event delegation to attach a single event handler to the container, and react to button clicks.
$('#table').on('click', 'button', function() {
$(this)
.closest('tr')
.children('td:not(:last-child)')
.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<td>td11</td><td>td12</td>
<td>
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
<tr>
<td>td21</td><td>td22</td>
<td>
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
<tr>
<td>td31</td><td>td32</td>
<td class="button">
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
</tbody>
</table>
The table footer is used to add a new record to the table. After adding by clicking button, the new record is actually added to the table body but up to a second, after that the entire page is reloaded and the inserted record disappears.
Table is created correctly from the prepared data array.
Deleting records works fine.
Where can I have a problem? I don't want to have page reloads.
Table:
<table class="table">
<thead>
<tr>
<th>Nazwa tchnologii</th>
<th>Poziom zaawansowania</th>
<th>-</th>
</tr>
</thead>
<tfoot>
<tr>
<!--Text for new record-->
<th><input type="text" ng-model="nazwaTechnologii" class="form-control"></th>
<!--Button to add-->
<th><button ng-click="dodaj()" class="btn btn-success btn-sm">Dodaj!</button></th>
</tr>
</tfoot>
<tbody id="cialoTabeli">
<tr ng-repeat="technologia in technologie track by technologia.id" id="{{technologia.id}}">
<td>{{technologia.nazwa}}</td>
<!--Button to remove-->
<td><input type="button" ng-click="usunTechnologie(technologia.id)" class="btn btn-danger btn-sm">UsuĊ!</input></td>
</tr>
</tbody>
</table>
Piece of code JavaScript/AngularJS:
var indeks = 5;
$scope.dodaj = function () {
$scope.technologie.push({ 'id': ++indeks, 'nazwa': $scope.nazwaTechnologii});
$scope.nazwaTechnologii='';
};
$scope.technologie = [ //prepared values
{"id":1,"nazwa":"C++"},
{"id":2,"nazwa":"java"},
{"id":3,"nazwa":"Python"},
{"id":4,"nazwa":"C"}
];
To quote MDN :
type
The type of the button. Possible values are: submit: The button
submits the form data to the server. This is the default if the
attribute is not specified, or if the attribute is dynamically
changed to an empty or invalid value.
Means you need to set the button type to button in order to prevent the page from being "submitted" :
<button type="button" ng-click="dodaj()" class="btn btn-success btn-sm">Dodaj!</button>
I have a button that pops up an Angular UI Bootstrap popover, using a template.
You can view it in this pen
The popover template is a form with a table containing a series of text fields with ng-models:
<script type="text/ng-template" id="filterPopoverTemplate.html">
<div class="filters">
<form>
<table>
<tbody>
<tr>
<td><input type="text" size="5" ng-model="filterHsCodeRestricted"></td>
<td>HS Code Restricted</td>
</tr>
<tr>
<td><input type="text" size="5" ng-model="filterHsCode10"></td>
<td>HS Code 10</td>
</tr>
<tr>
<td><input type="text" size="5" ng-model="filterCOD"></td>
<td>COD</td>
</tr>
</tbody>
</table>
<div class="filter-buttons">
<button tabindex="0" class="btn btn-default btn-xs" ng-click="applyFilters()">Apply</button>
<button class="btn btn-default btn-xs" ng-click="resetFilters()">Reset</button>
</div>
</form>
</div>
</script>
I have a "reset" button which calls a function that I want to reset all the ng-models to empty strings:
$scope.resetFilters = function () {
$scope.filterHsCodeRestricted = '';
$scope.filterHsCode10 = '';
$scope.filterCOD = '';
};
However, if I type something into the field and click "reset", the model is not being set to the empty string. I've done this elsewhere and it works, just not inside a popover template, so I assume it has something to do with the fields being in a popover ng-template. How do I "access" those?
The problem is that you're using the model without the DotRule or controller-as-syntax.
The whole problem was already explained by Pankaj Parkar in this question.
So, to make it work, you have to create a new object, ex:
$scope.model = {};
Then, build your ng-model's like this:
ng-model="model.filterCOD"
And so on..
The problem with your code is :
You need to define another ng-controller inside your filterPopoverTemplate.html
app.controller('poptemp', function($scope) {
$scope.resetFilters = function() {
$scope.filterHsCodeRestricted = '';
$scope.filterHsCode10 = '';
$scope.filterCOD = '';
$scope.filterPOE = '';
$scope.filterECCN = '';
$scope.filterItemCondition = '';
};
});
Check the corrected code here
I'm using JavaScript to add drop down in the jsp by clicking a button but somehow its not working. Can someone please help me. I need to use html:select tag.
<script language="JavaScript" type="text/javascript">
function addRow() {
var mytbody = document.getElementById('mytbody');
var row = document.createElement('tr');
var cell1 = document.createElement('td');
cell1value='';
cell1value+='<html:select property="test1" styleId="test1"> <html:option value="code1">test 1</html:option> </html:select>';
cell1.innerHTML = cell1value;
row.appendChild(cell1);
mytbody.appendChild(row);
}
</script>
html codes:
<table id="mytable">
<tbody id="mytbody">
<tr>
<td>test1</td>
</tr>
</tbody>
</table>
<input type="button" onclick="addRow()" value="test"/>
</form>
</body>
</html>
Thanks for your help
I made a jsfiddle to check it out... I think you might just need to have this javascript in the head tag.
Use F12 developer tools and try to debug the issue when you click the button. You might find that addRow() is undefined.
I also changed the code a little bit due to the fact that I am not versed in JSP - sorry! Is that what the
"<html:select..."
string was? I changed it to straight up html.
http://jsfiddle.net/e7z1efgr/
function addRow() {
var mytbody = document.getElementById('mytbody');
var row = document.createElement('tr');
var cell1 = document.createElement('td');
var cell1value = '';
cell1value += '<select class="text1"><option value="code1">test 1</option></select>';
cell1.innerHTML = cell1value;
row.appendChild(cell1);
mytbody.appendChild(row);
}
<table id="mytable">
<tbody id="mytbody">
<tr>
<td>test1</td>
</tr>
</tbody>
</table>
<input type="button" onclick="addRow()" value="test" />
</form>
</body>
</html>
Your problem is the strange HTML you are inserting:
'<html:select property="test1" styleId="test1"> <html:option value="code1">test 1</html:option> </html:select>'
should be
'<select property="test1" styleId="test1"> <option value="code1">test 1</option> </select>'
What's the purpose? If you just need it to insert rows inside the table, it works fine already:
Look here:
http://codepen.io/anon/pen/NGNJrV
Can you elaborate the question please?