Is it possible to show data with button modal datatable from database inside textarea? My case is, the button modal inside datatable area, and when I click the button it appears modal and data inside textarea. This is my code :
->addColumn('detail', function ($data) {
$html = '
<div class="d-flex justify-content-center">
<button class="btn btn-light-success mx-2 btn-sm detail" '. $data->id .' ">
<i class="fa fa-search"></i>
Detail
</button>
</div>
';
return $html;
})
And this is a view :
<form action="{{route('accelerate-setting.submit_comment')}}" method="POST" class="load-form" enctype="multipart/form-data">
#csrf
<input type="hidden" name="id" value="">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Detail Comment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form form-control" name="detail_comment" rows="6" disabled></textarea>
</div>
<button type="submit" name="action" class="btn btn-primary font-weight-bold btn-block" value="submit">Submit</button>
</div>
Thanks, hope u understand what my case is. I'm really confusing!
Related
I have modal to submit comment entered by the user. But when the user enters submit button, the form-backing-object reaches the post end point but the field entered using the modal is empty.
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Comment for approval</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post">
<textarea rows="5"
placeholder="Comment..."
th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"
class="form-control"
name="processApproveComment">
</textarea>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
<input th:type="hidden" th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"/>
</div>
</div>
</div>
</div>
The place where modal is called is
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
The flow is: after the form is complete, the user clicks "Approve" button, which triggers the modal, the user then enters the comment and presses "Approve" (from the modal) and the form is submitted.
Could someone PLEASE suggest what is wrong here as I am not receiving just the processApproveComment (which is set using the modal) when other properties from the parent form are available.
The post endpoint is :
#PostMapping("/release/process")
public String releaseProcess(Principal principal,
Model model,
#ModelAttribute("answeredQuestionnaire") AnsweredQuestionnaire answeredQuestionnaire){
// answeredQuestionnaire does not have processApproveComment, but all others are available.
}
Update:
<div class="modal-body">
<form action="" method="post">
<textarea rows="5"
placeholder="Comment..."
th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"
class="form-control"
name="processApproveComment">
</textarea>
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
</form>
</div>
Because button tag not in form tag
Move button tag to form tag
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>
Im new in vue js and trying to explore it. I have button and that button has an event click, once the button clicked, it will add an input field in my specific div.
Vue file
<div class="item form-group">
<div class="col-md-6 col-sm-6 ">
<button type="button" class="btn btn-secondary" #click="addSchedule"><i class="fa fa-plus"></i>Add Schedule</button>
</div>
</div>
<div class="item form-group added-schedule">
<div class="col-md-4 col-sm-4 ">
<button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add qqqqqqq</button>
s
</div>
<div class="col-md-4 col-sm-4 ">
<button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add asdasd</button>
</div>
<div class="col-md-4 col-sm-4 ">
<button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add wwwwwww</button>
</div>
addSchedule(e){
e.preventDefault();
return false;
},
Scenario
User clicked the Add schdule,imagine the 3 buttons is my input fields
NOTE: The user can Add Schedule as many as the user like.
Question: How do I append the input fields in my class added-schedule once the button clicked?
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);
}