Bootstrap remove modal content issue - javascript

I know that this question is a duplicate, but i can't find a matching answer for my problem. I am using boostrap 3.2.0 and I have this modal:
<div class="modal fade popup" id="popupSelect">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 class="modal-title">Select meal</h4>
</div>
<div class="modal-body-select">
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select name="selectCategory" class="form-control selectCategory"
id="selectCategory">
<option value="0">Select category</option>
<c:forEach items="${categories}" var="category">
<option value="${category.text}">${category.value}</option>
</c:forEach>
</select>
</div>
</div>
<br>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Meal</label>
<div class="col-lg-10">
<select name="selectMeal" class="form-control idMeal" id="selectMeal">
<option value="0">Select meal</option>
</select>
</div>
</div>
<input type="hidden" value="-1" id="hSelectIndex"/>
</div>
<div class="modal-footer">
Close
<input type="button" class="btn btn-warning buttons btnSaveChanges"
value="Save Changes" />
</div>
</div>
First time when the modal is loaded the content is correct. After closing the modal, every time the loaded content is the one selected first time.
I tried to remove the data content using:
function removeModalContent(){
$('#popupSelect').on('hidden', function () {
$(this).removeData();
});
}
But it is not working! What i am doing wrong?
Every time the select button is pressed the modal is loaded. And i need to clear the content every time the modal is "hidden".

When I work with modals I always prefer to clear any user interaction before poping it up. This is how I do it:
1) Subscribe to button click event in order to show the modal window:
$("#btnSearchCustomer").click(function () {
searchCustomers($(this));
});
2) The function searchCustomers shows the pop-up window.
function searchCustomers(btn) {
btn.attr("disabled", "disabled"); // disables the button to avoid loading data more than once
clearSearchForm(); // clears any user input
// checks if the modal has all the data loaded (to avoid loading on start)
if (!searchForIsLoaded) {
loadSearchForm(); // loads any necessary data from the DB using AJAX
searchForIsLoaded = true;
}
$('#mdlSearchForm').modal('show'); // shows the modal window
btn.removeAttr("disabled"); // enables the button again
}
You need to implement the function clearSearchForm for cleaning any field the user has modified.
3) Subscribe to OK button on modal window and do something with user input
4) Hide modal form
I hope it helps

I'm not entirely clear on what your problem is, but first things first, in Bootstrap 3 the event that is fired when a modal is hidden is not hidden, it is hidden.bs.modal (See Bootstrap Docs, under heading 'Events'). So this...
$('#popupSelect').on('hidden', function () {...
will not fire. Change it to...
$('#popupSelect').on('hidden.bs.modal', function () {...
I'm also not clear why that is inside a function called 'removeModalContent'. Really you want to set up the event handler on load. What you would have to do in your current case is call that function just to set up the event listener.
Like I said, not entirely sure on your particular circumstances/problem so if this doesn't help or I am missing something let me know and I'll have another look.

Related

How to keep checkbox checked in modals after page refresh using jquery?

This is my modal that includes some checkboxes with an option to select all, please let me know how to keep the boxes checked after I refresh the page only using jquery not localstorage:
<!--Modal-->
<div class="modal fade" id="invoiceOptions" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-justify">
<form class="form">
<div class="form-group">
<div class="input-group checkbox">
<label>
<input type="checkbox" name="select-all" id="checkAll"/>
Select All
</label>
<br>
<label>
<input type="checkbox" class="invoiceOption"/>
Item 1
</label>
<label>
<input type="checkbox" class="invoiceOption"/>
Item 2
</label>
<label>
<input type="checkbox" class="invoiceOption"/>
Item 3
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="saveBtn" value="" data-dismiss="modal">
save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/Modal-->
This is the jquery script for my modal:
<script>
$('#checkAll').click(function(event) {
if(this.checked) {
$('.invoiceOption').each(function() {
this.checked = true;
});
} else {
$('.invoiceOption').each(function() {
this.checked = false;
});
}
});
</script>
first of all you have to include your jquery script in jquery document load function in order to insure script runs after page completely ready.
$(document).ready(
$('#checkAll').click(function(event) {
if(this.checked) {
$('.invoiceOption').each(function() {
this.checked = true;
});
} else {
$('.invoiceOption').each(function() {
this.checked = false;
});
}
});
);
then.
after a page refresh, it sends request to server (if it hasnt been cached anything) and create dom, then run Javascript.
so everything in js would be vanished after refresh
Note : with some browser (like firefox) when refreshing using F5,
The Browser itself, save input tag values between refreshes.
dadash, to preserve checkbox state, you have to save them elsewhere, then check it when page reloads, if there is any data.
the techniques including these (not excluding):
use local system:
localDB
cookies
use url data:
preserve in url (like #Pof mentioned)
use server:
make an api in server and try to save and retrieve checked input for a given user. (you can use sessions for a given user in server)
You need something to store current state of your inputs. So if you don't want to use localStorage, you could use params in url to store input values.
You could use the window.history.replaceState() javascript function, that allows you to change the current value of the history entry (it will change your current url without reloading the page).
Then on page reload, you could use those url params to ckeck/uncheck what you need in your form.

Enable bootstrap 4 'spinner' after submit button on HTML form (Flask)

What i'm after doing is
a) show the regular submit button
b) when you hit submit, the spinner version appears
c) the form submits and my Flask code goes to the database call.
d) then when the database call is finished it shows the result on a new page.
I'm okay with A, C and D..... they work right now, but I can't fathom out the spinner switch bit.
I've been trying and failing miserably to get all sorts of javascript copied and pasted from a whole host of stackoverflow searches.
Most have some JS function like on('click', function..... but I don't know where to place that in the HTML....
Could I do some CSS container swap trick?
Apologies for being a newb!!
Here's my little form and buttons.
<form class = "js-battery-form" action="/home" method="POST">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text form-control-sm" for="battery_size">Battery size</label>
</div>
<select class="custom-select custom-select-sm" id="battery_size", name="battery_size">
<option value="1.2">1.2kWh</option>
<option value="2.4">2.4kWh</option>
<option value="3.6" selected>3.6kWh</option>
<option value="4.8">4.8kWh</option>
<option value="7.2">7.2kWh</option>
</select>
</div>
<button type="submit" id="btn" class="btn btn-primary btn-sm btn-block" >Submit Query</button>
<button class="btn btn-primary btn-sm btn-block">Submit Query
<span class="spinner-border spinner-border-sm"></span>
</button>
</form>```
this worked for me. Altered slightly though as for some reason i couldn't get the spinner to spin:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
$(document).ready(function() {
$("#btnFetch").click(function() {
// disable button
$(this).prop("disabled", true);
// add spinner to button
$(this).html(
`<i class="fa fa-spinner fa-spin"></i> Loading`
);
$("#batteryform").submit();
});
});
</script>
Think i've solved this one for anyone interested.
https://jsfiddle.net/zarch/2w6Lnp4m/3/
So I sorted a working spinner in JS Fiddle (see above) using $(document).ready(function(), but it wouldn't fire on my webpage.
I've got my JS at the end of my HTML at the bottom of the page, so it turns out you need to load the JS before the $(document).ready(function() .
So I moved the src="https://code.jquery.com/jquery-3.4.1.slim.min.js" etc to BEFORE the $(document).ready(function()
Then I hit another problem, the spinner worked but the form never submitted. It just sat there spinning forever.
So I added an id tag to the form "battery-form" and then made a submit call at the end of the $(document).ready(function()
$("#battery-form").submit();
Hope this helps someone out.

Javascript turn div into form on button click

I am trying to turn a password row into an input field when the 'change password' button is clicked. I am kind of halfway there already using Jquery. So I have made it so that when you click 'change password' the input field gets added. Also when they click 'back' the original state is shown. If you look on the codepen, you'll notice that after clicking 'back', you can't then click 'change password' again, the jquery doesn't work. Is there a solution to this?
Also I have used jquery 'replaceWidth', is there a better way to do this? I am putting a lot of html into my Jquery and not sure if that's the best way to do it.
Please take a look!
https://codepen.io/liamdthompson/pen/WYwXeK
$("#change").click(function () {
$("#container").replaceWith('<input class="form-control" id="zing" required="required" type="text" value="Change password" id="website_name">');
$(this).replaceWith('<button type="button" id="yeet" class="btn btn-light lighter">back</button>');
$("#yeet").click(function () {
$(this).replaceWith('<button type="button" id="change" class="btn btn-light lighter">Change password</button>');
$("#zing").replaceWith('<div class="" id="container">*********</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountmain" style="padding-top:25px;">
<div class="row">
</div>
<div class="row">
<div class="col">
<h6> Password</h6>
</div>
<div class="col" id="container">
*********
</div>
</div>
<button type="button" id="change" class="btn btn-light lighter">Change password</button>
</div>
This is because your #change on click event is bound to the dom element when the page loads.
To bind events to dynamically created elements, bind to the document using the .on feature, like this.
You have to re-attach the event listener again when you insert the button back in.
Otherwise another solution is to use the derived event on the parent class ie.
$('body').on('click', '#change', function(){});
This will affect any element with Id change that has body in its line of ancestors.

onclick open child window & submit form

so I have a parent and child window
the parent window have some form in it and I plan to fill the form by value passing from child window that is retrieved from mysql database
but, every time the button to open the children window clicked it trigger 2 event
first , it open the children window
second , it submit the form in parent window
my question is why the second event happened ? i didnt put any code to submit the form (on parent window) in onclick event yet
this is my code in parent window :
<script language="javascript">
function openWindow() {
window.open("blabla.php","_blank","height=600,width=400, status=yes,toolbar=no,menubar=no,location=no");
}
</script>
<div class="form-group">
<label>ID USER</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<input type="text" readonly class="form-control" id='idk' name='idk' placeholder="Submit ID User" required="required" />
<span class="input-group-addon"><button onClick="javascript:openWindow();">Select</button></span>
</div>
</div>
I can't answer you're question without more information. You need to understand what events are being fired when you're click function is being called to do this pass the event to your function. Then you can see the event object and determine what is causing your the second event to be fired. To do this pass the event object into your function and then you can inspect it.
<script language="javascript">
function openWindow(e) {
console.log(e);
window.open("blabla.php","_blank","height=600,width=400,
status=yes,toolbar=no,menubar=no,location=no");
}
</script>
<div class="form-group">
<label>ID USER</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<input type="text" readonly class="form-control" id='idk' name='idk' placeholder="Submit ID User" required="required" />
<span class="input-group-addon"><button onClick="javascript:openWindow(event);">Select</button></span>
</div>
</div>
I don't know exactly what you are trying to accomplish based on the limited information you gave so this is the best I can do to help you. If you are using bootstrap and I see you are using some bootstrap classes. Bootstrap may be submitting your form on the click. Using e.preventDefault() may stop this behavior.

Dropdown List is not Updating the Selected Value (SemanticUI)

I am using SemanticUI for a dropdown list
<div class="ui dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
in the bottom of my page, I am initializing it as
jQuery(document).ready(function($) {
$('.ui.dropdown')
.dropdown()
;
});
The problem is that when a user selects an item, it does not update and it keeps showing the default value as selected.
But when I go to Chrome Console and execute the above code JQuery(document)..., then it works fine.
I am assuming it is due to that the initialization needs to execute after page loads completely. So, What I did is the following instead of the above:
window.addEventListener("load", function(){
jQuery(document).ready(function($) {
$('.ui.dropdown')
.dropdown()
;
});
});;
It worked. Dropdown list updates selection immediatly. However, when I click on Submit, I and page reloads, the selection is lost.
The drop down is being used as a filter to table. Having the selection gets lost on submit, makes filter unusable.
What is the best way to go around this.
Use AJAX to submit the form so the page doesn't refresh.
<select>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
no extra js, css required,
edit: autocomplete attribute is not required because it is the default

Categories

Resources