I have the append div listing some values and I need to edit them using a modal, I already can edit but the content appended in list doesn't change at all.
My JS:
var creatingModal = false;
canvas.on('mouse:up', function (){
creatingModal = true;
jQuery('#modal').modal('show').trigger('shown');
//get values from obs form
jQuery(document).on("click", "#submitObservacao", function(e){
e.preventDefault();
var denteNumero = jQuery("#dente").val();
var procedimentos = jQuery("#procedimentos").val();
var observacao = jQuery("#observacoes").val();
jQuery("#anotacoes").append(
'<div class="thumbnail mark" id="itemObs" data-toggle="modal" data-target="#EditMod"><b>Dente</b>:<span id="anotacaoDente" class="anotDent">'+ denteNumero +'</span> <i class="fa fa-trash f-right" id="removerNow" aria-hidden="true"></i> <br> <b>Procedimentos:</b> <span id="anotacaoProcedimentos">'+ procedimentos +'</span><br> <b>Observações:</b> <span id="anotacaoObservacao">'+ observacao +'</span><br> </div>'
);
//refreshing values
jQuery(denteNumero).val('');
jQuery("#dente").val('');
jQuery(procedimentos).val('');
jQuery(observacao).val('');
jQuery("#observacoes").val('');
jQuery('#modal').modal('hide').unique();
});
jQuery(document).on("click", "#removerNow", function(e){
e.preventDefault();
jQuery(this).parent().remove();
var canvas_objects = canvas._objects;
console.log(canvas_objects);
if(canvas_objects.length !== 0){
var last = canvas_objects[canvas_objects.length -1]; //Get last object
canvas.remove(last);
canvase.renderAll();
}
});
});
jQuery(document).on("click", ".mark", function(e){
e.preventDefault();
var numDente = jQuery(this).find("#anotacaoDente").html();
var numObservacoes = jQuery(this).find("#anotacaoObservacao").html();
var numProcedimentos = jQuery(this).find("#anotacaoProcedimentos").html();
jQuery("#obsModalEdit input[name=dente]").val(numDente);
jQuery("#obsModalEdit select[name=procedimentos]").val(numProcedimentos);
jQuery("#obsModalEdit textarea[name=observacoes]").val(numObservacoes);
//Edit on click
jQuery(document).on("click", "#submitEditar", function(e){
e.preventDefault();
var numDente = jQuery("#denteEdit").val();
var numProcedimentos = jQuery("#procedimentosEdit").val();
var numObservacoes = jQuery("#observacoesEdit").val();
//Edit the append contente here
jQuery('#EditMod').modal('hide');
});
});
})();
The HTML that i want to edit the content is generated by the append in JS above, thank you.
The HTML
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 ">
<canvas id="c" width="840" height="590" style="border:1px solid #aaa"></canvas>
</div>
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 ">
<div style="display: inline-block; margin-left: 10px">
<button style="visibility: hidden;" id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br>
<button style="visibility: hidden;" id="clear-canvas" class="btn btn-info">Clear</button><br>
<div id="drawing-mode-options">
<label style="visibility: hidden;" for="drawing-mode-selector">Mode:</label>
<select style="visibility: hidden;" id="drawing-mode-selector">
<option>Pencil</option>
<option>Circle</option>
<option>Spray</option>
<option>Pattern</option>
<option>hline</option>
<option>vline</option>
<option>square</option>
<option>diamond</option>
<option>texture</option>
</select><br>
<div class="thumbnail od-thumb">
<label for="drawing-line-width">Expessura da Linha:</label>
<span class="info">2</span><input type="range" value="2" min="0" max="150" id="drawing-line-width"><br>
<label for="drawing-color">Cor da Linha:</label>
<input type="color" value="#005E7A" id="drawing-color"><br>
</div>
<label style="visibility: hidden;" for="drawing-shadow-color">Shadow color:</label>
<input style="visibility: hidden;" type="color" value="#005E7A" id="drawing-shadow-color">
<label style="visibility: hidden;" for="drawing-shadow-width">Shadow width:</label>
<span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-width">
<label style="visibility: hidden;" for="drawing-shadow-offset">Shadow offset:</label>
<span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-offset">
</div>
</div>
<!-- close col-panel first-->
</div>
<!-- fecha row -->
</div>
<!-- jumbotron -->
<div class="row">
<div class="">
</div>
<div class="col-lg-12">
<div class="tron" id="anotacoes">
</div>
</div>
</div>
<!-- Modal -->
<div id="modal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-backdrop="static" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Adicionar Região</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="obsModal">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Dente:</label>
<div class="col-md-4">
<input id="dente" name="textinput" type="text" placeholder="Número do dente" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Procedimentos:</label>
<div class="col-md-4">
<select id="procedimentos" name="selectbasic" class="form-control">
<option value="122">122 - Tramua 1</option>
<option value="123">123 - Trauma 2</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Observações:</label>
<div class="col-md-4">
<textarea class="form-control" id="observacoes" placeholder="Digite sua observação aqui" name="textarea"></textarea>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" id="submitObservacao" class="btn btn-primary">Salvar Anotações</button>
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Salvar Anotações</button> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- EDIT MODAL -->
<div id="EditMod" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-backdrop="static" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Editar Anotação</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="obsModalEdit">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Dente:</label>
<div class="col-md-4">
<input id="denteEdit" name="dente" type="text" placeholder="Número do dente" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Procedimentos:</label>
<div class="col-md-4">
<select id="procedimentosEdit" name="procedimentos" class="form-control">
<option value="122" name="procedimentos">122 - Tramua 1</option>
<option value="123" name="procedimentos">123 - Trauma 2</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Observações:</label>
<div class="col-md-4">
<textarea class="form-control" id="observacoesEdit" placeholder="Digite sua observação aqui" name="observacoes"></textarea>
</div>
</div>
<button type="button" class="btn btn-default refresh" data-dismiss="modal">Cancelar</button>
<button type="button" id="submitEditar" class="btn btn-primary">Editar Anotação</button>
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Salvar Anotações</button> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
It is bit difficult without having your HTML code. Anyway I copied the last part of your JS and added few lines with comments. Hope this helps.
//Edit on click
jQuery(document).on("click", "#submitEditar", function(e){
e.preventDefault();
var numDente = jQuery("#denteEdit").val();
var numProcedimentos = jQuery("#procedimentosEdit").val();
var numObservacoes = jQuery("#observacoesEdit").val();
//Edit the append contente here
//Can't you changed the value of the relevant controller like this.
jQuery('#yourElementToModify').val(numProcedimentos);
//Or if you want to change the DIV fully,
jQuery('#itemObs')[0].innerHTML = 'append content';
jQuery('#EditMod').modal('hide');
Related
My Datepicker in modal does not work on server but works properly on localhost. Below is my html and js code:
Html:
<div class="modal fade" id="CreateAppointmentModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Create Appointment</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="CreateAppointmentBody">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
JS
$(document).on("click", ".AppointmentItem", function () {
var row = $(this).closest("tr");
idOfCust = row.find("td:first-child").text();
var url = '/Home/Create_AppointmentAdmin';
console.log(url);
$('#CreateAppointmentModal').modal('show');
$('#CreateAppointmentBody').load(url);
});
$('#CreateAppointmentModal').on('shown.bs.modal', function (e) {
console.log('Entered');
$('.daterangepicker').css('z-index', '1600');
$(".daterangepicker").datepicker({
dateFormat: 'dd-mm-yy',
//onSelect: PopulateDropDown,
minDate: 0
});
});
Modal Body:
<div class="alert" role="alert" id="alertBox" style="display:none">
</div>
<div class="row">
<div class="col-md-12">
<form asp-action="Create_AppointmentAdmin" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="Userid" type="hidden" id="CustId" />
<div class="form-group">
<label asp-for="AppointmentDay" class="control-label">Appointment Day</label>
<input asp-for="AppointmentDay" class="form-control daterangepicker" id="Calendar_Admin" type="text" autocomplete="off"/>
<span asp-validation-for="AppointmentDay" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AppointmentTime" class="control-label">Appointment Time</label>
<select asp-for="AppointmentTime" class="form-control" id="AppointmentTime">
<option value="">Select</option>
</select>
<span asp-validation-for="AppointmentTime" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Comment" class="control-label">Comments</label>
<input asp-for="Comment" class="form-control" id="Comment" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
<div class="form-group">
<input type="button" value="Create Appointment" class="btn btn-success" id="CreateAppointmentAdmin" />
</div>
</form>
</div>
</div>
Have tried multiple solutions availabe here but none seem to work.
Is there some mistake that I am doing? The same code seems to work fine on server when it is a full fledged page.
Any solution to this issue?
I trying to find in my database an order via a webservice integrated in the order controller like below :
#GetMapping("/view" )
#ResponseBody
public Optional<Ordre> view(String id) {
return ordreRepository.findById(id) ;
}
Then display the details of the order in a modal by using a javascript code like below :
$('.view').on('click', function(e) {
e.preventDefault();
var href2 = $(this).attr('href2');
$.get(href2, function(ordre, status) {
$('#Modalview #num_ord').val(ordre.num_ord);
$('#Modalview #dte_ord').val(ordre.dte_ord);
$('#Modalview #dir_ord').val(ordre.dir_ord);
$('#Modalview #ref_ord').val(ordre.ref_ord);
$('#Modalview #pap_ord').val(ordre.pap_ord);
$('#Modalview #boss_ord').val(ordre.boss_ord);
$('#Modalview #suj_ord').val(ordre.suj_ord);
});
$('#Modalview').modal();
});
<div class="modal fade" id="Modalview" 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" style="padding-left: 10px;">×</button>
</div>
<div class="modal-body" style="padding-bottom: 50px;">
<form class="form-horizontal" id="formview">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control pull-right" id="num_ord" name="num_ord" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input class="form-control pull-right" type="date" id="dte_ord" name="dte_ord" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control pull-right" id="dir_ord" name="dir_ord" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control pull-right" id="ref_ord" name="ref_ord" />
</div>
</div>
<div class="form-inline">
<div class="form-group pull-right">
</div>
</div>
<br/>
<br/>
<div class="form-group " id="pap">
<div class="col-sm-6 col-sm-push-3">
<select class="form-control" id="pap_ord">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<br/>
<div class="form-group" id="boss">
<div class="col-sm-8 col-sm-push-1">
<input class="form-control pull-right" type="text" id="boss_ord" name="boss_ord" />
</div>
</div>
<div class="form-group" id="suj" style="padding-top: 10px;">
<div class="col-sm-10">
<textarea class="form-control pull-right" id="suj_ord" name="suj_ord"></textarea>
</div>
</div>
<div class="modal-footer" style="margin-right: -15px;">
<button type="button" class="btn btn-default" data-dismiss="modal">Return Back</button>
</div>
</form>
<!--/modal-body-collapse -->
<!--/modal-footer-collapse -->
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
But nothing displayed in the modal i don't know and there is no error or crash in the console in my editor . any one can help me and thanks .
Have a try like below and bind your form object using th:field or th:value
$('.view').on('click', function(e) {
e.preventDefault();
$.ajax({
type: 'get',
url: /*[[ #{'/view'} ]]*/,
success: function(returnedData){
$('#formview').html(returnedData)
$('#Modalview').modal('show');
},
error: function(xhr, exception) {
console.log(xhr);
}
});
});
I'm using modal to save items to a database, and I'm wondering how to remove previously entered data without refreshing whole website, because right now when I click again "Add new item" which is opening modal there are stored / cached values inthere...
How to remove them ?
For example here is my modal:
<div [id]="id" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content dash-modal-content">
<div class="modal-header dash-modal-header">
<button type="button" class="close dash-close" data-dismiss="modal">×</button>
<h4 class="modal-title">ADD PRODUCT</h4>
</div>
<form (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="row">
<div class="col-xs-7">
<div class="form-horizontal" action="">
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Product code:</label>
<div class="col-sm-5">
<input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleCode" [(ngModel)]="article.code" (keyup.enter)="checkCode()">
</div>
<div class="checkbox col-sm-4" style="text-align: right; padding-right: 15px;">
<label style="font-size: 2em">
<input type="checkbox" value="" checked="" name="articleIsActive" [(ngModel)]="article.isActive">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
<span class="checkbox-label-text">Is product active?</span>
</label>
</div>
</div>
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="">Title:</label>
<div class="col-sm-9">
<input type="text" class="form-control dash-form-control" id="" placeholder="" name="articleTitle" [(ngModel)]="article.title">
</div>
</div>
</div><!--End of form horizontal-->
</div><!--End of col-->
</div><!--End of row-->
</div><!--End of modal body-->
<div class="modal-footer">
<button type="submit" class="btn main-content-button pull-right" style="margin: 0;"><i class="fas fa-save"></i></button>
</div>
</form>
</div><!--End of modal content-->
</div>
</div>
<div>
</div>
onSubmit I'm simply saving data to a database:
onSubmit() {
this.saveArticle((savedArticle: Article): void => {
this.onSave.emit(savedArticle);
});
}
// $('#' + this.id).removeData(''); < - maybe smth like this? But don't thinks so :(
}
I'm wondering how to immediately after submiting values to clear modal's content (text boxes etc)...
Thanks guys
Cheers
Try
onSubmit() {
this.saveArticle((savedArticle: Article): void => {
this.onSave.emit(savedArticle);
article = {}; // <---- Reset the variable
});
}
}
guys. I need some help in viewing my data throught a modal box and replace it using update function.
Here's my button to view the modal box
{{ Form::open(array(
'route' => array('edit_spk', 'id'=> $spk_data->id),
'method' => 'put',
'style' => 'display:inline'
))
}}
<button class="btn btn-success btn-line btn-rect" data-toggle="modal" data-target="#editSpk"><i class="icon-pencil icon-white"></i> Edit</button>
{{ Form::close() }}
Here's my view code for this modal box
<div class="col-lg-12">
{{ Form::open(array('url'=>'edit_spk','class'=>'form-horizontal', 'id'=>'block-validate')) }}
<div class="modal fade" id="editSpk" 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="H4"> Edit SPK</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-lg-2">Distribution Code</label>
<div class="col-lg-10">
<div class="input-group">
<input class="form-control" id="distribution_code" name ="distribution_code" type="text" data-mask="M99/99/99/9999"/>
<span class="input-group-addon">M99/99/99/9999</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Destination</label>
<div class="col-lg-9">
<input type="text" id="destination" name="destination" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">HLR</label>
<div class="col-lg-9">
<input type="text" id="hlr" name="hlr" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">First ICCID</label>
<div class="col-lg-9">
<input type="text" id="first_iccid" name="first_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Last ICCID</label>
<div class="col-lg-9">
<input type="text" id="last_iccid" name="last_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Quantity</label>
<div class="col-lg-9">
<input type="text" id="quantity" name="quantity" class="form-control" />
</div>
</div>
<div class="form-actions no-margin-bottom" style="text-align:center;">
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-line btn-rect" id="confirm">Update SKU</button>
</div> </div>
{{Form::close()}}
</div>
</div>
</div>
</div>
<!--END OF MODAL EDIT SPK-->
<!-- Dialog show event handler -->
<script type="text/javascript">
$('#editSpk').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
var form = $(e.relatedTarget).closest('form');
$(this).get('.modal-body #distribution_code').data('form', form);
$(this).get('.modal-body #destination').data('form', form);
$(this).get('.modal-body #hlr').data('form', form);
$(this).get('.modal-body #first_iccid').data('form', form);
$(this).get('.modal-body #last_iccid').data('form', form);
$(this).get('.modal-body #quantity').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#editSpk').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
</script>
Here's the route :
Route::put('spk/edit/{id}', array('as'=>'edit_spk','uses'=>'SpkController#edit'));
And here's the controller
public function edit($id)
{
$spk = Spk::find($id);
$spk->title = Input::get('distribution_code');
$spk->body = Input::get('destination');
$spk->done = Input::get('hlr');
$spk->done = Input::get('first_iccid');
$spk->done = Input::get('last_iccid');
$spk->done = Input::get('quantity');
$spk->save();
Session::flash('message', 'Successfully updated SPK !');
return Redirect::to('spk_view');
}
Can someone help me to get the data and view it into the element in modal box and make it updated using laravel ? thanks for your kindness :)
I encountered the same problem, here is how i solved it.
My modal is on the index.blade page, as follows:
<a data-toggle="modal" role="button" href="{{ URL::to('user/'.$user->id.'/edit') }}" class="btn btn-default"><i class="icon-pencil"></i></a>
Then the modal:
#if(!empty($user))
<!-- Form modal -->
<div id="edit_modal" class="modal fade" tabindex="-1" role="dialog">
<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"><i class="icon-paragraph-justify2"></i> Edit User</h4>
</div>
<!-- Form inside modal -->
{!! Form::model($user,array('route' => ['user.update', $user->id],'method'=>'PATCH')) !!}
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>First name</label>
<input type="text" class="form-control" placeholder="Chinedu"
name="name" value="{!! $user->name !!}">
</div>
</div>
</div>
{!! Form::close() !!}
#endif
#if(!empty($user))
<script>
$(function() {
$('#edit_modal').modal('show');
});
</script>
#endif
My controller methods are:
public function index()
{
//View all users
$users= User::orderBy('name', 'ASC')->paginate(10);
return view('user.index',compact('users'));
}
public function edit($id)
{
//
$users= User::orderBy('name', 'ASC')->paginate(10);
$user= User::findOrFail($id);
return view('user.index',compact('users','user'));
}
Hope this helps
Says, i write this code :
<div class="modal fade" id="addnewevent">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">
New Event
</h4>
</div>
<div class="modal-body">
<form name="newevent" id="newevent" action="" method="post">
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=date("d-m-Y",$now)?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option value="1">Normal</option>
<option value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="add" type="button">Add</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">close</button>
</div>
</div>
</div>
</div>
This will gave me result like this picture :
http://imageshack.com/a/img542/7466/okj7.png
Then, i use :
function change(id) {
$.post('ajax/change.php', {
data: id,
rand: Math.random()
},
function (html) {
$('#changeform').html(html);
$("#modalchange").modal('show');
});
}
triggered from this button :
<a class="table-actions" href="#" onClick="change('<?=$tm['id']?>');return false;"><i class="icon-pencil"></i></a>
The code for html (from change.php) is like this :
<?php
if(isset($_POST['data'])) {
$id = $_POST['data'];
$evt = mysql_query("select * from cal_event where id = '$id'");
$evt = mysql_fetch_array($evt);
$dt = explode(",",$evt['date']);
?>
<input type="hidden" value="<?=$id?>" name="uid" />
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text" value="<?=$evt['title']?>">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=$dt[2]."-".($dt[1]+1)."-".$dt[0]?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option <?=($evt['level']==1)?"selected":""?> value="1">Normal</option>
<option <?=($evt['level']==2)?"selected":""?> value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"><?=$evt['deskripsi']?></textarea>
</div>
<?php
}
?>
this is modal change
<div class="modal fade" id="modalchange">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Change Event</h4>
</div>
<div class="modal-body" >
<form name="changeform" id="changeform" action="" method="post">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="change" type="button">Change</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
but the result is different, it's give me like this :
http://imageshack.com/a/img89/3892/tpo5.png
So, how can i solve this problem?
and sorry for my bad in english.
From the picture you posted, the select element should not be just styled with css, there should be some javascript magic (which transform the select element to something else and hide the select element).
So you have to apply the javascript to the new html content again.