JQuery - increment and identification - javascript

I only have notions of JQuery and again and that's why today I need help...
I am doing some kind of online editor to create my newsletters.
On this page: http://emaildesigner.fr/test/index.html and here the js: http://emaildesigner.fr/test/_scripts/newsletter-buildertest.js
The concept is classic: we click on "Add" -> header then + insert and this adds an editable block.
for the moment there is only one block but the concept is to put several and to use them once or several times each.
The blocks are constructed this way:
<div class="sim-row" data-id="1">
<div class="sim-row-header1">
<div class="sim-row-header1-nav">
<table width="700" align="center" cellpadding="0" cellspacing="0" class="hide" bordercolor="#FFFFFF" bgcolor="#fff" style="background-color:#fff; border: 10px solid #ffffff;">
<tr>
<td class="sim-row-header1-nav-logo sim-row-edit sim-row-header1-slider-left-link" data-type="image"><img src="http://static3.qcnscruise.com/images/newsletters/fr/2017-12-20-test/art/pdt01.jpg" alt="" width="700" /></td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td class="sim-row-header1-slider-left-link"><span style="color:#555759; font:bold 20px arial; margin:0; text-align:left;" class="texte1">TEXTE</span></td>
</tr>
</table>
<!--[if !mso]><!-->
<div class="ShowMobile" style="font-size:0;max-height:0;overflow:hidden;display:none; background-color:#FFF;">
<table border="0" cellspacing="0" cellpadding="0" align="center" width="100%">
<tr>
<td><img src="http://static3.qcnscruise.com/images/newsletters/fr/2017-12-20-test/art/_pdt01.jpg" width="100%" border="0" style="display:block; background-color:#ffcecb; font:bold 14px arial; color:#000000; text-align:center;" alt="" /></td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td class="sim-row-header1-slider-left-link"><span style="color:#555759; font:bold 20px arial; margin:0; text-align:left;" class="texte1">TEXTE</span></td>
</tr>
</table></div>
</div>
</div>
</div>
with the #media screen, I display either a mobile version or a PC version.
I need the publisher to update at the same time the PC code and mobile code (because the mobile code is hidden and it will do everything in duplicate ... since the resolution is too large).
in general, my blocks consist of 1 to 3 images, 1 to 6 texts and 1 to 3 links
I explain my problem to you :
currently when we click on "Add" -> header then + insert and this adds an editable block.
this block is composed of an image + link and a text + link
when I update the text (I put the code js only on the block text) it updates the part pc and the moving part but if I redo: "Add" -> header then + insert and well it me put the text of the block preceding what is logical.
$(document).on('keyup','#inputtexte1',function(){
var txt = $(this).val();
$('.texte1').text(txt);
});
So I think the solution would be to be able to identify each of the blocks and each of the parts to update in the same block and that the publisher only updates the mobile parts and pc of the block concerned (for the texts, the links, and images).
I can be found a beginning of track .... after still, it is necessary that I manage to adapt it ...
var count=1;
$("#add").click(function(){
var html="<div id='bloc"+count+"'><input type='text'></input></div>";
$("#newBloc").append(html);
count++;
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="add">Add Addresses</button>
<div id="newBloc"></div>
</body>
</html>
I hope to have been clear.
Can you help me?
Sorry for my bad English but I'm french
thank you in advance

#ZeroCool I was try to help you and make a Example for your solution Live link for example I hop you get the concept for this issue.
Add a Parent Id and onClick get parentId Then keyup call bay this parentId with your class name. Like ..
After set a parent id ...
// Global veritable dicelear
let userId = '';
$(document).on('click', '.edit', function() {
userId = '#'+ $(this).closest('ul').attr('id') + ' .userName'; //use #parentId
$('#edit-from').modal('show') // Open your edit from ...
});
$( "#memberNameGet" ).keyup(function(){
$(userId).text($(this).val());
});
let Id=1;
let userId = '';
$("#add").click(function(){
let userName = $('#newUserName').val()
let html='<ul id="user'+Id+'">'+
'<li><span class="userName">'+userName+'</span>'+
'Edit '+
'</ul> </li>';
$("#newBloc").append(html);
Id++;
$('#newUserName').val('')
});
$(document).on('click', '.edit_user', function() {
userId = '#'+ $(this).closest('ul').attr('id') + ' .userName';
$('#myModal').modal('show')
// console.log(userId);
});
$( "#memberNameGet" ).keyup(function(){
// alert(userId);
$(userId).text($(this).val());
});
span, a {
display: inline-block;
margin-right:15px;
}
input {
padding: 5px 15px }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</br>
<div class="col-md-6">
<input type="text" id="newUserName">
<button id="add" class="btn btn-success"> Add Member</button>
</div>
</br></br>
<div class="col-md-5">
<div id="newBloc"></div>
</div>
<!-- Add member modal -->
<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Edit Member</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="nameValue">Member Name</label>
<input type="text" class="form-control" id="memberNameGet" placeholder="Type Member Name ">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Updated</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Related

How to activate pop up modal if button is clicked using jquery?

I've created a table where my data can be ACTIVE or INACTIVE and this is already working, my goal is I just want to add a function that when I clicked the button to make my data INACTIVE, it will pop up a modal and has a message. But I don't know how will I make it pop up.
I've found a similar post but it cannot be applied to mine, because what I did has a different approach and I think mine is easier for myself to understand and will or might complicate things for me if I try to use the link. Thanks in advance
Here is my code in my JQUERY
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
var id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0';
}
$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {
selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass(
"btn-danger"),
selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass(
"btn-success"),
selector.text("Active"));
// location.reload();
}
});
});
// For status Active/Inactive
function StatusChange() {
$("#dataTables").DataTable().destroy();
$("#tb_body").empty();
var status = $('#stats').val();
if (status) {
$.ajax({
type: "POST",
url: "../forms/form_statusForspecs_dtbl.php",
data: {
status: status
},
success: function(data) {
$("#dataTables").append(data);
$("#dataTables").DataTable();
}
});
}
}
// Startup
$(document).ready(function() {
$('#stats').change(function() {
$(this).val();
});
$("#stats").trigger('change');
});
#import https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
.statusButton {
color: white;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 20px;
white-space: nowrap;
padding: 2px 12px;
font-size: 12px;
line-height: 1.42857143;
border-radius: 4px;
user-select: none;
}
</style>
</head>
<!-- this is the modal that I want to pop up -->
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</h4>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="submit" id="submitBtn" class="btn btn-danger pull-right" data-toggle="modal" data-target="#maModal" onclick="window.location.href='#'">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<br>
<br>
<a href="../forms/form_toolspec.php">
<button class="btn btn-primary pull-right">
<span class="fa fa-plus-circle"></span>
Add Record
</button>
</a>
</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<br>
<!-- Status -->
<div>
<form action="GET">
<div class="form-group">
<label> Table group by Status </label>
<select name="selector_id" onchange="StatusChange()" style="width:200px;" class="show-menu-arrow form-control" id="stats">
<!-- <option value="" disabled> Select Status </option> -->
<option value="1" selected> ACTIVE </option>
<option value="0"> INACTIVE </option>
</select>
</div>
</form>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Table of Tools Specification
</div>
<!-- /.panel-heading -->
<div class="panel-body" id="showStatus">
<div class="table-responsive">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th>
<center> Status </center>
</th>
</tr>
</thead>
<tbody id="tb_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my form_statusForspecs_dtbl.php AJAX call in function StatusChange()
<?php
include ("../include/connect.php");
$status = $_POST['status'];
$con->next_result();
$result = mysqli_query($con, "CALL GetToolSpecByStatus('$status')");
while ($row = mysqli_fetch_assoc($result))
{
echo '<tr>';
echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>";
echo '<td>'.$row['model_num'].'</td>';
echo '<td>'.$row['model_num_val'].'</td>';
echo '<td>'.$row['no_of_days'] .'</td>'; ?>
<td>
<center>
<p data-id="<?php echo $row['ID'];?>"
class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>">
<?php echo ($row['status'])? 'Active' : 'Inactive'?>
</p>
</center>
</td>
<?php
echo '</tr>';
}
?>
Here is my form_btnStats.php AJAX call for button to change status and will be recorded in sql database
<?php
include('../include/connect.php');
$user_id=$_POST['id'];
$newStatus=$_POST['status'];
$query = "UPDATE tools_spec SET status='$newStatus' WHERE ID = '$user_id'";
$result = mysqli_query($con, $query);
if($result === TRUE)
{
echo json_encode(1);
}
else
{
echo json_encode(0);
}
?>
As you only need to show popup when making button inactive you add code to show modal inside if(status == '1'){ and use $("#reason_for_modal").modal('show'); to show same . Also , put some condition around your ajax call so that it will execute only when status is 1 .Nextly ,if user click on deactivate button inside modal you can create one click event handler for same and pass value to ajax from there.
Demo Code :
var id;
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0'; //change to 0
$("#reason_for_modal").modal('show'); //show modal
}
//enter only when status is 1
if (status == '1') {
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {*/
selector.removeClass("btn-danger").addClass(
"btn-success");
selector.text("Active");
/*}
});*/
}
});
//if activate btn is click
$("#submitBtn").on("click", function() {
var reason = $("#reason").val(); //get reason..
$("#reason_for_modal").modal('hide'); //hide modal
console.log(id)
$("#reason").val("")//empty textarea
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: 0,
reason:reason
},
success: function(data) {*/
//change class and text
$("p[data-id=" + id + "]").removeClass("btn-success").addClass("btn-danger")
$("p[data-id=" + id + "]").text("Inactive")
/*}
});*/
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- this is the modal that I want to pop up -->
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Table of Tools Specification
</div>
<!-- /.panel-heading -->
<div class="panel-body" id="showStatus">
<div class="table-responsive">
<table width="50%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th>
<center> Status </center>
</th>
</tr>
</thead>
<tbody id="tb_body">
<tr>
<td>abc</td>
<td>14</td>
<td>1</td>
<td>5</td>
<td>
<center>
<p data-id="1" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
<tr>
<td>abc1</td>
<td>14</td>
<td>11</td>
<td>51</td>
<td>
<center>
<p data-id="2" class="status_checks statusButton btn-danger">
Inactive
</p>
</center>
</td>
</tr>
<tr>
<td>ab3</td>
<td>13</td>
<td>13</td>
<td>51</td>
<td>
<center>
<p data-id="3" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
<textarea id="reason"></textarea>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="button" id="submitBtn" class="btn btn-success pull-right"> De-Activate</button>
<button type="button" class="btn btn-danger pull-right" data-toggle="modal" data-dismiss="modal">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Option 1: Simple CSS class assignment
Example: https://www.w3schools.com/w3css/w3css_modal.asp
Option 2: Use jQuery.show() / jQuery.hide()
function StatusChange() {
...
if (status == 0) {
// This should use # / id
jQuery('div.modal').show();
}
}
Option 3: Use jQuery UI dialog
Example: https://jqueryui.com/dialog/

How to show pop-up on button click in JSP

I have the following page in jsp .
The code of the page is as following :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
function check()
{
var uname=document.scan.elements[0].value
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" method="POST" action="enroll.jsp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="submit" value=" Enroll " name="btnEnroll"></p>
</form>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>
When I click on Enroill button I want to show a pop-up like as following with an image source tag .
How can I do this on Jsp ? Any advice is of great help .
Here is code snippet using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Online Demonstration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Online Demonstration</div>
<form name="scan" method="POST" action="enroll.asp">
<div class="panel-body">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<div class="row">
<div class="form-group">
<label class="col-md-5">Please input your name:</label>
<div class="col-md-5">
<input type="text" class="form-control" id="UserName"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-5">If you want to enroll 2 fingers, please check the box.</label>
<div class="col-md-5">
<input type="checkbox" name="chk2Finger" value="2">
</div>
</div>
</div>
<input class="btn btn-default" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<!-- Modal code goes here-->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class=row>
<img src="" class="img-thumbnail col-lg-2">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<script type="text/javascript">
function inStrGrp(src,reg){
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
$(document).ready(function(){
$('input[type="submit"]').click(function (e) {
e.preventDefault();
var userName = document.getElementById('UserName').value;
var bError=false
if (userName.length==0)
{
window.alert("Name is required.\n")
return false
}
if (userName.indexOf("\\")>=0)
bError=true
if (inStrGrp(userName,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
$('#myModal').modal('show');
return true
});
});
</script>
</body>
</html>
Hope it will help.Thanks
With pure its not possible to show pop up and show image on that pop up.You can do it with jquery UI dialog .
And it will be great if you use bootstrap framework which have modal where you can insert anything you want.

Why is this code working in jsfiddle but not in my html page

I've never had this problem before. I have this code that I am trying to implement into my application http://jsfiddle.net/TC6Gr/119/
I have tried
Pasting all the jsfiddle code in a new page without my code, it doesn't work.
Wrap/unwrap the script in $(document).ready... it doesn't work.
When I put an alert in the click function, the alert displays but doesn't display the modal?
You are including JQuery 1.10.2, JSFiddle is using jquery 2.1.0
Also JSFiddle is including the following libraries
bootstrap.min.css
-(http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css)
bootstrap.min.js
-(http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js)
bootstrap-datetimepicker.min.js
-(https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js)
bootstrap-datetimepicker.css
-(https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css)
So try including...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
<link src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css"></link>
<link src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
<script src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js"></script>
<script src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
So try starting here, its not fully complete but I can get the modal to show up with this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
<link src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css"></link>
<script src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js"></script>
<link src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
<style>
body {
padding-top:20px;
}
.start-date {
padding-left:0;
}
.end-date {
padding-right:0;
}
.date>input:hover,.date>input:hover {
cursor:pointer;
}
.time-help {
margin-top:40px;
}
#media(max-width:767px) {
.start-date {
padding:0 0 5px 0;
}
.end-date {
padding:5px 0 0 0;
}
.time-help {
margin-top:10px;
}
}
</style>
<script>
$(function(){
$('#time-start').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
autoclose: true,
pickerPosition: "bottom-left",
maxView: 3,
minuteStep: 1,
endDate: new Date()
})
$('#time-end').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
autoclose: true,
pickerPosition: "bottom-left",
maxView: 3,
minuteStep: 1,
endDate: new Date()
})
$("td#my_clickable_cell").bind("click",function() {
$('#myModal').modal('show');
});
});
</script>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<td >Name</td>
<td>Sunday</td>
<td>Monday</td>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td id="my_clickable_cell" data-value="1">16:00-18:00</td>
<td id="my_clickable_cell" data-value="1"></td>
</tr>
<tr>
<td>Name2</td>
<td id="my_clickable_cell" data-value="3"></td>
<td id="my_clickable_cell" data-value="3">16:00-18:00</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="row">
<form class="form-group col-sm-12" role="form">
<label class="col-sm-2 control-label">Select Times</label>
<div class="col-sm-8">
<div class="col-sm-6 start-date">
<div class='input-group date' id="time-start">
<input type='text' class="form-control" placeholder="Start Time" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<div class="col-sm-6 end-date">
<div class='input-group date' id="time-end">
<input type='text' class="form-control" placeholder="End Time" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<p class="help-block time-help">Select start and end times</p>
</div>
<div class="col-sm-2">
<button class="btn btn-default" type="submit">Submit</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
more than a few errors in your code
1. the modal pop-up is not hidden on page load - try hiding that with css first.
2. the jquery function(datetime-picker) may not work for you. - you can however just use and html includes a datetime picker for you
check this link for more info on that
try those and let me know what error you have on your developer's console - I assume you are using chrome browser.

Want to blur the background on twitter-bootstrap modal load. The javascript code is not working

Site.Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<script src="/js/jquery-2.1.0.js" type="text/javascript" ></script>
<script src="/js/bootstrap.js" type="text/javascript" ></script>
<script src="/Scripts/Site.js" type="text/javascript"></script>
<link rel="Stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="Stylesheet" href="Styles/Site.css" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
font-family: Vani;
}
</style>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
WebForm2.aspx (part of the file)
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<asp:Content ID="WebForm2" ContentPlaceHolderID="MainContent" runat="server">
<!-- 1.) About SBAIMS Modal -->
<div class="modal fade" id="aboutsbaims" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<table class="table-borderless" width=100%>
<tr>
<td style="width:40%" align="center">
<img src="sbalarge.png" class="img " alt="SBA_Logo" height=100 width=180>
</td>
<td style="width:60%" align="left">
<h2>About&nbsp S.B.A.I.M.S.</h2>
</td></tr>
</table>
</div>
<div class="modal-body">
<h5 style="text-align:justify; line-height:22px;"><b>Shantinath Book Agency Inventory Management System (S.B.A.I.M.S.)</b>
</div>
<div class="modal-footer black">
<h5 align="left" style="color:#E2E2E2;">&copy All Copyrights Reserved By: Shantinath Book Agency<span style="display:inline-block; width:60px;"></span><button type="button" id="mdl1okay" class="btn btn-info" data-dismiss="modal" style="line-height:0.6; background-color:#196CA3">&nbsp&nbsp<b> Okay! </b>&nbsp&nbsp</button></h5>
</div>
</div>
</div>
</div>
<!-- 2.) Logout Confirmation Modal -->
<div class="modal fade" id="logoutconfirm" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Logout Confirmation</h4>
</div>
<div class="modal-body">
<h5> Are you sure you want to Logout ? </h5><br />
</div>
<div class="modal-footer">
<asp:Button CssClass="btn btn-primary" Text="Yes" runat="server" ID="yeslogout" onclick="yeslogout_Click"></asp:Button>
<button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- ********************************** End of all Modals ********************************** -->
<div id="mycontent">
<div class="table-responsive">
<table class="table table-borderless table-condensed black table-responsive" style="position:fixed; width:100%; z-index:2;">
<tr>
<td width="24%"><img src="sbalogo.png" style="vertical-align:middle; padding-top:3px; padding-left:3px" class="img img-responsive" alt="SBA_Logo" height=55 width=100></td>
<td width="52%" align="center"><p style="color:#E2E2E2; vertical-align:middle; font-size:35px;">S.B.A.I.M.S.</p></td>
<td width="24%" align="right" style="padding-top:15px">
<ul class="uldl">
<li class="dropdown" style="padding-bottom:8px; padding-right:10px">
<span class="glyphicon glyphicon-cog" style="color:#E2E2E2; font-size:30px; vertical-align:middle;"></span>
<ul class="dropdown-menu" style="padding-top:10px; padding-bottom:10px;">
<li align="left" class="ddli" id="li1"><a data-toggle="modal" href="#changepassword">Change Password</a></li>
<li align="left" class="ddli" id="li2">User Manual</li>
<li align="left" class="ddli" id="li3"><a data-toggle="modal" href="#aboutsbaims">About &nbsp S.B.A.I.M.S.</a></li>
<li align="left" class="ddli" id="li4"><a data-toggle="modal" href="#logoutconfirm">Logout</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="nav">
<ul class="nav nav-tabs nav-justified prntnvtabs">
<li class="active"><span class="glyphicon glyphicon-plus" style="font-size:20px;"></span>&nbsp Add to Inventory</li>
<li><span class="glyphicon glyphicon-arrow-up" style="font-size:20px;"></span>&nbsp Update Inventory</li>
<li><span class="glyphicon glyphicon-eye-open" style="font-size:20px;"></span>&nbsp View Inventory</li>
<li><span class="glyphicon glyphicon-print" style="font-size:20px;"></span>&nbsp Create Invoice</li>
<li><span class="glyphicon glyphicon-list-alt" style="font-size:20px;"></span>&nbsp View Invoice</li>
</ul>
<div class="tab-content table-responsive" style="margin-top:140px;">
.
.
.
.
.
</asp:Content>
and now the Site.js file in which there is the js code
/* blur on modal open, unblur on close */
$('#aboutsbaims').on('show.bs.modal', function () {
$('#mycontent').addClass('blur');
});
$('#aboutsbaims').on('hide.bs.modal', function () {
$('#mycontent').removeClass('blur');
});
Please help me with this code. Why isn't my background not getting blurred?
actually when i put a class in the div tag of id mycontent it does get blurred but i want it to get blurred on modal show and hide event. Any help will be greatly appreciated. I am new to programming. please help.
/* blur on modal open, unblur on close */
$(function () {
$('#aboutsbaims').on('show.bs.modal', function () {
$('#mycontent').addClass('blur');
});
$('#aboutsbaims').on('hide.bs.modal', function () {
$('#mycontent').removeClass('blur');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Take a look at this: How to make modal dialog with blur background using Twitter Bootstrap?
body.modal-open .supreme-container{
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}
You might have to change a few things in your code but this should work :D. Good luck
Your code looks correct. You can see similar code working without issue here: http://www.bootply.com/74705 (click on bottom panel to see the blur effect triggering).
The best way to debug this is put breakpoint on the .addClass and .removeClass lines using Chrome Developer Tools. This will tell you if events are actually firing or not. Possible reasons this may not be working...
The blur class is not properly defined.
You might need to apply blur class at higher level (for example, try applying to document.body and see if works). This might be reason if your events are firing but has no effect.
You might need to wrap your event handle in JQuery's doumentReady event. This is very likely cause if your events are not firing at all. See http://api.jquery.com/ready/.
If none of these helps then I suggest you create a stripped down version of HTML and JS and post it at JSBin.com and someone would be able to help much more quickly.

How to display a div over other containts of an html page?

I am new to html and css,I have created a div that contains citynames.
I am trying to display that div on a button click.But when i click on button then that div gets hidden behind the next section of my page.
here is the image it looks like:
but i want to display that div over the section bellow that div and not behind. For getting more idea how i want ot display see askme.com and click on 'rest of india' dropdown button.
here is my html code:
<!--start SearchBox section-->
<section id="searchbox"style="background:white">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12">
<form style="">
<center>
<div id="SearchBoxBorder" style="background:white;border-style:soli;border-radius:5px;margin-top:20px;width:800px;">
<table id="mytable" >
<td style="width:300px;background:white;">
<center> <div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="I am looking for"
style="border-width:5px;background:white; margin-top:17px; margin-left:15px; margin-right:10px;width:300px;
border-style:solid;border-width:5px;border-color:#eee;font-family:Arial,Helvetica,sans-serif;height:42px; font-size:18px;">
</div></center>
</td>
<td style="width:50px ;text-align:right;background:white;"> <center><strong> in</strong></center> </td>
<td style="width:400px;background:white;">
<center>
<div class="input-group" style="position: relative;">
<input type="text" class="form-control" placeholder="in locality"
style="border-width:5px;background:white; margin-top:2px; margin-left:10px; margin-right:20px;width:;font-size:18px;
border-style:solid;border-width:5px;border-color:#eee;font-family:Arial,Helvetica,sans-serif;height:42px;">
<div class="input-group-btn" >
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownBtn"
style="background:white;border-top-width:5px;border-right-width:5px;border-bottom-width:5px;border-left-width:1px;
border-color:#eee;height:42px;border-radius:0px;text-align:center;color:black; margin-right:20px;margin-top:2px;">Select<span class="caret"></span></button>
<!--City dropdown -->
<div class="SearchCities" id="dialog" title="Basic dialog" >
<div id="outer" style="">
<div id="innerLeft" style="">
<h5 >North India:</h5>
<ul class="city" type="none";>
<li><a>Delhi</a></li>
<li><a>Agra</a></li>
<li><a>Shrinagar</a></li>
<li><a>Noida</a></li>
<li><a>Himachal</a></li>
<li><a>Patna</a></li>
</ul>
</div>
<div id="innerRight" style="">
<a class="close">×</a>
<h5>West India:</h5>
<ul class="city" type="none";>
<li><a>Mumbai</a></li>
<li><a>Pune</a></li>
<li><a>Nashik</a></li>
<li><a>Kolhapur</a></li>
<li><a>Osmanabad</a></li>
<li><a>Ahamdabad</a></li>
</ul>
</div>
</div><!--/outer-->
</div><!--/SearchCities-->
</div><!-- /btn-group -->
<button type="button" class="btn btn-primary" style="margin-right:20px;"><i class="icon-search" style="font-size:20px"></i> Search</button>
</div><!-- /input-group -->
</center>
</td>
</table>
</center>
</form>
</div><!--/col-lg-12-->
</div><!--/row-->
</div><!--/end of container-->
</section>
<!--End of SearchBox section-->
and following is my css for displaying that div:
.SearchCities {
float: right;
position:absolute;
margin-top:3px;
top: 100%;
right:20px;
}
so please help me ,and suggest any solution to achive above mentioned. .
Thank u in advence.
I have added .searchCiries{z-index:1;} and here is my output:
I dont want the city names come out of the container div.So please suggest any correction
In css add a z-index value like say : z-index:100
You should put
z-index: 9990;
in your div's class. This CSS option will bring your div to the front (unless value of z-index of other elements is more than 9990, the maximum value is 9999).
http://www.w3schools.com/cssref/pr_pos_z-index.asp

Categories