The data from ajax (json) is fine and up to date, but the data shown in my modal is the one from the first page load. The data in "console.log" ist correct. Seems to be a chache issue?
$('.showCallhistory').click(function(e) {
var callsId = $(this).data("id");
$.ajax({
cache: false,
url : '?eID=ajaxDispatcher&callId='+callsId,
dataType : 'json',
success : function(data) {
var callhistoryhtml = '';
callhistoryhtml +='<div class="well"><dl class="dl-horizontal">';
$.each(data, function(i, val) {
callhistoryhtml += '<dt>'+val.chCrdate+'</dt><dd>'+val.chEntry+' | durch: '+val.feUsername+'</dd>';
console.log(val.chEntry + ' : ' + val.chCrdate+ ' : ' + val.feUsername);
});
callhistoryhtml += '</dl></div>';
$('.replaceMe').replaceWith(callhistoryhtml);
$('#myModal').modal('toggle');
},
error : function(result) {
alert('error ' + result.myResult);
},
});
});
my modal, in which the content is not properly replaced:
<div class="modal fade" id="myModal" 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="myModalLabel">Call-Historie</h4>
</div>
<div class="modal-body replaceMe">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">schliessen</button>
</div>
</div>
</div>
</div>
The problem was the:
$('.replaceMe').replaceWith(callhistoryhtml);
Now using following instead and this brings the needed effect:
$('.replaceMe').empty();
$('.replaceMe').append(callhistoryhtml);
Are there any comments/better ways?
Related
I have and inside it I have the form tag with its id, since the form is large I put it on another file and call it with php
<div class="modal fade" id="general" tabindex="-1" role="dialog" aria-labelledby="generalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="generalLabel">Historia clinica general</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" role="form" id="hcgeneral">
<?php require 'addHcg.php' ?>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</div>
</div>
</div>
and then there's the jquery code, where I have the ajax request, before it I have the submit event with the id of the form but it doesn't capture it and I don't know why because I already did something exactly like this
$('#hcgeneral').submit(function (e) {
e.preventDefault()
$.ajax({
type: 'POST',
url: 'procHcg.php',
dataType: 'JSON',
data: {
id_paciente: $('input[id="id_paciente"]').val(),
embarazo: $('.embarazo').val(),
padreConvida: $('.padreVivo').val(),
enfermedadPadre: $('#enfPadre').val(),
madreConVida: $('.madreViva').val(),
enfermedadMadre: $('#enfMadre').val(),
hermanos: $('.hnos').val(),
hnoSano: $('#hnoSano').val(),
sufreEnfermedad: $('.sufreEnf').val(),
queEnfSufre: $('#pacEnf').val(),
tratMedico: $('.haceTrat').val(),
cualTratMedico: $('#tratMedico').val(),
medHabituales: $('#medConsume').val(),
med5anios: $('#medicamentos5').val(),
deporte: $('.deporte').val(),
malestarDeporte: $('.malestar').val(),
extraccionMuela: $('#sacaMuela').val(),
sangraMuela: $('#sangraMuela').val(),
colageno: $('.probColageno').val(),
fiebre: $('.fiebre').val(),
fiebreProtege: $('#protegeMed').val(),
diabetico: $('.diabetico').val(),
diabetesControl: $('.diabetesControl').val(),
diabetesMed: $('#diabetesMed').val(),
//and more data...
},
success: function (response) {
console.log(response)
alert('La historia clinica general se ha guardado exitosamente.')
},
error: function (jqXMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
alert(errorThrown)
}
})
What I want is to see the postDatos in the console and to sent them in procHcg.php but nothing returns
I am working to solve an ajax issue I have where I am trying to auto populate an amount field based on the selection from the drop down box.
My table is layout as follows (Table name is Otheritemsmapping):
ID | Item | Amount
1 | Item 1 | Amount 1
2 | Item 2 | Amount 2
My modal in my Blade looks like this
<div class="modal fade" id="accountpayModal" tabindex="-1" role="dialog" aria-labelledby="accountpay" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="addaccountModal">Pay from Account of {{$member->first_name}} {{$member->last_name}}</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{!!Form::open(array('action' => ['AccountController#item'], 'method'=>'POST', 'class'=>'form-horizontal'))!!}
<div class="modal-body">
<input type="hidden" name="member" value="{{$member->id}}">
<label class="label-control">Item:</label>
<div class="input-group">
<div class="form-group">
<select type="text" class="selectpicker" data-sytle="select-with-transition" name="item" value="C" id="selectBox">
#foreach ($otheritems as $o)
<option value ={{$o->item}}>{{$o->item}}</option>
#endforeach
</select>
</div>
</div>
<label class="label-control">Amount:</label>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="amount" id="textField">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-round btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-round btn-primary">Save Changes</button>
</div>
{!!Form::close()!!}
</div>
</div>
</div>
I have the following JS in the same file as the above modal
<script>
$('#selectBox').change(function() {
var id = $(this).val();
var url = '{{ route("getPayments", ":id") }}';
url = url.replace(':id', id);
$.ajax({
url: url,
type: 'get',
dataType: 'json',
success: function(response) {
if (reponse != null) {
$('textField').val(response.amount);
}
}
});
});
</script>
I have the following on the Controller for getPayments
public function getPayments($id = 0)
{
$data = Otheritemmapping::where('item', $id)->first();
return response()->json($data);
}
I have added the following to my Web.php file
Route::get('get/payments/{id}', 'MemberController#getPayments')->name('getPayments');
However when selecting an item from the dropdown ($o->item), the amount is not being populated in the Amount field.
Any help would be great,
Thanks
in your code there's some typos.
<script>
$('#selectBox').change(function() {
let id = $(this).val();
let url = '{{ route("getPayments", ":id") }}';
url = url.replace(':id', id);
$.ajax({
url: url,
type: 'get',
dataType: 'json',
success: function(response) {
if (response != null) {
$('#textField').val(response.amount);
}
}
});
});
</script>
hope this will solve your problem. if still there's anything wrong then check the browser developer console. let me know the error and i will update the answer for you.
you should use id as the option value as id is unique.
I´m in a point where i need to show a success(or not) message, i like modals because they freeze everything behind(the main view) and show that little box with some kind of message. I have seen many examples, but most of them are showing these "alert" boxes per page and i think i should have a view(called modal) and every time i need to show it, i just pass the proper arguments and the view would show up.
What i have done:
Created a view called modal.
Created a controller with a method that will receive the arguments.
Created a route to the controller.
$.ajax({
method: 'POST',
url: '/angariacoes/insertImovel',
dataType: "json",
data: {"_token": "{{ csrf_token()
}}",values,eachImage,eachImageThumb},
success: function(response){
window.location.href='/popup/popup';
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
But now, how do i show that view(that has boostrap modal code) as a modal? Anyone?
Thanks, regards
Put a div inside of the modal body and then you can just pass back a view as your response:
$.ajax({
method: 'POST',
url: '/angariacoes/insertImovel',
dataType: "json",
data: {"_token": "{{ csrf_token()
}}",values,eachImage,eachImageThumb},
success: function(response){
$('#myAjaxTarget').html(response);
$('#myModal').modal('show');
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
Controller:
return view('my_view', compact($data));
Just make sure the actual modal part is on the view that you want the pop up to be. Create a separate blade that has the modal content.
So I have the_main_view.blade.php, and in it I have put:
<div class="modal fade" id="myModal" tabindex="-1" role="img" style="overflow: hidden">
<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="">Modal Title</h4>
</div>
<div class="modal-body" id="myAjaxTarget">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And we have a different view, my_view.blade.php that is being returned via the Controller method mentioned above:
<span>Literally any HTML</span>
So the response from the ajax call is just my_view, which you use to replace the HTML content of #myAjaxTarget with. So the end modal will look like this:
<div class="modal fade" id="myModal" tabindex="-1" role="img" style="overflow: hidden">
<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="">Modal Title</h4>
</div>
<div class="modal-body" id="myAjaxTarget">
<span>Literally Anything</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Which is then shown with the $('#myModal').modal('show') method.
I am developing an app which requires options like view,So for viewing details I am using bootstrap modal to show the dynamic details,but the modal is not firing up.
My button
<a href="#" class="btn btn-info btn-sm view" data-id="{{$value->id}}" data-title="{{$value->title}}" data-status="{{$value->status}}">
<i class="fa fa-eye"> Preview</i>
</a>
My modal
<div class="modal fade" id="viewM" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" style="width:60%;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Preview</h4>
</div>
<div class="modal-body" id="preview" style="padding: 40px;">
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button" data-dismiss="modal">
<span class="fa fa-times-circle"></span> Close
</button>
</div>
</div>
</div>
</div>
My jquery
$('a.view').click(function()
{
var id = $(this).attr('data-id');
var url = 'receiveReprt';
$.get(url + '/' + id, function (data)
{
console.log(data);
$("#preview").html(data.content);
$('#viewM').modal({show:true});
});
});
Url function
public function receiveReprt($id)
{
$reprt = shareReport::select('content')->where('id','=',$id)->first();
return $reprt;
}
Are you getting any errors in your browser log? My guess at this point is that you are dealing with a javascript error, possibly due to data.content (e.g. if it's not object), which kills the script execution.
If this is the case, and data is not an object as I suspect, you can convert to one (assuming it's JSON of course):
$.get(url + '/' + id, function (data)
{
console.log(data);
$("#preview").html(data.content);
$('#viewM').modal({show:true});
}, "json");
Or
$.ajax({
url: url + '/' + id,
method: "get",
success: function (data) {
var json = $.parseJSON(data);
$("#preview").html(json.content);
$('#viewM').modal({show:true});
}
});
I have a Ajax function like this:
function generate_summary() {
var summary_input=document.getElementById('summary_input').value;
var email_notify=document.getElementById('email_notify').value;
var num_sent=document.getElementById('num_sent').value;
$.ajax({
type: "GET",
url: "/summary/",
data: {summary_input:summary_input, email_notify:email_notify, num_sent:num_sent},
success: function(data){
$('#modal-body').html(data)
}
});
}
I have href like this:
<a onclick="generate_summary()" href="#summaryModal" style="text-decoration:none;" id="summarize_btn" role="button" class="btn btn-success offset3" data-toggle="modal">Summarize</a>
Modal looks like this:
<!-- Summary output popup -->
<div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Summary</h3>
</div>
<div class="modal-body" id="modal-body">
<textarea disabled id="summary_output" name="summary_input" rows="15" class="span5"></textarea>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Modal is a popup when summarize button is clicked.
The output from the server is placed on:
<div class="modal-body" id="modal-body">
<textarea disabled id="summary_output" name="summary_input" rows="15" class="span5">{{ summary }}</textarea>
</div>
Ajax function, modal everything is working fine. But the modal is load so quickly and the function only returns the value after 10-15 secs. I want to show the popup modal and the summary at the same time. How can I do that?
to use jquery dialog you will have to reference jquery.ui js and css files in your project.
first make the summaryModal a jquery dialog:
$("#summaryModal").dialog({ autoOpen: false, buttons:
{
"Save": function () {
if (!confirm("Do you want to save the changes?")) {
return;
}
//Add your logic to save.
$("#summaryModal").dialog('close');
},
"Cancel": function () {
$("#summaryModal").dialog('close');
}
}
});
After that when you click the summarize_btn make the ajax call and load the content in the dialog:
$("#summarize_btn").click(function () {
$.ajax({
type: "GET",
url: "/Home/About",
success: function (data) {
$("#summaryModal").dialog("option", "height", 500);
$("#summaryModal").dialog("option", "width", 500);
$("#summaryModal").dialog("option", "title", 'Modal Title');
$("#summaryModal").dialog("option", "modal", true);
$("#summaryModal").dialog('open');
$('#summaryModal').html(data);
}
});
});
the summaryModal div will look like:
<div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>