After beating my head against this problem for 3 days, I think I finally narrowed it down to an issue with the bootstrap modal button. I have modal button popup that displays a partial view, and a select list within that. When I create it to a separate page, it displays with no issues:
dropdownlistworking
However, when I put the exact same code into my modal button view, the dropdown stops displaying my items except for the default:
dropdownlistnotworking
Here is the code on the modal button:
Main view:
<div>
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#addDoc">Add Doc</button>
<div id="addDoc" class="modal fade"">
<div class="modal-dialog" role="document">
<div class="modal-content">
#Html.Partial("_AddDoc", new Slingshot.Models.OrgDocsModel { OrgId = #Model.First().OrgId})
</div>
<div>
</div>
</div>
Partial:
<div class="modal-header">
<h4 class="modal-title" id="addDocLabel">Add Document</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
</div>
<div class="modal-body">
<form enctype="multipart/form-data" asp-action="_AddDoc">
<input type="hidden" asp-for="OrgId" />
<div class="form-group">
<label asp-for="DocName" class="control-label"></label>
<input asp-for="DocName" class="form-control" />
</div>
<div class="form-group">
<label asp-for="DocTypeName" class="control-label"></label>
<select asp-for="DocTypeName" asp-items="#Model.DocTypesList" class="form-control" >
</select>
</div>
<div class="form-group">
<input asp-for="UploadFile" class="custom-file-input" id = "OrgDoc">Choose File</input>
<label class="custom-file-label" for="OrgDoc" class="form-control"</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
<button type="Submit" value="Submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
Related
I'm using Spring boot and Thymeleaf.I have a modal form to create/edit information:
<div class="modal" id="myModal" th:fragment="content">
<form th:object="${object}">
<div class="modal-dialog">
<div class="modal-content">
<!– Modal Header –>
<div class="modal-header row">
<div class="col-md-10">
<h4 class="modal-title">Create/Edit</h4>
</div>
<div class="col-md-2">
<button type="button" class="close" data-dismiss="modal"
style="float: right;">×</button>
</div>
</div>
<!– Modal body –>
<div class="modal-body">
<div class="form-group">
<label for="ID">ID</label>
<input type="text" class="form-control" id="ID" placeholder="ID"
th:field="*{id}">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="name"
th:field="*{name}">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" placeholder="Description"
th:field="*{description}">
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Date"
th:field="*{date}">
</div>
<div class="form-group">
<label for="other">Other</label>
<input type="text" class="form-control" id="other" placeholder="other"
th:field="*{other}">
</div>
</div>
<!– Modal footer –>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
I can't place inside my index.html because the Object is null. When user click button to crate/edit user, the modal will pop-up with data.
The button is:
<button type="button" class="btn btn-success" onclick="triggerModal(null)">Create New</button>
My Jquery function:
function triggerModal(id) {
if(id==null){
var url = "/create";
}else{
var url = "/create/{"+id+"}";
}
$('#content').load(url);
$('#myModal').modal({show:true});
}
The controller:
#GetMapping(value = {"/create","/create/{id}"})
public String createObject(Model theModel, #PathVariable(required = false)String id){
if(id!=null){
Optional<Object> object= objectRepository.findById(id);
if(object.isPresent()){
theModel.addAttribute("Object", object.get());
return "/form-modal::content";
}
}
theModel.addAttribute("Object", new Object());
return "/form-modal::content";
}
This is the div tag I place on the index.html
<div id="content"></div>
I have successfully insert modal to HTML body with data loaded but the modal is not displayed correctly.
I have solved it.
Just place the th:fragment inside the modal class:
<div >
<form th:object="${object}" th:fragment="content">
<div class="modal-dialog">
<div class="modal-content">
<!– Modal Header –>
<div class="modal-header row">
<div class="col-md-10">
<h4 class="modal-title">Create/Edit</h4>
</div>
<div class="col-md-2">
<button type="button" class="close" data-dismiss="modal"
style="float: right;">×</button>
</div>
</div>
<!– Modal body –>
<div class="modal-body">
<div class="form-group">
<label for="ID">ID</label>
<input type="text" class="form-control" id="ID" placeholder="ID"
th:field="*{id}">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="name"
th:field="*{name}">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" placeholder="Description"
th:field="*{description}">
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Date"
th:field="*{date}">
</div>
<div class="form-group">
<label for="other">Other</label>
<input type="text" class="form-control" id="other" placeholder="other"
th:field="*{other}">
</div>
</div>
<!– Modal footer –>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
And change the div tag in the index file:
<div class="modal" id="myModal"></div>
I am trying to open multiple modals on a single page but their ids are conflicting with each other. I got this code from bootstrap-4 documentation,
Modal 1 is works fine but modal 2 fails to work, I wants that both of them to work separately
code:
modal1
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
Add New
</button>
<!-- Modal Add Owner -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Owner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('owner.store') }}">
#csrf
<div class="form-group">
<label for="">Add Owner Name</label>
<input type="text" name="owner_name" class="form-control" id="" placeholder="Owner Name">
</div>
<input type="submit" name="submit" class="btn btn-primary" value="submit">
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
modal2:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Show
</button>
<!-- Modal Show Owner-->
<div class="modal fade" id="exampleModalshow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">View Owner</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('owner.update', $owner->id) }}">
#csrf
#method('PATCH')
<div class="form-group">
<label for="">Owner Name</label>
<input type="text" name="owner_name" class="form-control" value="{{ $owner->owner_name }}">
</div>
<input type="submit" name="submit" class="btn btn-primary" value="submit">
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Change data-target on the second modal button to match the modal id
<button data-target="#exampleModalshow">
... rest of the code
</button>
I have form to submit signon inside a modal. It is not allowing me to enter email and password. When I click on the form element it is closing.What am I doing wrong here.It is supposed to enter the email and password to submit
Form Modal
<div id="click_signin" class="modal New-Bouncing-popup" role="dialog">
<div class="modal-dialog bounce animated modal-ku">
<!-- Modal content-->
<div class="modal-content1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body row">
<div class="col-sm-6 left-side">
<h1>Surplus<br>Forex.</h1>
<p>Build your profitable forex career.</p>
<br>
<p>Login with social media</p>
<a class="fb" href="#" target="_blank">Login With Facebook</a>
<a class="tw" href="#" target="_blank">Login With Twitter</a>
</div><!--col-sm-6-->
<div class="col-sm-6 right-side">
<h1>Login</h1>
<p>Fill the below given fields to Login</p>
<br/>
<!--Form with header-->
<div class="form">
<div class="form-group">
<label for="form2">Your email</label>
<input type="text" id="form2" class="form-control">
</div>
<div class="form-group">
<label for="form4">Your password</label>
<input type="password" id="form4" class="form-control">
</div>
<div class="text-xs-center frm_grp">
Login
</div>
</div>
<!--/Form with header-->
</div><!--col-sm-6-->
</div>
</div>
</div>
</div>
I want to create a new post in my Database using modal box, and all works fine but when I use the button edit to update the post using modal dialog doenst work, I just want to take the cod('id') via a button from my view and pass to the modal.
the button code:
<a class="tip" id="test" data-toggle="modal" data-target="#myAlert2" title="Modifier">
and this is my code modal dialog
<div id="myAlert2" class="modal hide" id="modal-edit">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">×</button>
<h3>Modifier un espace de travail</h3>
</div>
<div class="modal-body">
<p>
<div class="form--field">
<label class="labgroupe">Sujet *</label>
<input type="text" name="sujet" id="sujet" value="" class="form--element" placeholder="Sujet..." >
</div>
<div class="form--field">
<label class="labgroupe">Objectif du groupe</label>
<input type="text" name="objectif" class="form--element" placeholder="Objectif..." >
</div>
<div class="form--field" >
<label class="labgroupe">Plan d'action:</label>
<textarea class="form--element textarea" name="textarea" placeholder="Description..."></textarea>
</div>
#endforeach
</p>
</div>
<div class="modal-footer">
<input type="submit" value="Validate" id="button2" class="btn btn-success">
<a data-dismiss="modal" class="btn" href="#">Cancel</a> </div>
</div>
Any help plz ?
you cannot use 2 id's on the same div
<div id="myAlert2" class="modal hide" id="modal-edit">
changed to
<div id="myAlert2" class="modal hide">
and use same id on data-target="#myAlert2"
Modal button:
On your script, add this:
$("#test").click(function () {
$('#id').val($(this).data('id'));
});
Then add an input in the modal called #id.
<input type="text" id="id">
i want to show a popup message about to login the user. here iam using ajax function.
if the success: part is true i want to show the popup message. pls help me thanks in adv.
<button data-toggle="modal" data-target="#squarespaceModal" class="btn green btn-success" onclick="going('<?echo $user_id;?>','<?echo $event_id;?>')">Going</button>
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
function going()
function going(user_id,event_id)
{
$.ajax({
url: "<?echo base_url()?>events/event_going",
type: 'post', // HTTP METHOD
data:
{user_id:user_id,event_id:event_id },
success: function(data)
{
if(data='true')
{
//pls check & add any suggsns
$('#squarespaceModal').dialog(data);
}
// document.getElementById('mysubmit').value="active";
}
});
}
controller
public function event_going()
{
$user_id=$this->input->post('user_id');
$event_id=$this->input->post('event_id');
$temp=$this->session->userdata('user');
$going=$this->EM->is_going($event_id,$user_id);
$going1=$this->EM->is_going1($event_id,$user_id);
if($temp=="")
{
echo "Please log in";
}
else if($going==$user_id)
{
echo "Already confirmed as going..";
}
else if($going1==$user_id)
{
echo "Are you sure you want to change... Press ok to continue";
$this->EM->event_updation($event_id,$user_id);
}
else
{
$data=array('event_id'=>$event_id,'ev_going'=>$user_id);
$this->EM->eventgoing($data);
}
}
What you can do is, instead of showing a new popup, you can get the content of popup from ajax. What i mean is, on click of a button, call ajax function, get the content and have a div inside the modal-body, for example
<div class="dynamic-data">
</div>
and in ajax success function do like this
success: function(data){
$(".dynamic-data").html(data);
}