Develop Reference

How to launch a modal window with a signal from the server

Programs, languages and frameworks used:
Java
IntelIJIdea
SpringSecurity
Thymleaf
Html
JavaScript
I have a page product.html on which there is a product. The user clicks on the order item button. I'm sending a signal to the server.
If the object is successfully added to the database, I call the same window with an additional bool parameter.
I need to make it so that if bool is true, a modal window pops up with the message the product has been added to the cart.
The problem is that if I use thymeleaf if as a condition to start the window,
<div th:if="${openModal}">
Открыть модальное окно
<div class="product_modal_window" id="openModal">
<div>
<a class="close" href="#close" title="Закрыть">X</a>
<h2>Добавлено</h2>
<p>The product has been added to your cart, continue shopping or go to the cart?</p>
</div>
</div>
</div>
then I do not know how to change the value of openModal from true to false (If at all possible) when clicking the close button.
If I use the option with my_window:target.
When selecting, show the window using a pseudo-class and then when clicking on the cross to remove the selection from the window
, then I do not know how to determine whether the window should be opened this time or not when starting the window using a variable from the server.

The canonical way to do this is use redirect/flash attributes. In your controller, you would do something like this:
#PostMapping("/products")
public String doAddProduct(#ModelAttribute("product") AddProductFormData formData, RedirectAttributes redirectAttributes) {
service.addProduct(formData);
redirectAttributes.addFlashAttribute("productAdded", formData.productName());
return "redirect:/products";
}
In your template, you can use productAdded:
<div th:if="${productAdded}">
<div>The product with name [[${productAdded}]] was added.</div>
</div>
The advantage of using the flash attribute is that if the page gets refreshed, the flash attribute is gone and the message is no longer showing.
That said, if you want to give the user an option to manually dismiss the dialog, I would use something like https://alpinejs.dev/ :
The template would be:
<div th:if="${productAdded}">
<div class="product_modal_window" id="openModal"
x-data="{ open: true }"
x-show="open">
<div>
<a class="close" #click="open = false" title="Закрыть">X</a>
<h2>Добавлено</h2>
<p>The product has been added to your cart, continue shopping or go to the cart?</p>
</div>
</div>
</div>

The problem was solved, however, perhaps in a rather rough way.
I wrote the result in a hidden field. And then I use JavaScript to turn this window on or off.
html
<input type="hidden" id="openModalValue" th:value="${openModalValue}">
<div class="product_modal_window" id="modalWindow">
<div>
<h2>Added</h2>
<p>The product has been added to your cart, continue shopping or go to the cart?</p>
<input class="product_popup_button" type="image" src="/static/images/elements/product/product/Blue_original.png" alt="Continue shopping" onclick="PopupCloseById('modalWindow')">
enter code here
</div>
</div>
JavaScript
function TogglePopup()
{
const openModal = document.getElementById("openModalValue");
const openValue = (openModal.value === 'true');
const popup = document.getElementById("modalWindow");
if (openValue)
{
popup.classList.add('open');
}
else
{
popup.classList.remove('open');
}
}
function PopupCloseById(id)
{
const popup = document.getElementById(id);
popup.classList.remove('open');
}
.product_modal_window
{
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
CSS
.product_modal_window.open
{
display: block;
pointer-events: auto;
}
.product_modal_window > div
{
width: 400px;
height: 200px;
position: relative;
margin: 15% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

Disable part of textarea content

I have textarea with a static content. So I disabled the textarea to prevent any modification in the content. But I want to modify some part of this content. How can I do this ?
I have created a select box as follows :
<div class="scroll-inside">
<?php if($transactionalTemplates->num_rows() > 0) {
foreach($transactionalTemplates->result_array() as $template) { ?>
<a href="#" class="transactionalTemplate" data-text="<?php echo $template['TemplateText']?>">
<?php echo $template['TemplateText'];?>
</a>
<?php }
}
?>
</div>
When I select an item, the selected item will pasted to the following textarea
<textarea placeholder="Enter your message here.." maxlength="160" class="messageTransactional" name="messageTransactional" id="messageTransactionalEnglish"></textarea>
here is my script code:
$('.transactionalTemplate').click(function() {
$('.messageTransactional').val($(this).data('text'));
flag = true;
$('.messageTransactional').keypress(function(e) {
e.preventDefault();
});
});
After adding the content to textarea, I prevent typing new content using the above function.
here is an example:
Suppose Dear (123), thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call (123) is my content.
I need to edit this content as Dear John, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call 91xxxxxxxx
Which means, I need to change the content in paranthesis, keeping the format static.

I would highly suggest not using a textarea. There is no real way to stop that. You would need to do it yourself and try to catch every possibility to change that.
Instead, a simple text-input usually looks the best.
Alternatively, if it has to be seamless, you can use a contenteditable span, like this:
Dear <span contenteditable="true">(please enter your name here)</span>, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call <span contenteditable="true">(please enter your tel. number here)</span>

I was bored so did a pretty cool solution, it's not perfect though and still needs work for production.
const $editable = $('.editable')
const $inputs = $('.input')
const $save = $('#save')
const popup = function(e) {
const $this = $(this)
$this
.find('input')
.addClass('active')
.focus()
}
const onBlur = function(e) {
const $this = $(this)
const $parent = $this.parent()
const value = $this.val()
$parent.find('input')
.removeClass('active')
if (value) {
$parent
.find('.value')
.text($this.val())
}
}
const onSave = function(e) {
const $pre = $('pre')
console.log('save', $pre.text())
}
$editable.on('click', popup)
$inputs.on('blur', onBlur)
$save.on('click', onSave)
body {
padding: 1em;
}
pre {
white-space: normal;
font-family: sans-serif;
}
.editable {
border-bottom: 1px dotted #3cf;
color: #3cf;
min-width: 1em;
min-height: 1em;
position: relative;
}
.editable input {
position: absolute;
width: 80px;
transform: translate(-70px, 0%);
border: 1px solid #aaa;
padding: .5em;
border-radius: 5px;
text-align: center;
opacity: 0;
visibility: hidden;
transition: .4s opacity ease, .4s transform;
}
.editable input:focus,
.editable input.active {
transform: translate(-70px, -100%);
opacity: 1;
visibility: visible;
outline: none;
}
.editable:focus {
outline: none;
}
.button {
float: right;
padding: .5em 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="messageTransactional" />
<pre id=="messageTransactional">
Dear <span class="editable" id="name"><span class="value">name</span><input type="text" class="input" /></span>, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call <span class="editable" id="phone"><span class="value">phone</span><input type="text" class="input" /></span> is my content.
</pre>
<button id="save" class="button">save</button>

Javascript Logic in Extending Search Bar

I've created an expanding search bar: You click on the magnifying glass the input extends out and to the right, click it again and it closes. (See Fiddle Below).
I'm new to the world of JS and I thought this would be a great opportunity to implement some logic. Here's what I;m trying to do:
If the search bar is open and the inner.html is empty, if you click the "search" magnifying glass, I want to prevent the default submission of the form and simply close the search bar
If there is text, I want the form to be submitted.
Right now I've got the elements layered in such a way as to when you click the "search" button for the first time, the bar extends and the z-index of the button drops to one where the actual submit button is higher, but I want to control the functionality a little more.
What I've tried:
I tried creating a function that added an event listener that said, basically, if the bar has a width of 700px (the extended length) and the inner html is empty, bring the z-index of the extend button up back higher than the submit simply close the form. But I can't seem to work the logic out properly.
I'm wondering how in JS you can control the z-index.
Here is the code I tried and did not work. I tried something simply like just alerting when the task I wanted to watch for was done first but it doesn't seem to be working.
Any help would be wonderful.
Code:
HTML:
<div id="wrap">
<form id="myForm">
<input id="search" name="search" type="text" placeholder="What are we looking for?" />
<input id="search_submit" value="" type="submit">
</form>
</div>
CSS:
#wrap
{
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
}
input[type="text"]
{
height: 40px;
font-size: 35px;
border: none;
outline: none;
color: #555;
padding-right: 60px;
position: absolute;
width: 0px;
top: 0;
right: 0;
background: none;
z-index: 4;
cursor: pointer;
transition: width .4s ease-in-out;
}
input[type="text"]:focus
{
width: 700px;
z-index: 1;
border-bottom: 1px solid #bbb;
cursor: text;
}
input[type="submit"]
{
position: absolute;
height: 60px;
width: 60px;
display: inline-block;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
border: none;
outline:none;
top: -15px;
right: 0;
z-index: 2;
cursor: pointer;
transition: all .4s ease;
}
JS
var search = document.getElementById("myForm").search;
var search_submit = document.getElementById("myForm").search_submit;
function showOpen()
{
if(search.style.width=="700px")
{
alert("OPEN!");
}
};
search.addEventListener("click", showOpen);
showOpen();
HERE IS THE FIDDLE: https://jsfiddle.net/theodore_steiner/7begmkf3/37/

Your issue can be solved using a few basic JavaScript elements (if you're looking to get into basic logic, these are important to know). The JS uses onsubmit, onclick, and some basic form logic. Basically, when you try to submit the form it checks if the form is empty, and if it is, the program refuses to submit the code. I added the new JavaScript to the HTML file:
<script>
function check(){
value = document.forms["myForm"]["search"].value;
if(value == "" || value == null){
alert("please enter a search term");
return false;
}else{
document.getElementById("myForm").submit();
}
}
</script>
<div id="wrap">
<form id="myForm" onsubmit="return check()">
<input id="searchBar" name="search" type="text" placeholder="What are we looking for?" />
<input id="search_submit" value="" type = "submit">
</form>
</div>
fiddle: https://jsfiddle.net/q1L3Lstx/1/
It might also help in the future to look at the required element: http://www.w3schools.com/tags/att_input_required.asp

I saw a couple of issues with the code.
search and search_submit are pointing to the wrong items they can be like this:
var search = document.getElementById("search");
var search_submit = document.getElementById("search_submit");
You could call a function on submit. like this:
<form id="myForm" onsubmit="myFunction(event)">
finally you can work your code inside that function:
function myFunction(e){
if(search.value.length <= 0){
e.preventDefault();
alert('empty');
}
}

How do I get the log-in section to disappear when users are logged in?

I want the "log in block" to be hidden to my users once they are logged in. It is very confusing to still see the log in section. My users think that their log in didn't work when in actuality, they are successfully logged in. I have tried inserting the following into my CSS block, but I need a condition to make it visible when users are NOT logged in.
display: none;
Here is my HTML code for this section:
<DIV id="hp-content">
<DIV id="hp-left-column">
<DIV id="hp-sign-header">
</DIV>
<DIV id="hp-sign">
<input type="textbox" class="ui-txt-general medium required" id="swsignin-txt-username" />
<input type="password" class="ui-txt-general medium required" id="swsignin-txt-password" />
<a title="Sign into my site." onclick="joelSignIn();" class="" id="swsignin-btn-submit"><img src="/cms/lib06/CA01000567/Centricity/Template/2/signin.png" alt="Sign In" /></a>
</DIV>
Here is my CSS code for this section:
#hp-sign-header{
width: 288px;
height: 27px;
margin: 20px 0px 10px 0px;
background: transparent url(/cms/lib06/CA01000567/Centricity/Template/2/sign-header.png) no-repeat scroll top center;
}
#hp-sign{
width: 218px;
height: auto;
margin-left: 35px;
}
#swsignin-txt-username, #swsignin-txt-password {
border: 1px solid #0C304E;
color: #6994B9;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 15px;
line-height: 15px;
height: 47px;
margin: 0px 0px 10px 0px;
padding: 0px;
text-align: center;
width: 221px;
}
#swsignin-txt-username {
background: transparent url(/cms/lib06/CA01000567/Centricity/Template/2/username.png) no-repeat scroll top left;
}
#swsignin-txt-password {
background: transparent url(/cms/lib06/CA01000567/Centricity/Template/2/password.png) no-repeat scroll top left;
}
Here is the JAVASCRIPT code for this section:
function joelSignIn(){
var data = "{Username: '" + addslashes($('#swsignin-txt-username').val()) + "',Password: '" + addslashes($('#swsignin-txt-password').val()) + "'} ";
var success = "window.location.reload()";
var failure = "if (result[0].reason === 'TOU') { DisplayTOU(); } else { CallControllerFailure(result[0].errormessage); }";
var callPath = "../site/SiteController.aspx/SignIn";
CallController(callPath, data, success, failure);
}
So my question is, do I need to insert HTML code, CSS code and/or JAVASCRIPT code to make this work? And what is the code that I need to insert and where? I have tried researching and playing around, but to no avail. Any advice would be MUCH appreciated. Thank you!

You can't log in using javascript alone. Javascript is a client-side language, meaning it only operates on the user's computer. 'Logging in' suggests your visitors have something to log in to. That's usually a database running on the computer you're using to host your website, typically called the server. This can only be done at the server-side.

on submit form span message changes position why?

I'm trying to understand why the message generated by jquery it's changing position everytime a field gets empty!
So, if the message is generated by the feedback of ajax it's placed in the proper place which is right beneath the login box. If the field (input box) is empty on submit the ajax script is not called and the message of empty field it's shows right on but 40px or more beneath.
The jquery script:
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#loginform").submit(function(){
$('#loginform input[type=text]').each(function(n,element){
if ($(element).val()=='') {
$(".message").html('<p>O campo '+element.id+' tem de ter um valor!</p>').fadeIn("slow").delay(2000).fadeOut(1000);
return false;
}
else{
$.post("login.php", { usrname:$("#Nome").val(), passwd:$("#Palavra-passe").val()}, function(data){
if(data == '1'){
$("#subLog").hide();
$(".message").html('<p>Login efectuado com sucesso, a redirecionar...</p>').fadeIn("slow").delay(2000).fadeOut(1000, function (){
$("#login").fadeOut('slow', function(){
location.reload();
});
});
}
else{
$("#subLog").hide();
$(".message").html('<p>Erro! Tente novamente por-favor!</p>').fadeIn("slow").delay(1500).fadeOut(1000, function(){
$("#subLog").fadeIn('fast');
});
}
});
}
});
return false;
});
});
//-->
</script>
The css message style:
.message{
text-align:center;
color: white;
background: rgba(0, 0, 0, .5);
margin-top: 65px;
padding: 4px;
font-weight: bold;
font-size: small;
border: 2px solid white;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}
the form:
<div class="box" id="login" style="width: 326px; height: 228px; top: 39%; background-image: url('images/loginBox.png');background-repeat: no-repeat;">
<form id="loginform" action="" method="post">
<fieldset style="display: block">
<legend></legend>
<input id="Nome" class="transparent" type="text">
<input id="Palavra-passe" class="transparent" type="password">
<input id="subLog" type="submit" value="Login">
</fieldset>
</form>
<div class="message"></div>
UPDATE:
The submit button get's hidden when the ajax instruction is called therefore the position changes 65px. To correct this small problem I have removed the margin-top property from the css rule and changed the position with .css('margin-top', 'value'). This way I change the value to the different messages and both get displayed in the same screen position. Thank you.

Well, i don't know exactly how it looks after the ajax response, but if you leave the field empty you just need to take off this line from css
margin-top: 65px;
and it's ok.
look here: http://jsfiddle.net/Ature/2/
P.S. i also added
$('div.message').hide();
to avoid having the div message display before any warning is generated
EDIT - maybe you have other rules affecting your div. if the other rules are loaded before you insert this you can add the line
margin-top: 0px;
to override them.
moreover: remeber to clear your cache when you reload yopur page!