JavaScript doesn't work in thymeleaf.
In Spring Boot Thymeleaf, first thing can open modal. But second, third ... things can not open modal.
Every thing has className, but only first thing can open modal.
I think JavaScript works only the first thing, and doesn't work other things.
<tr th:each="board, i : ${boards}">
<th scope="row" th:text="${i.count}">1</th>
<td>
<p class="show" th:text="${board.title}">Title</p>
<div class="modal"> .... </modal>
</td>
<td th:text="${board.writer}">Son</td>
<td th:text="${board.createDate}">2022-02-01</td></p>
</tr>
js
function show() {
document.querySelector(".background").className = "background show";
}
function close() {
document.querySelector(".background").className = "background";
}
document.querySelector(".show").addEventListener("click", show);
document.querySelector(".close").addEventListener("click", close);
please help me
With your code you are only adding event listener to the first element of the class ".show". You should be adding event listeners to all members of the class. The following code should do the work:
document.querySelectorAll('.show').forEach(item => {
item.addEventListener('click', show);
})
Related
I have a table that has a range of elements inside of it.
I have registered some event handlers and add these elements dynamically through injecting new html.
Everything works for the original elements, but when I add a new ( dynamically created element ) and trigger one of the newly created event handlers the page seems to force reload and I lose all of my data/content.
Here is a simplified version:
<table id="asset-table" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="asset-row">
<td align="center" style="padding-bottom: 32px;">
<form id="asset-title" class="asset-title">
<input type="text" placeholder="Add Asset Title Here ..." id="title-input1" />
<input id="title-submit" class="submit" type="submit">
</form>
<p id="asset-title-replacement" style="text-align: center; display: none;"><strong></strong></p>
</td>
</tr>
</table>
<button id="add-asset-button">Add Asset</button>
EventHandler
// asset title load
$('#asset-table').on("submit", '.asset-title', function (event) {
event.preventDefault();
console.log("asset-title");
let text = $(this).find('#title-input1').val();
let td = $(this).children().first()
td.find('.asset-title').hide();
td.find('.asset-title').next('p').text(function () {
return text
}).css("font-weight", "Bold");
td.find('.asset-title').next('p').show()
});
To add the new element:
$('#add-asset-button').click(function () {
console.log("adding asset");
$('#asset-table').append("<tr class='asset-row'><td align='center' style='padding-bottom: 32px;'><form id='asset-title' class='asset-title'><input type='text' placeholder='Add Asset Title Here ...' id='title-input1' /><input id='title-submit' class='submit' type='submit'></form><p id='asset-title-replacement' style='text-align: center; display: none;'><strong></strong></p>/td></tr>")
})
So when dynamically adding the element, everything goes as planned, it is once I interact with adding the new "title" and click submit that the page seems to reload and I lose any "state" and content previously handled.
The problem that I am having is that the eventHandler is bound to #asset-table, so when a dynamic element is created the "this" keyword is bound to the #asset-table element, so how can I specify which that I am working with for that event??
You will have multiple forms with the same id as you have it now, though that's not the main problem. You're also listening to .assetTitle rather than .asset-title and your listener is wrong, which are the main problem. When you do:
$('.asset-row').on("submit", '.assetTitle', function (event) {
...
})
jQuery will only listen for form submits within .asset-row that currently exist when the listener is attached. All of your subsequent .asset-rows with .asset-titles (not .assetTitle) that are created programmatically do not have listeners attached. Instead, you need to apply it to an element that is present when the listener is attached, and then listen to any programmatically-created elements within it, like this. Note that I've changed .assetTitle to .asset-title.
$('#asset-table').on("submit", '.asset-title', function (event) {
...
})
Fiddle
Below is the tabular structure for expand & collapse, i have done using table. Now i have used the below script for collapse & expand. But sometime i succeeded in expand & sometime don't.
What i did, when i got response from the api, i call this function :
$timeout(function (){
$scope.initExpandCollapse();
},1000);
$scope.initExpandCollapse = function () {
angular.element(document).on("click", ".table_exp", function(){
var TBODY = angular.element(this).parents(3);
if(TBODY.hasClass("open")){
TBODY.children("tr.expand-table-row").hide();
TBODY.removeClass("open");
return false;
}
TBODY.addClass("open");
TBODY.children("tr.expand-table-row").show();
});
}
If you guys, can help me out for this problem . Thanks.
CSS:
tr.expand-table-row {
display: none;
}
tr.expand-table-row.open {
display: initial;
}
Angular
$scope.expandCollapse = function expandCollapse (item) {
item.open = !item.open
}
HTML
<table>
<tbody>
<tr ng-repeat="item in items track by $index"">
<td ng-click="expandCollapse(item)">++++</td>
<td>
<table>
<tr ng-class="{'open': item.open}" class="expand-table-row open">
<td>{{item.name}}</td>
<td ng-repeat="data in item.options">{{data.name}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You need nested tables so the click marker does not simply vanish with the rest, apart from that the salient point is the ng-class="{'open': item.open}" espression that sets the class open if the property open on item is set.
Try to use window.onload instead of $timeout, or add you script to the end of body tag.
I have form in which I am adding some dynamic actions. I have a table in which I have rows of positions
applicants applied for. There is an offer postion button and when they click on the offer button I want to insert the offer fields to be submitted and updated. I can get the feilds to insert but when I click on the cancel transaction button, I can't get it to empty the div addapptrans where the form is built. Below is the code. I know it must be something simple I am missing.
<head>
<script type="text/javascript">
$(function(){
$(".offerposition").click(function(){
var row = $(this).closest('tr').find('td:nth-child(1)').text();
alert('You clicked on ' +row);
$("#addapptrans").empty();
$("#addapptrans").append(
$("<input>").attr('type','hidden').attr( 'value',row).attr('Name','Mchposid'))
.append(
$("<input>").attr('type','submit').attr( 'value','Complete Offer').attr('id','completeoffertrx').attr('name','completeoffertrx').addClass("buttonlarge buttonmargin")
).append(
$("<input>").attr('type','button').attr( 'value','Cancel Transaction').attr('id','canceloffertrx').attr('name','canceloffertrx').addClass("buttonlarge buttonmargin")
);
}
)
}
);
$(function(){
$("#canceloffertrx").click(function(){
$("#addapptrans").empty();
})
})
</script>
</head>
<body>
<form >
<div id="addapptrans"></div>
<p class="posttitle">Positions applied For</p>
<table class="tabpositions">
<tbody>
<tr>
<th class="position">Position</th>
<th class="department">Department</th>
<th class="dateapp">Date Applied</th>
<th class="appdate">Offer?</th>
</tr>
<tr>
<td style="display: none;">2281</td>
<td>Building Service Worker - Part time</td>
<td>Environmental Services</td>
<td>08/13/2001</td>
<td><input type="button" class="offerposition" value="Offer Position"></td>
</tr>
</tbody>
</table>
</form>
This code here:
$(function(){
$("#canceloffertrx").click(function(){
$("#addapptrans").empty();
})
})
Runs before #canceloffertrx exists on the page. So $("#canceloffertrx").click(fn) Matches zero elements on the page, and binds a click handler to all zero of them.
You can fix this by binding the click handler to the document, or closest parent that is present, instead.
$('#addapptrans').on('click', '#canceloffertrx', function(){
This says that when the element #addapptrans receives a click event, and element that matches the selector #canceloffertrx was the one that was actually clicked, fire the event handler function.
Or by binding the click handler when you create the button.
$("<input>")
.attr('type','submit')
.attr( 'value','Complete Offer')
.attr('id','completeoffertrx')
.attr('name','completeoffertrx')
.addClass("buttonlarge buttonmargin")
.click(function() { ... });
Lastly, some style advice :) Especially when chaining jQuery methods, you can put each call on it's own line which makes it much more readable.
And you should also know that attr() can accept an object as an argument, allowing to call it just once to set many attributes.
$("<input>")
.attr({
type: 'submit',
value: 'Complete Offer',
id: 'completeoffertrx',
name: 'completeoffertrx'
})
.addClass("buttonlarge buttonmargin")
.click(function() { ... });
I am creating a user information edit dialog that fetches edit-user information using $.post but I'm unable to close this dialog since dialog wasn't initialized using any HTML element.
I am trying $('#editUser').dialog('close') but it won't work.
Here is the main body:
<div id='userInfo'>
<div class='user'>
<span class='userId'>1</span>
<span class='userName'>John</span>
</div>
<div class='user'>
<span class='userId'>2</span>
<span class='userName'>Jane</span>
</div>
and here is the script used to create the dialog:
$(function() {
$('.user').click(function() {
var uid = $(this).find('span.userId').html();
$post('/e-val/user/edit.php', {id: uid}, function(html) {
$(html).dialog();
});
});
$('body').on('click', '#closeEditDialog', function() {
$('#editUser').dialog('close')
});
});
The dialog opens up fine as expected but isn't closing as it should.
This is the HTML for the dialog as returned by the ajax script.
<div id='editUser'>
<table>
<tr>
<td>Username</td>
<td><?php echo $user['name'] ?></td>
</tr>
<tr>
<td>Email</td>
<td><?php echo $user['email'] ?></td>
</tr>
<tr>
<td colspan='2'>
<input type='button' id='closeEditDialog' value='close' />
</td>
</tr>
</table>
</div>
What can I do to close it? I can use $('#editUser').remove() to remove the dialog, but I need to close it not remove it.
var mydialog;
$(function() {
$('.user').click(function() {
var uid = $(this).find('span.userId').html();
$post('/e-val/user/edit.php', {id: uid}, function(html) {
mydialog = $(html);
mydialog.appendTo('body');
mydialog.dialog();
});
});
$('body').on('click', '#closeEditDialog', function() {
mydialog.dialog('close')
});
});
You might need to insert that html into your DOM before creating your dialog.
$("body").append(html);
$("#editUser").dialog();
Well at least if your dialog shows up this way, there is nothing preventing it from closing, you're using the same selector.
EDIT
Also, do not forget that .dialog() will initialize the widget, try not calling it more than once. Using .dialog("open") instead.
Best would be even to already add the dialog's div into your html, and then append your server side code in it to dynamically update the content of the dialog.
$('#editUser').dialog('close') won't work because you've never used $('#editUser') to initialize the dialog, so you cannot use it either to close it, You need to use the same handler that was used to create it.
As answered here by Gil & Trinh :
Just add the dialog content to the DOM first and then initialize the dialog:
$post('/e-val/user/edit.php', {id: uid}, function(html) {
$(html).appendTo('body');
$('#editUser').dialog( {autoOpen: false} );
});
autoOpen: false will prevent the dialog from opening by itself and it can be opened using $('#editUser').dialog('open') anytime.
I have a JavaScript object. And you can see the line:
window.gv.borderiseTDCell(this);
Is tigthly coupled to the window (if gv is not initialised it crashes). However what I really want is to be able to do is:
//bind the click event
jQuery('.highlightableTDCell').click(function () {
borderiseTDCell(this);
});
But that doesn't work. Any ideas what I can do? This is the full lisinng (with tight coupling):
gridview = function () {
//bind the click event
jQuery('.highlightableTDCell').click(function () {
window.gv.borderiseTDCell(this);
});
};
//selecting cell
gridview.prototype.selectCell = function (obj) {
//dostuff to cell
};
And a page...
<table class="EditTable" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="">0</div>
</td>
<td>
<div style="">0 akudsfsa fdhsad fiasgdf swae</div>
</td>
<td class="highlightableTDCell">
<div>
<input value="0.00"/>
</div>
</td>
</tr>
</table>
It's probably because you're using this when you should be using $(this)
borderiseTDCell($(this));
Also, gridview doesn't seem to be defined:
var gridview = function (){}
Not sure why you'd need a library to outline a table cell. How about creating a class called outlinedCell
.outlinedCell{border:1px solid #f00;}
Then you can add, remove, or toggle this class
//bind the click event
$('.highlightableTDCell').click(function () {
$(this).addClass('outlinedCell');
// or // $(this).removeClass('outlinedCell');
// or // $(this).toggleClass('outlinedCell');
});
LIVE SAMPLE: http://jsfiddle.net/WJp2Z/