This question already has answers here:
Thymeleaf attribute and modal
(3 answers)
Closed 4 years ago.
I know, that this question was asked many many times, but i try and code not working.
This function must parse data from my
<a id="dep-modal-pic" class="edit_dep modal-trigger" href="#modal3" th:attr="data-dep_id=${department.id}"> and put dep_id to modal input.
var bookId not working. when i give fixed value to this var it is work, but in my thymeleaf template every new field is new value because
<tr th:each="department : ${departments}">
<td class="dep_id" th:text="${department.id}">1</td>
<td th:text="${department.name}"></td>
</tr>
So, please, can you correct my code? I cant sleep, all day making this thing and still not working.
I need value dep_id to modal input
<input id="ids" name="ids" value="" type="text" class="validate">
$('#modal3').click(function(e) {
var bookId = $(e.relatedTarget).data('dep_id');
$(e.currentTarget).find('input[id="ids"]').val(bookId);
});
The click handler should be attached to #dep-modal-pic, something like:
$('#dep-modal-pic").click(...)
Update:
This is a duplicate of Thymeleaf attribute and modal
Please check my answer on the other post which is more clear
Related
This question already has answers here:
Using an HTML button to call a JavaScript function
(8 answers)
Closed 7 months ago.
As title says;
TL;DR - creating credit card app, built the logic to check the card and that works, my issue is linking the HTML and JS.
I have built this app for fun using JavaScript to deepen my knowledge but I'm stuck. What I want to happen is when a user inputs a credit card number, there to be some kind of success message, like the background turns green, or red if it doesn't meet the criteria. The algo being used is Luhn's method to validate.
https://learnersbucket.com/examples/javascript/credit-card-validation-in-javascript/#:~:text=Validating%20credit%20card%20in%20javascript%20with%20Luhn%27s%20algorithm.&text=Get%20a%20double%20of%20every,divisible%20then%20it%20is%20valid.
Project is here: https://github.com/Chaffexd/creditCardApp
This is my HTML:
<div class="card-body">
<h4>Validate a credit card</h4>
<form id="information">
<div class="box">
<input id="credit-card-number" type="text" placeholder="Enter a credit card number">
</div>
<div class="validate">
<button id="check">Validate</button>
</div>
</form>
</div>
Using the above link as an example, my algorithm is different but the same logic applies. How can I allow a user to input a 16 digit card number, then click validate and for the function to run and then return success/error.
Apologies, I have researched this for several hours and attempted multiple different routes but it just can't click in my head. Would appreciate any help on this.
Reading the code it seems the checkCreditCard is returning response object with success and errors. Please try the below code:
check.addEventListener('click', (e) => {
e.preventDefault();
var response = validateCred(cardNumber.textContent.split(""));
console.log(check)
if(response.success) {
check.style.backgroundColor = "green"
check.classList.add('valid') # or add class
}
else {
check.style.backgroundColor = "red"
check.classList.remove('valid') # or remove class
}
})
This question already has answers here:
How to Pass an Object to client Javascript - NodeJS & express
(2 answers)
What is the difference between client-side and server-side programming?
(3 answers)
Closed 3 years ago.
I have been tryinng to call a function on button click in handlebars view,
but unable to do so.
Now, I am new to it and maybe somehow missing the obvious. would love some help on this.
basically, it's a table which I am creating dynamically, but unable to call the function on button click.
here's the relevant code inside calendar.hbs
{{#each events}}
<tr>
<td>{{this.subject}}</td>
<td>{{this.start.dateTime}} ({{this.start.timeZone}})</td>
<td>{{this.end.dateTime}} ({{this.end.timeZone}})</td>
<td>
<ul class="list-unstyled">
{{#each this.attendees}}
<li class="border p-1" title="{{this.emailAddress.address}}">
{{this.emailAddress.name}}
</li>
{{/each}}
</ul>
</td>
<td>{{this.location.displayName}}</td>
<td><button onclick="editEvent({{this}})" >Edit</button></td>
</tr>
{{/each}}
</tbody>
and I have put the function in layout.hbs
inside script tag like this
<script>
function editEvent(val){
return function(e){
console.log('val : ',val);
}
}
</script>
but I still get an error saying "Uncaught SyntaxError: Unexpected identifier"
please tell me where am I going wrong.
now, I also tried doing it in app.js like this
hbs.registerHelper("editEvent", function(event) {
console.log('event : ',event);
});
and then used in in calendar.hbs like
Edit
and it was working I could see it in the console. but the problem was that it seemed to be calling the function on load and it kind of was automatically calling the function for all rows of the table on load... which I dont want.
so, what is the best way to do it?
EDIT:
I looked at the html there and it shows up like this
okay, I looked at it and it's showing up as
<td><button onclick="editEvent([object Object])" >Edit</button></td>
not sure how to fix it though.
I am not sure why you marked it as duplicate.
The questions linked to - dont answer the question I have . But if you do feel that my question is answered here, then please at least send me a message with how to fix my problem.
This question already has answers here:
ng-model for `<input type="file"/>` (with directive DEMO)
(13 answers)
Closed 4 years ago.
I have a JSON file in my HDD, how can I read the content of this file when I select it with input field?
I have to read the content and send content as data in some API!
I need something like this :
<input type="file" id="dashboardExportedFile">
<button type="button" ng-click="importDashboard">Import</button>
<script>
$scope.importDashboard = function (
var content = $("#dashboardExportedFile").content
console.log(content);
};
</script>
I think you need a Filereader. Follow my Link to see an working example with .txt File. Hope u can use it:
[JSFiddle][1]
[1]: http://jsfiddle.net/alexsuch/6aG4x/
This question already has answers here:
val() vs. text() for textarea
(2 answers)
Closed 4 years ago.
Not a duplicate question; so please consider the content closely before presumption.
I've been using JQuery for years and have never seen this type of behavior before. Consider the following:
<html>
<div class="order-form-group">
<label class="order-form-label" for="guestSpecialInstructions">Special Instructions:</label>
<textarea class="order-form-textarea" id="guestSpecialInstructions" type="text"></textarea>
</div>
<div class="order-form-group">
<label class="order-form-label" for="guestReason">Reason:</label>
<textarea class="order-form-textarea" id="guestReason" type="text"></textarea>
</div>
<div class="button-container">
<input class="order-form-submit" type="submit" value="Submit">
</div>
</html>
I've observed that the following script in some instances will return 'undefined' even when "all" the more obvious reasons have been eliminated. Such as
having the incorrect selector, having more than 1 id on the page and etc.
<script>
var specInstr = $("#guestSpecialInstructions").val();
var guestReason = $("#guestReason").val();
</script>
I spent literally hours attempting to determine what the disconnect was; stripping my code to the simplest basic level and couldn't find any reasonable explanation for the behavior.
The code is contained within a simple HTML page; nothing fancy and references the JQuery repository https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
I have another project which runs in an aspx page, still the markup is identical and the .val() method works without issue.
After hours of hitting a wall I ran across the post at JQuery: .val() is not working for textarea and someone else attesting to the exact same issue using valid code and the suggestion was:
<script>
var specInstr = $("#guestSpecialInstructions")[0].value;
var guestReason = $("#guestReason")[0].value;
</script>
Then the issue is automagically resolved. Only problem I have with this is that there no one seems to have answered the question of why the JQuery .text() method sometimes return undefined when all aspects of the code is valid.
Resolutions are great but without understanding why the issue exists, really gains nothing intellectually.
If I need to change the wording of the title, let me know.
You can only use text() on a <textarea> if it is pre-populated and to return the original content
Any changes to the content by user or setting new value programatically will not alter what is returned by text() as it will always be the original pre-pre-populated content
Always use val() to get and set
var $txt = $('textarea')
console.log('text() Original content:', $txt.text())
console.log('val() Original content:', $txt.val())
$txt.val( 'Some new content')
console.log('text() after value change:', $txt.text())
console.log('val() after value change:', $txt.val())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="one" type="text">
Original text
</textarea>
This question already has answers here:
What is href=javascript:;
(8 answers)
Closed 5 years ago.
What is the purpose of javascript:; in the href attributes of the hyperlinks?
<div data-trigger="spinner" id="spinner">
<span id="spinner-value"></span>
<input type="hidden" value="1" data-spin="spinner" data-rule="quantity" data-max="10">
-
+
</div>
the attribute href="javascript:;" is used to remove the behavior from the link.
If you would use eg. href="", the webpage would reload when you click the link. But with href="javascript:;" nothing will happen.
Later a script adds an event handler that will be executed when clicking this link.
EDIT: You need a or button elements as they are the semantic representatives for clickable objects.
To prevent links from refreshing webpage/redirecting you once clicked.
the purpose of "javascript:;" have save meaning with "javascript:void(0)"
Read here : javascript void functions