Bootstrap modal not working in safari / windows - javascript

This Bootstrap modal is not working in Safari but there is no issues in Chrome and Firefox.
I also have a javascript select. When I remove the javascript select the popup works in Safari but otherwise its not working.
<div class="modal fade" role="dialog" id="fav-popup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-fav-header">
<h2 class="txt-pop-head">Add category</h2>
<button class="close" data-dismiss="modal"><span class="fa fa-close"></span></button>
</div>
<div class="modal-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control input-control" placeholder="">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<div class="select-box select-gray">
<label>Category</label>
<select class="form-control input-control wide custom">
<option value="">Product Category</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="btn-group-custom">
<input type="button" class="btn btn-draft" value="Cancel">
<input type="button" class="btn btn-next" value="Create">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-sm-8 col-md-9">
<h2 class="txt-profile-head">Add Category</h2>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="row-adj">
<div class="products-block">
<div class="category" style="background:#fff;">
<a href="#fav-popup" data-toggle="modal" data-target="#fav-popup"><button type="button" class="btn">+</button>
<h3>Create a Category</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var bodyTag = document.getElementsByTagName("body")[0];
bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
</script>
<script src="js/SelectBox.js"></script>
<script>
$(function() {
$("select.custom").each(function() {
var sb = new SelectBox({
selectbox: $(this),
height: 150,
width: 200,
});
});
});
</script>

Related

function setInterval() not working properly while on second call

I have a button name Assign agent button when i click on button a loader will appear for 3 second(with timeInterval function) and then after 3 second a modal will appear.
The issue is when i click on assign button the loader appear and then disappear after 3 second but on second time when I click on assign button the loader appear but suddenly disappear in 1 or 2 second.
Why the loader is not taking 3 second same as first click?
<button type="button" value="edit" name="edit-btn" class="spin-modal clear-cookie"
onclick="spiner();"> Assign
Agent</button> <div class="loader-spiner-outer class-none-view">
<div class="loader-box">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div> <div class="modal" id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Assign Lead</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<form action="#" class="custom-add-form" method="post" style="padding:22px 0px 5px 0px;">
<div class="col-12">
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Assign Agent</label>
<select class="form-control" id="sel1">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Four</option>
</select>
</div>
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Other</label>
<input type="text" class="form-control" id="name">
</div>
<div class="col-12 no-pad-left-right">
<div class="form-group text-right">
<div class="submit-m-div">
<input type="submit" value="Submit" name="submit" class="add-cm-btn no-margin-top-btm">
<span class="skip-icon" style="bottom: 0px;"><i class="fas fa-angle-double-right"></i></span>
</div>
</div>
</div>
</div>
</form>
<!-- Modal footer -->
<!-- <div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
javascript/jquery code
function spiner() {
$(".loader-spiner-outer.class-none-view").removeClass("class-none-view");
setInterval(function() {
$(".loader-spiner-outer").addClass("class-none-view");
}, 800);
setTimeout(function() {
$("#myModal").show();
}, 900);
};
$(".close").click(function() {
$("#myModal").hide();
});

Try this:
$(".close").click(function ()
{
$("#myModal").hide();
});
function spiner()
{
$(".loader-spiner-outer").addClass("class-none-view");
setTimeout(function ()
{
$(".loader-spiner-outer").removeClass("class-none-view");
setTimeout(function ()
{
$("#myModal").show();
}, 3000);
}, 3000);
}
.loader-spiner-outer
{
display: none;
}
.loader-spiner-outer.class-none-view
{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" value="edit" name="edit-btn" class="spin-modal clear-cookie"
onclick="spiner();"> Assign
Agent</button> <div class="loader-spiner-outer">
<div class="loader-box">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div> <div class="modal" id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Assign Lead</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<form action="#" class="custom-add-form" method="post" style="padding:22px 0px 5px 0px;">
<div class="col-12">
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Assign Agent</label>
<select class="form-control" id="sel1">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Four</option>
</select>
</div>
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Other</label>
<input type="text" class="form-control" id="name">
</div>
<div class="col-12 no-pad-left-right">
<div class="form-group text-right">
<div class="submit-m-div">
<input type="submit" value="Submit" name="submit" class="add-cm-btn no-margin-top-btm">
<span class="skip-icon" style="bottom: 0px;"><i class="fas fa-angle-double-right"></i></span>
</div>
</div>
</div>
</div>
</form>
<!-- Modal footer -->
<!-- <div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
And don't use setInterval(() => {}), because it is a repeating timer.
Use setTimeout(() => {}), because this will only run once.
'setInterval' vs 'setTimeout'

Clear file contents after uploading a file in modal popup

I am having some trouble in clearing file contents when file upload is done via Ajax.Below is my modal popup html code,
<div class="modal-header bg-blue">
<div class="desktop_view">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
<div class="mobile_view">
<button type="button" class="btn btn-default btn-xs pull-right bold" data-dismiss="modal">Close</button>
<h4 class="modal-title"id="myModalLabel">Upload Document</h4>
</div>
</div>
<div class="modal-body">
<div class="upload-container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="form-group fileinput-button">
<label class="col-lg-6 col-md-6 col-sm-6 col-xs-12 control-label">Select Your Document:</label>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"><input type="file" multiple name="file[]" accept="image/*" id="files" ></div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="preview-container">
<div class="col-lg-12">
<div class="clearfix"></div>
<div id="dvPreview" class="preview-container"></div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Upload" class = "btn btn-info" id= "save" />
<button type="button" class="btn btn-danger myclose" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
After submitting the form,the previous image content still exists.I have tried below methods.
$('#myModalone').find('form')[0].reset();
$(function () {
// Delegating to `document` just in case.
$(document).on("hidden.bs.modal", "#myModalone", function () {
//$('.modal-body').find('input').val('');
$(this).removeData('bs.modal');
});
});
It doesn't works.Please provide a solution.

Give an id to the form and call form reset function as:
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Also you can use js as:
document.getElementById('formId').reset();
To reset a div:
$('#div_id input[type="text"]').val('');
$('#div_id input[type="file"]').val('');
Find the working fiddle here:
http://jsfiddle.net/Safoora/Car52/174/

Two model Popup in bootstrap webpage

enter image description here
I have used two Popup model when I click on signIn button in my website one signIn Popup model will open... If user is not registered it will ask for Create Account ... I have given one href in signin which will open another popup and close first one... The same thing is with second popup window.When user is in second popup there is another href to signIn...
Code For SignIn Popup Model Start
<div class="modal fade" id="signIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="colorStrips">
<div class="col-sm-3 colorStrips1">
</div>
<div class="col-sm-3 colorStrips2">
</div>
<div class="col-sm-3 colorStrips3">
</div>
<div class="col-sm-3 colorStrips4">
</div>
</div>
<div class="modal-body model-padding">
<!-- <div class="col-sm-6"> -->
<div class="form-group form-area">
<input type="email" class= "form-control form-field" id="popupSignInEmail" placeholder="Email Address">
</div>
<div class="form-group form-area">
<input type="password" class= "form-control form-field" id="popupSignInEmail" placeholder="Password">
</div>
<div class="one-block-item form-inline">
<div class="checkbox col-sm-6">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="col-sm-offset-2 col-sm-4">
Forgot Pasword ?
</div>
</div>
<div class="radial-signin">
<center>
<a type="submit" href="#signInData" class="btn btn-signin wow fadeInUp" data-wow-duration="1200ms" data-wow-delay="300ms" data-role="popup-link wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="800ms">SIGN IN</a>
</center>
</div>
<!-- </div> -->
<div class="toggleTosignUp">
<center>
<span class="textofsignin">Are you a new user ? <a onclick="launch_modal('#signUp');" data-toggle="modal" href="#signUp" id="signUpClicked" class="markuptext-S">Create Account</a>
</center>
</div>
</div>
</div>
</div>
</div>
Code for signup popup start
<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="colorStrips">
<div class="col-sm-3 colorStrips1">
</div>
<div class="col-sm-3 colorStrips2">
</div>
<div class="col-sm-3 colorStrips3">
</div>
<div class="col-sm-3 colorStrips4">
</div>
</div>
<div class="modal-body model-padding">
<!-- <div class="col-sm-6"> -->
<div class="form-group form-area">
<input type="email" class= "form-control form-field" id="popupSignInEmail" placeholder="Email Address">
</div>
<div class="form-group form-area">
<input type="password" class= "form-control form-field" id="popupSignInEmail" placeholder="Password">
</div>
<div class="one-block-item form-inline">
<div class="checkbox col-sm-6">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="col-sm-offset-2 col-sm-4">
Forgot Pasword ?
</div>
</div>
<div class="radial-signin">
<center>
<a type="submit" href="#signInData" class="btn btn-signin wow fadeInUp" data-wow-duration="1200ms" data-wow-delay="300ms" data-role="popup-link wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="800ms">SIGN IN</a>
</center>
</div>
<!-- </div> -->
<div>
<center class="toggleTosignIn">
<span class="textofsignin">Already have an account ?<a onclick="launch_modal('#signIn');" href="javascript:void(null);" class="markuptext-S" id="signInClicked">Sign In</a>
</center>
</div>
</div>
</div>
</div>
</div>
I have tried Following JS :
function launch_modal(id) {
$('.modal').modal('hide');
$('#'+id).modal('show');
$('body').css({"padding-right" : "0 !important"});
}
$('#signIn').on('show.bs.modal', function (e) {
$('body').addClass('test');
});
$('#signUp').on('show.bs.modal', function (e) {
$('body').addClass('test');
});
Now comes to the problem:
When I go to second model first is closed. But When I want to come at First Model i.e. a signIn Popup from Second popup i.e. a signUp Popup It can't do that..

remove the # from the selector:
function launch_modal(id) {
$('.modal').not(id).modal('hide');
$(id).modal('show');
}

Modal in bootstrap JSF Java EE project

I want to show a bootstrap modal in my JSP login page when the password is wrong. Otherwise the user is redirected (through faces-config.xml) to another JSP page. The username and password are validated in a managedbean that calls a remote bean.
I tried this with JavaScript but cannot get the desired result. This is my JSP login:
<%-- BEGIN: Modal window --%>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<%-- END : Modal window --%>
<br>
<div class="container-fluid">
<div class="row">
<div class="panel-heading" align="center" style="opacity: 0.5;">
<h2><b><font color="white">RedCine<small><font color="white">Administrativo</font></small></font></b></h2>
</div>
</div>
<div class="row">
<div class="panel-body col-md-4 col-sm-6 col-xs-12 col-md-offset-4 col-sm-offset-3 " align="center">
<div class="container-fluid" style="margin-top: 1%; margin-bottom: 40%;">
<div class="panel panel-success" align="left">
<div class="panel-heading form-group">
<b><font color="white">
Ingrese usuario y contraseña</font> </b>
</div>
<div class="panel-body" >
<h:form id="PersonaBean">
<div class="form-group">
<label for="username">Usuario</label>
<h:inputText value="#{persona.userName}" required="required" styleClass="form-control" />
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<h:inputSecret value="#{persona.password}" required="required" styleClass="form-control" />
</div>
<h:commandButton id="btn_entrar" value="Entrar" action="#{persona.login()}" styleClass="btn btn-large btn btn-success btn-lg btn-block" style="width: 100%; font-size:1.1em;"/>
</h:form>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer" align="center"><font style="color: #111">Copyright #2014 example.com, All Rights Reserved. </font></div>
</div>
</body>
<script>
$(document).ready(function(){
$('#btn_entrar').click(function(){
var resultado;
if(resultado = 0)
{
$("#myModal").modal("show");
}
});
});
</script>
</html>
How can I do that?

your variable "resultado" is not getting set to any value, set the "debugger" keyword above "if(resultado = 0)" and check for that value.

Bootstrap Modal pop up displays only the first record.

I want to edit the records for that i am using twitter bootstrap modal pop up. I have a view-product page which contains a button to open a modal pop up but at present time the code i am using displays only one record on view-product page, but my database contains more records and further more if i click the edit icon it displays only the first record and also i want to know how to get the id on the next page i.e. editproducts.php I have spend much of the on this topic but did not solve it please help by giving suggestions. Thanks....
view-product.php
<tbody role="alert" aria-live="polite" aria-relevant="all">
<?php
$query="SELECT * FROM tbl_product";
$sql_q=mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
?>
<tr class="odd">
<td class=" sorting_1"><?=$prodName?></td>
<td class="center "><?=$prodPrice?></td>
<td class="center "><?=$prodtype?></td>
<td class="center "><?=$prodQty ?></td>
<td class="center "><a class="btn btn-success" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-search-plus "></i> </a> <a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail-<?=$productid?>" href="#myModalDetail"> <i class="fa fa-edit"></i> </a> <a class="btn btn-danger" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-trash-o "></i> </a></td>
</tr>
<div class="modal fade" id="myModalDetail-<?=$productid?>">
<?php require "edit_products.php"; ?>
</div>
<? } ?>
</tbody>
edit_products.php
<?php
$productid=$_REQUEST[$productid];
$query="SELECT * FROM tbl_product WHERE pid='".$productid."'";
$sql_q=mysql_query($query);
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
}
?>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodName ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price" value="<?=$prodPrice?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Quanity</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productQty" placeholder="Enter product Quantity">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Upload Product Image</label>
</div>
</div>
<div class="col-lg-6">
<input type="file" name="productImg">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Description</label>
</div>
</div>
<div class="col-lg-6">
<textarea class="form-control" name="productDesc" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

Categories

Resources