I'm using bootstrap 5 i have one modal for login and register but but there is two bootstrap tabs inside one modal and i want to display tab as per button click but this is not working.
When i click on login button then inside modal login tab should be active and if i click on register button then inside modal register tab should be active.
Giving this error in console:-
Uncaught TypeError: Cannot read property 'show' of null
My Code:
$('.register-btn').click(function() {
$('#loginModal').modal('show');
var triggerEl = document.querySelector('[data-bs-target="#register"]')
bootstrap.Tab.getInstance(triggerEl).show()
})
$('.login-btn').click(function() {
$('#loginModal').modal('show');
var triggerE2 = document.querySelector('[data-bs-target="#login"]')
bootstrap.Tab.getInstance(triggerE2).show()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for your efforts!
You can trigger the click to simulate clicking the tab.
$(".register-btn").click(function () {
$("#register-tab").trigger("click");
$("#loginModal").modal("show");
});
$(".login-btn").click(function () {
$("#login-tab").trigger("click");
$("#loginModal").modal("show");
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I'm trying to open a Bootstrap (5.2) modal with a specific tab selected. The tab should be determined by which button is clicked on the home page ("Login" or "Sign Up").
I tried previous solutions, but they mostly use older versions of Bootstrap.
I'm a complete noob to JavaScript, so if your solution includes it please explain like I'm five.
Here's my HTML:
<!-- Log In / Sign Up Buttons -->
<div class="container">
<div class="row">
<div class="col">
<!-- Sign Up Button -->
<button id="signup-button" type="button" href="#pills-signup" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Sign Up
</button>
<!-- Log In Button -->
<button type="button" href="#pills-login" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Log In
</button>
</div>
</div>
</div>
<!-- Log In Modal -->
<div class="modal fade" id="login-signup-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body">
<!-- Tab Headers -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Log In</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-signup-tab" data-bs-toggle="pill" data-bs-target="#pills-signup" type="button" role="tab" aria-controls="pills-signup" aria-selected="false">Sign Up</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="pills-tabContent">
<!-- Log In Tab -->
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<form method="POST">
<!-- form-label & form-control = bootstrap form layouts -->
{{ log_in_form.email.label(class="form-label") }}
{{ log_in_form.email(class="form-control") }}
<br>
{{ log_in_form.password.label(class="form-label")}}
{{ log_in_form.password(class="form-control") }}
<br>
{{ log_in_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
<!-- Sign Up Tab -->
<div class="tab-pane fade" id="pills-signup" role="tabpanel" aria-labelledby="pills-signup-tab">
<form method="POST">
{{ sign_up_form.email.label(class="form-label") }}
{{ sign_up_form.email(class="form-control") }}
<br>
{{ sign_up_form.password.label(class="form-label")}}
{{ sign_up_form.password(class="form-control") }}
<br>
{{ sign_up_form.confirm_password.label(class="form-label")}}
{{ sign_up_form.confirm_password(class="form-control") }}
<br>
{{ sign_up_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
You can utilize bootstrap events. I think the javascript part is short, so basically listening for event show.bs.modal of the modal (see bootstrap docs) and get the reference to the invoking button event.relatedTarget (see bootstrap docs) which had in the first place an data-tab-id="ID-OF-TAB" attribute. We take that attribute and get a reference to the tab. Finally we use the tabs method show to show the correct tab.
const myModal = document.getElementById('login-signup-modal')
myModal.addEventListener('show.bs.modal', (ev) => {
var invoker = ev.relatedTarget
var selected_tab = invoker.getAttribute("data-tab-id")
const tab_btn = document.querySelector('#' + selected_tab)
const tab = new bootstrap.Tab(tab_btn)
tab.show()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<!-- Log In / Sign Up Buttons -->
<div class="container">
<div class="row">
<div class="col">
<!-- Sign Up Button -->
<button id="signup-button" data-tab-id="pills-signup-tab" type="button" href="#pills-signup" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Sign Up
</button>
<!-- Log In Button -->
<button type="button" data-tab-id="pills-login-tab" href="#pills-login" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Log In
</button>
</div>
</div>
</div>
<!-- Log In Modal -->
<div class="modal fade" id="login-signup-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body">
<!-- Tab Headers -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Log In</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-signup-tab" data-bs-toggle="pill" data-bs-target="#pills-signup" type="button" role="tab" aria-controls="pills-signup" aria-selected="false">Sign Up</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="pills-tabContent">
<!-- Log In Tab -->
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<form method="POST">
<!-- form-label & form-control = bootstrap form layouts -->
{{ log_in_form.email.label(class="form-label") }} {{ log_in_form.email(class="form-control") }}
<br> {{ log_in_form.password.label(class="form-label")}} {{ log_in_form.password(class="form-control") }}
<br> {{ log_in_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
<!-- Sign Up Tab -->
<div class="tab-pane fade" id="pills-signup" role="tabpanel" aria-labelledby="pills-signup-tab">
<form method="POST">
{{ sign_up_form.email.label(class="form-label") }} {{ sign_up_form.email(class="form-control") }}
<br> {{ sign_up_form.password.label(class="form-label")}} {{ sign_up_form.password(class="form-control") }}
<br> {{ sign_up_form.confirm_password.label(class="form-label")}} {{ sign_up_form.confirm_password(class="form-control") }}
<br> {{ sign_up_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I want to create a sign in - signup form, using html <form> and bootstrap4 modal. Every thing is okay but when I click the submit button, the modal is dismissed, so the error of data validate format can not be show for clients. Now how can I keep the modal displayed when I click submit button?
<a class='nav-link account-active' href='#' data-toggle="modal" data-target="#my_account"></a>
<div class="modal fade" id="my_account" style='height: auto' tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="flase">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="nav nav-tabs w-100" role="tablist">
<li class="nav-item w-50">
LOGIN
</li>
<li class="nav-item w-50">
SIGN UP
</li>
</ul>
</div>
<div class="tab-content" style="font-size: 14px;">
<div id="login" class="tab-pane active" style='height: 550px'>
<form method='post' action=''>
<h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel">WELCOME BACK!</h4>
<h6 class="text-center text-muted">Login to your account</h6>
<div class="error" id='signin_err'>{signin_err}</div>
<div class='section-input'>
<div class="mt-2">Email</div>
<input type="text" class="form-control w-100 my-2" name="" autofocus>
</div>
<div class='section-input'>
<div class="mt-2">Password</div>
<input type="text" class="form-control w-100 my-2" name="">
</div>
<div class='section-input'>
<button class="btn btn-primary w-100 my-3" type="submit" name="signin_btn">LOGIN</button>
</div>
</form>
<div class="forgot text-center mb-3">forgot your password?</div>
</div>
<div id="register" class="tab-pane" style='height: auto'>
<h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel" style='text-transform: uppercase;'>It's as easy as sunday morning</h4>
<h6 class="text-center text-muted">Sign up now</h6>
<div class='error' id='signup_err'>{signup_err}</div>
<div class='section-input' style="margin-top: 70px">
<div class="mt-2" id='signUp_name'>Name</div>
<input type="text" class="form-control w-100 my-2" name="name" autofocus >
</div>
<div class='section-input'>
<div class="mt-2" id='signUp_mail'>Email</div>
<input type="text" class="form-control w-100 my-2" name="mail" id='mail' >
</div>
<div class='section-input'>
<div class="mt-2" id='signUp_psd'>Password</div>
<input type="text" class="form-control w-100 my-2" name="psd" >
</div>
<div class='section-input'>
<div class="mt-2" id='confirm_psd'>Confirm password</div>
<input type="text" class="form-control w-100 my-2" name="psd_cf" >
</div>
<div class='section-input'>
<button class="btn btn-primary w-100 my-3" style='height:48px;margin-bottom:100px;border-radius: 0' type="" name="signup_btn">SIGN UP</button>
</div>
<div style='height:70px'></div>
</div>
</div>
</div>
</div>
</div>
I have no idea how your backend is being implemented, but based on your code, my guess is that your page is being refreshed every time you click submit because of the empty action. I see no other way that the modal will close.
You'll need to submit via AJAX if you want to display any validation without refreshing.
How do I display a Login Modal using Bootstrap having included a that needs to be done but still it is not displaying.
enter code here
How do I make this modal to display given the code below:
BOOTSTRAP LINKS:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
MODAL STYLING:
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color: white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
Navigation Bar Containing the Link so as to display the Login Modal:
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> </a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Departments</li>
<li>Clubs & Sports</li>
<li>Contact US</li>
<li><a data-toggle="modal" href="#login">Login</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="register.php"><img alt="" src="images/person2.png">
Sign Up</a></li>
<li><img alt="" src="images/login2.png">Login</li>
</ul>
</div>
</div>
</nav>
Container For the Login Modal:
<div class="container">
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding: 35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>
<span class="glyphicon glyphicon-lock"></span> Login
</h4>
</div>
<div class="modal-body" style="padding: 40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>
Username</label> <input type="text" class="form-control"
id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label> <input type="text" class="form-control"
id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block">
<span class="glyphicon glyphicon-off"></span> Login
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left"
data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>
Not a member? Sign Up
</p>
<p>
Forgot Password?
</p>
</div>
</div>
</div>
</div>
Javascript code to enable the Login Modal:
<script>
$(document).ready(function(){
$("#login").click(function(){
$("#myModal").modal();
});
});
</script>
Your Javascript is trying to address elements that don't exist because they do not have an id, or the wrong id.
Try this.
Add an id to the link that is supposed to bring up the modal.
<li><img alt="" src="images/login2.png">Login</li>
This is not required, but I would recommend changing the id of your modal to be more descriptive.
<div class="modal fade" id="loginModal" role="dialog">
Now adjust your JavaScript to address the correct elements.
$(document).ready(function(){
$("#loginLink").click(function(){
$("#loginModal").modal();
});
});
I'm building a form which gets displayed as a pop up modal when a user clicks "Create Test Case" button. The modal itself contains two tabs. One tab displays form fields for test details and the second tab displays form fields for test properties.
In the first tab "tests" if the user fills out the form and clicks "add test" then the form should trigger back end php processing and write data to MYSQL database. The modal form should close as well. On the other hand, if user clicks the "Properties" tab, it should allow them to add properties dynamically and also insert into mysql database. It should reload the properties page every time a new property is added.
The problem I'm having is that every time I click "Add" on the property page, the Modal window closes.
Can someone tell me how i can get the modal window to reload the properties form page and prevent the modal window from closing each time the Add button is pressed?
Here is my code:
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Test Management <small></small></h3>
</div>
</div>
<div class="clearfix"></div>
<!-- start real -->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Add Test Cases <small><?php echo $filenamePrefix; ?></small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1
</li>
<li>Settings 2
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<p class="text-muted font-13 m-b-30">
Add new test cases to current project.
</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-lg">Create new test case</button>
<!-- begin modal-->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Create new test case</h4>
</div>
<div class="modal-body">
<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active">Tests
</li>
<li role="presentation" class="">Properties
</li>
</ul>
<form name="variables" id="variables" class="form-horizontal form-label-left" action=<?php echo htmlspecialchars($_SERVER[ "PHP_SELF"]); ?> method="post" enctype="multipart/form-data">
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
<div class="form-group">
<div class="row">
<div class="span col-md-2">
<label>Test Details</label>
<select class="form-control" name="rest_method">
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUST">PUT</option>
</select>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-5">
<button type="submit" class="btn btn-primary">Cancel</button>
<button id="addTests" type="submit" value="true" name="addTests" class="btn btn-success">Add Test</button>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
<div class="form-group">
<div class="row">
<div class="span col-md-4">
<label>Property Name</label>
<input type="text" class="form-control" id="variable_name" name="variable_name">
</div>
<div class="span col-md-2">
<label>Add Properties</label>
<button type="submit" class="btn btn-success" id="addVariables" value="true" name="addVariables">Add</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- end MyyContentTab-->
</div>
</div>
<!-- end modal body -->
</div>
</div>
<!-- end modal -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
I'm using bootstrap modal to provide a functionality to user to select any desired item and than add the selected item to parent/current page.
I've created an example on fiddle for better and faster understanding.
In eg: there are 2 items (three li for each). When user selects certain item, the modal must close, its price (which is fetched from another page) must be displayed on the square box and a new box must be added to the left side (with current glyphicon).
I somehow understand this must be achieved using jQuery but am blank as to how should I proceed further. I'm totally new to both modals and jQuery so if any one has any idea about it?
UPDATE:
I did try my hands on it and I'm able to fetch the selected item from modal and add to the parent/current view but it doesn't work properly for the second time(second box). Here's updated fiddle. and here's the updated code:
jQuery:
var itemLayout = '<div class="square"><div class="content"><div class="table"><div class="table-cell numbers"><div class="glyphicon glyphicon-plus prices"></div></div></div></div></div>';
$(document).ready(function() {
$(".layout").append(itemLayout);
$(".square").click(function() {
$("#myModal").modal('show');
});
fetchPrice();
});
function fetchPrice() {
var users = $('.prices');
$(document).on('click', '.fetch', function() {
var stylesheet = $(this).text();
console.log(stylesheet);
$("#myModal").modal('hide');
users.removeClass('glyphicon glyphicon-plus').text(stylesheet);
$(itemLayout).insertAfter('.square');
$(".square").click(function() {
$("#myModal").modal('show');
});
});
}
HTML:
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="layout"></div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<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">Select to display</h4>
</div>
<!-- modal-header end -->
<div class="modal-body">
<ul class="list-group">
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Chinese</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Hakka Noodles </div>
<div class="pull-right">
<div class="fetch">Price1</div>
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Others</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Masala papad </div>
<div class="pull-right">
<div class="fetch">Price2</div>
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
OLD
Here's the code snippet:
<div class="row">
<div class="col-md-4 col-md-offset-4">
<!-- Button HTML (to Trigger Modal) -->
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
<div class="glyphicon glyphicon-plus"></div>
</div>
</div>
</div>
</div>
<!-- square end -->
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<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">Select to display</h4>
</div>
<!-- modal-header end -->
<div class="modal-body">
<ul class="list-group">
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Chinese</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Hakka Noodles </div>
<div class="pull-right">
Price
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
<li class='list-group-item list-group-item-info clearfix'>
<div class="pull-left">Others</div>
</li>
<li class='list-group-item clearfix'>
<div class="pull-left">Masala papad </div>
<div class="pull-right">
Price
</div>
</li>
<li class='list-group-item clearfix'>
<div class=""><b>Ingredients</b></div>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery to open modal:
$(document).ready(function() {
$(".square").click(function() {
$("#myModal").modal('show');
});
});
If you use bootsrap best way make
<div class="square" data-toggle="modal" data-target="#myModal">
for call modal, end do modal header like this
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
On this case u don't need write any jquery its will be work "from box"