Data-target modal is not working in html - javascript

When i am clicking on login option ,my login popup model is not displaying ,where is the problem in this code.
<li> <span class="glyphicon glyphicon-log-in"></span>LogIn</li>
data target code is here,after clicking on login tnis model is called for pop up but pop model is not coming.
<!-- Modal content-->
<div class="modal-dialog">
<div class="modal-content col-md-8">
<div class="modal-header">
<h4 class="modal-title"><i class="icon-paragraph-justify2"></i> User Login</h4>
</div>
<form method="post" id="login_form" action="<?= site_url('api/login') ?>" >
<!--?php echo form_open('welcome/checkLogin'); ?-->
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-10">
<label>Username *</label>
<!--input type="text" name="email"/-->
<input type="text" id="username" name="email" class="form-control required">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-10">
<label>Password *</label>
<!--input type="password" name="pass"/-->
<input type="password" id="password" name="pass" class="form-control required" value="">
</div>
</div>
</div>
</div>
<div class="error" id="logerror"></div>
<!-- end Add popup -->
<div class="modal-footer">
<input type="hidden" name="id" value="" id="id">
<!--input type="submit" value="Login" name="submit"/-->
<button type="submit" id="btn-login" value="Login" name="submit" class="btn btn-primary pull-right btn-xs">Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

You must assign an ID "myModal" to the modal content.
<div id="myModal" class="modal-dialog">
This allows your JavaScript to target the div.

I had the same issue from an ul with many li, i found a good answer by someone in js:
if ($(e.target).is('[data-toggle=modal]')) {
$($(e.target).data('target')).modal()
}
from link: bootstrap modal not working in dropdown menu

Related

Code below the textarea getting inside the textarea as its value?

I am implementing this Bootstrap Modal on click of a button. But on clicking the button, the modal appears on screen, every field is correctly displayed except the textarea field, the button code and file upload code below it, is getting inside of the textarea, why is it so ? Please check the following code for the Modal:
<div class="modal fade" id="myModalContactt" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content tuningModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body tuningModalTwo">
<form action="/tuningModal/" style="padding: 0% 7%;">
<h3>GET IN TOUCH WITH US</h3>
<div class="row form-group">
<label>Your Name(required)</label>
<input type="text" class="form-control" id="name" name="name"/>
</div>
<div class="row form-group">
<label>Email(required)</label>
<input type="email" class="form-control" id="email" name="email"/>
</div>
<div class="row form-group">
<label>Phone Number</label>
<input type="text" class="form-control" id="phone" name="phone"/>
</div>
<div class="row form-group">
<label>Car Brand</label>
<input type="text" class="form-control" id="carBrand" name="carBrand"/>
</div>
<div class="row form-group">
<label>Model</label>
<input type="text" class="form-control" id="model" name="model"/>
</div>
<div class="row form-group">
<label>Your Message</label>
<textarea rows="10" class="form-control" id="message" name="message"/>
</div>
<div class="row form-group">
<label>Upload your software(Note:please upload in zip filetype)</label>
<input type="file" class="form-control-file" name="softUploadFile"/>
</div>
<div class="row form-group" style="margin-top:20px;margin-bottom:20px">
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
And below is the code for the Button on which I've set the data-target and data-toggle to this Modal:
<div id="red_div2" class="row ">
<h2 id="redtext2" class="wow bounceInRight">QUESTIONS OR INTEREST IN ANY OF OUR PRODUCTS? </h2>
<button type="button" class="btn btn-info" id="AskYourQuestion" data-toggle="modal" data-target="#myModalContactt">
ASK YOUR QUESTION
<i class="fa fa-angle-double-right"></i>
</button>
</div>
And it is appearing like this in the browser:
Close textarea tag
<textarea rows="10" class="form-control" id="message" name="message"></texarea>
<textarea rows="10" class="form-control" id="message" name="message"/>
textarea is not a self-closing tag (also called a void element).
Self-closing tags allow the the close part on the tag itself, eg <input/> while non-self-closing tags must have an explicitly matching close tag, eg:
<textarea></textarea>
these are typically where there may be content inside the tag, eg
<textarea>appears inside the textarea</textarea>
More info from the spec: https://www.w3.org/TR/html5/syntax.html#writing-html-documents-elements
and https://stackoverflow.com/a/3558200/2181514

How to update records from popup form in laravel

Buttons in navbar.blade.php file
Each time when user click on edit button then its correspondence ID should be pass through the this Form...
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Edit</button>
and this button is redirected to this form
<form action="-----------" method="POST" role="form" class="form-horizontal">
{{ csrf_field() }}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Nav ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nav_id" placeholder="nav id" readonly="" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Nav Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nav_name" placeholder="nav name" />
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="col-sm-2 control-label">
Nav Details</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nav_description" placeholder="nav details" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm">
Submit</button>
</div>
</div>
</form>
So how to update the record of selected ID from .blade file and what should i write here in navbarController.php and in its route file
public function edit(Request $request) {
}
}
It's the solution
add "edit-button" class to your button and using alt attribute to keep $ID
<button class="edit-button btn btn-primary" alt="<?=$ID?>" data-toggle="modal" data-target="#myModal">Edit</button>
add hidden field to keep $ID to your form
<input id="id" type="hidden" name="id" value=""/>
Using #section and #yield to write jquery code to adjust value for hidden fields when the user click on edit button. let's see https://laravel.io/forum/09-02-2014-using-section-and-yield
#section('javascript')
$("body").on('click','.edit-button',function(){
var activeEditId = $(this).attr('alt');
$("#id").val(activeEditId);
)});
#stop

How to Upload both file and data using ajax , jquery and spring mvc

I want to upload the data along with the file using ajax , query and Spring MVC Below is the my modal pop up . please can anyone help me with this out.
<!-- Modal -->
<div id="fileUpload" 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" id="changeTitle">
<spring:message code="ulearn.summary.mastercourse.addreference" />
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="masterCourseItemForm" onsubmit="return false;">
<div class="form-group">
<label class="control-label col-sm-2" for="name"><spring:message code="ulearn.summary.name.label"/></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="" value="" autofocus="true">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd"><spring:message code="ulearn.summary.description.label"/></label>
<div class="col-sm-10">
<textarea type="text" class="form-control" id="description" placeholder="" value=""></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">File Type</label>
<div class="col-sm-10">
<select name="Select" class="selectpicker form-control" id="stateLst">
<option value="">Select</option>
<c:forEach items="${fileList}" var="option">
<option value="${option}">
<c:out value="${option}"></c:out>
</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Upload</label>
<div class="col-sm-10">
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn btn-default btn-file" style="width: 468px;"><span>Choose file</span><input type="file" multiple/></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary" id="submit" data- backdrop="static">
<spring:messagecode="ulearn.btn.upload.label"/>
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"> <spring:messagecode="ulearn.btn.cancel.label"/>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
You probably want to take a look at multipart/form-data posts.
Here is some additional info on the topic:
http://hmkcode.com/spring-mvc-upload-file-ajax-jquery-formdata/
Upload file + Form Data + Spring MVC + JQuery

I tried to use bootstrap modal class to make a popup signup form but popup doesn't work

I tried to use bootstrap modal class to make a popup signup form and when i press the signup button window just fade and reload that's it. popup doesn't work. I'm using bootstrap 3.3.6. please help.
this is the sign up button code:
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default navbar-btn sign" data-toggle="modal" data-target="#signupForm">Sign up</button>
</form>
I am using the signup button inside a nav (navbar-inverse).
this is the popup form code:
<div class="modal fade" id="signupForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="">
<span>×</span>
</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">User Name :</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Email :</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Confirm Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I coded this popup form code below the signup button code and that means it's inside the navbar
Please check this:
I have created a JS Fiddle and it is working fine here.
---- https://jsfiddle.net/DTcHh/19115/
You must include Bootstrap js and css file to your project in order to make it work.
Here your working code
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default navbar-btn sign" data-toggle="modal" data-target="#signupForm">Sign up</button>
</form>
<div class="modal fade" id="signupForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="">
<span>×</span>
</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">User Name :</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Email :</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Confirm Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
I fixed the problem. I find out the cause is that button type should be button not submit. I changed the button type to button then it worked.

Bootstrap modal submit doesn't pass the variable

I have a simple modal login form. When the form closes I want to display the email in a separate div .
The problem is that the text in the div doesn't change. I debugged the code and it looks like when I step through the text changes, but when it gets out of the submit function it gets changed back. What am I doing wrong? tnx!
Here's the code:
<div class="container">
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" id="testButton">Open modal</button>
<div id="emailTarget">Email ends up here</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Please type some text</h4>
</div>
<div class="modal-body">
<form class="form-signin" id="signIn">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$("#signIn").submit(function(event) {
$("#emailTarget").html($("#inputEmail").val());
});
</script>
If you do not want to POST, just return false:
$('#myModal').modal('hide');
return false;
Check example

Categories