Open dialog after closing another - populate dropdown with ajax call - jquery - javascript

I want to show a dialog with jquery after another dialog is closed.
Here is the first dialog
When I press the Close button another dialog needs to be showed. This dialog which has a drop down, and I need to populate this dropdown with ajax call.
The problem is that I keep get this error on console: TypeError: $(...).get(...) is undefined. and the method from the controller is never reached.
This is the code that I'm using:
<script type="text/javascript">
$("#saveGeometryType_dialog").draggable({ handle: ".modal-header" });
function saveElements(options) {
}
function closeDialog(options) {
var $temp = $("<input/>", { id: 'temp' });
//$temp.val($(options.element).text()).select();
//document.execCommand("copy");
//var title = $("#geometry-dialog").dialog("option", "title");
//console.log($temp);
$temp.remove();
var title = "Linestring";
$('#saveGeometryType_dialog').modal('show');
$.ajax({
type: "POST",
url: "PlotDescriptions/GetCodes/" + title,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#ddlCode").get(0).options.length = 0;
$("#ddlCode").get(0).options[0] = new Option("Select code", "-1");
$.each(msg.d, function(index, item) {
$("#ddlCode").get(0).options[$("#ddlCode").get(0).options.length] = new Option(item.Display, item.Value);
});
},
error: function() {
$("#ddlCode").get(0).options.length = 0;
alert("Failed to load names");
}
});
}
</script>
<div class="modal fade" tabindex="-1" role="dialog" id="saveGeometryType_dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Save geometry</h4>
</div>
<div class="modal-body">
<p></p>
<div class="saveGeometryType-header">
<div class="row">
<div class="col-md-4"> Cod </div>
<div class="col-md-4"> <select id="ddlCod">
</select> </div>
</div>
</div>
</div>
<div class="modal-footer">
<button onclick="saveElements({ 'element': '#saveGeometryType_dialog .modal-body > p', 'target': 'saveGeometryType_dialog .modal-body' });$('#saveGeometryType_dialog').modal('hide');" type="button" class="btn btn-primary">Save</button>
<button onclick="closeDialog({ 'element': '#saveGeometryType_dialog .modal-body > p', 'target': 'saveGeometryType_dialog .modal-body' });$('#saveGeometryType_dialog').modal('hide');" type="button" class="btn btn-default">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
This is the controller method that I need to reach. The parameter from the method should be the title from the first dialog, in this case the Linestring.:
[WebMethod]public static ArrayList GetCodes(string geometryType)
{
return new ArrayList()
{
new { Value = 1, Display = "Code1" },
new { Value = 2, Display = "Code2" }
};
}
Any help is appreciated.

Related

How to display a pop up notification laravel using ajax?

How to display a pop-up notification in admin side when a customer click an order?. Now its not getting the pop-up notification?.when inspect the values getting.
var audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
Ajax
<script>
setInterval(function () {
$.ajax({
url: '{{route('get-order-data')}}',
dataType: 'json',
success: function (response) {
let data = response.data;
if (data.new_order > 0) {
playAudio();
$('#popup-modal').appendTo("body").modal('show');
}
},
});
}, 1000);
Controller
public function order_data()
{
$new_order = DB::table('orders')->where(['checked' => 0])->count();
return response()->json([
'success' => 1,
'data' => ['new_order' => $new_order]
]);
}
pop up code
<div class="modal" id="popup-modal">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-12">
<center>
<h2 style="color: rgba(96,96,96,0.68)">
<i class="tio-shopping-cart-outlined"></i> You have new order, Check Please.
</h2>
<hr>
</center>
</div>
</div>
</div>
</div>
</div>
Ajax
<script>
$(document).ready(function(){
setInterval(function () {
$.ajax({
url: '{{route('get-order-data')}}',
type: 'GET',
dataType: 'json',
success: function (response) {
$.each(response.new_order, function (key, value) {
if (value.new_order > 0) {
playAudio();
$('#popup-modal').modal('show');
}
});
}
});
}, 1000);
});
</script>
Controller
public function order_data()
{
$data = DB::table('orders')->where('checked', 0)->get();
$count = $data->count();
$res['new_order'] = array([
'success' => 1,
'new_order' => $count
]);
return response()->json($res);
}
You are displaying the popup through modal window. You can trigger the modal window through javascript. I hope the below code will be useful for you. Try this code in jsFiddle with jQuery enabled. Append the javascript code inside the ajax code where you need to display the notification.
$('.btn').click(function () {
$("#myModal").modal('show');
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="myModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button class="btn">
Submit
</button>

JS function not getting hit when button clicked

I have a button and im trying to fire the function below on click of "Duplicate". Could you guide me through the right way?
Currently, when i click nothing happens! There is no response. I need to fire the function on click.
Thanks in advance
JS
$(document).on('click', '.js-duplicateRoom', function (e) {
var hiddenInput = $(this).parent().find('input[name="roomId"]');
var roomId = hiddenInput.data('id');
var type = 'duplicate';
$.ajax({
type: "GET",
url: "/management/hostaccommodation/AddRoom?roomId=" + roomId + '&type=' + type,
}).done(function (result) {
$('#addRoomResult').html(result);
// Hide Add Room Button
$('#addNewRoom').hide();
$('#backToDetails').hide();
$('#nextPropertyExtras').hide(); // Next button
});
});
HTML
<div class="modal fade" id="duplicateModal" tabindex="-1" role="dialog" aria-labelledby="duplicateModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="duplicateModalLabel">Confirm Duplicate</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you would like to duplicate this Room?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" id="js-duplicateRoom" >Duplicate</button>
</div>
</div>
</div>
</div>
The button is identified by an ID, not a class.
So try this instead:
$(document).on('click', '#js-duplicateRoom', function(e) {
var hiddenInput = $(this).parent().find('input[name="roomId"]');
var roomId = hiddenInput.data('id');
var type = 'duplicate';
$.ajax({
type: "GET",
url: "/management/hostaccommodation/AddRoom?roomId=" + roomId + '&type=' + type,
}).done(function(result) {
$('#addRoomResult').html(result); // Hide Add Room Button
$('#addNewRoom').hide();
$('#backToDetails').hide();
$('#nextPropertyExtras').hide(); // Next button
});
});

Alert Box to show when error occur

I am looking to implement the bootstrap alert boxes, for when I have a concurrency error on a page. Currently this is how the Controller is setup:
I would do something like this with sweetalert2:
https://jsfiddle.net/x07g89h9/
or with bootstrap
https://jsfiddle.net/mmq27s86/2/
HTML
declare bootstrap modal
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Errors</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul id="errors">
</ul>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
</div>
</div>
</div>
</div>
JS
function showModal(errors){
var $msg = $("#errors");
$msg.empty();
for(var i=0; i<result.errors.length; i++){
$msg.append("<li>" + errors[i] + "</li>");
}
$('#myModal').modal();
}
$.ajax({
url: 'any...',
data: JSON.stringify(model),
type: 'POST',
cache: false,
contentType: 'application/json',
success: function (result) {
// in case of error
if(result.ChangeStatus !== "Success"){
showModal(result.errors);
}
},
error: function () {
$('#errorContainer').show();
$('#errorMessage').html('There was a server error, please contact the support desk on (+44) 0207 099 5991.');
}
});
});
Check this or this.
Articles are too long to report whole code here.

When clicking The modal ok button, it triggers clicks by the number of using modal without refreshing the page

When I click on the "استمرار" button it triggers clicks, I counted it and found it equal to the number of clicks, that I clicked it without refreshing the page.
This problem happens only when I don't refresh the page.
I use one modal to the whole website but after every usage I refresh the page so this problem don't occurance.
This is the js file
var modal = $j('#generalModal');
var modalBody = '<div style="margin-top: 20px;">'+
'<div>'+
'<label for="AgentID" class="control-label">المندوب</label>'+
'<span id="AgentDropDown"></span>'+
'<input type="hidden" name="AgentID" id="AgentID">'+
'</div>'+
'</div>';
modalForm(modal, "تغيير المندوب", modalBody);
modal.modal('show');
$j('#AgentDropDown').select2({
ajax: {
url: 'ajax_combo.php',
dataType: 'json',
cache: true,
data: function(term, page){ return { s: term, p: page, t: 'clients', f: 'agent_id' }; },
results: function(resp, page){ return resp; }
},
width: 400
}).on('change', function(e){
$j('#AgentID').val(e.added.id);
});
$j("#change").on("click", function(){
console.log('click');
var agent = $j('#AgentID').val();
var agent_name = $j('#s2id_AgentDropDown > a > span.select2-chosen').text();
// ajax request
if(agent_name){
$j.ajax({
url: 'hooks/ajax-update-agent.php',
type: 'POST',
data: {'ids': ids, 'agent': agent, 'tableName': tableName},
}).done(function() {
/* change the agent for ids */
for(var i=0; i<ids.length; i++){
console.log(agent_name);
$j('#payments-agent_id-'+ids[i]+' > a').text(agent_name);
}
/* show message for two seconds */
show_msg(modal, '<div class="alert alert-success" role="alert"><i class="glyphicon glyphicon-info-sign"></i> <strong>تم تغيير المندوب بنجاح</strong></div>');
setTimeout(function (){
/* close modal by triggering an event */
$j('[data-dismiss="modal"]').trigger('click');
// modal.modal('hide');
// modal.modal('toggle');
}, 2000);
}).fail(function(){
/* modal error */
show_msg(modal, '<div class="alert alert-error" role="alert"><i class="glyphicon glyphicon-info-sign"></i> <strong>حدث خطأ اثناء تغيير المندوب</strong></div>', true);
});
}
});
function modalForm(modal, title, body){
modal.find('.modal-title').text(title);
modal.find('.modal-body').empty().append(body);
modal.find('.modal-footer').show();
}
function show_msg(modal, body, withFooter){
if(typeof withFooter == 'undefined') withFooter=false;
if(!withFooter){
modal.find('.modal-footer').hide();
}
modal.find('.modal-body').empty().append(body);
}
this is the html page
<!-- agents Modal -->
<div class="modal fade" id="generalModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
<button type="button" class="btn btn-primary" id="change">إستمرار</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
What should I do to solve this problem?!!
Thanks in advance
Usually this happens when the click handler is called multiple times on an element through calling a function. Perhaps try unbinding and rebinding the event, like so
$("#change").off('click').on('click');
This will clear any previous click events and assign a new one. Hopefully that works!

jquery ajax post after close

I have data-id and I want to post data-id after my modal hide/close how can I do that ?
$(function() {
var popup = $('#AniPopup');
var time = $(".will-close strong");
var closeSeconds = $("#AniPopup").attr("data-close");
var openSeconds = $("#AniPopup").attr("data-open");
var dataSrc = $("#AniPopup").attr("data-src");
var dataId = $("#AniPopup").attr("data-id");
setTimeout(function(e) {
popup.modal('show');
time.html(closeSeconds);
setInterval(function(){
time.html(closeSeconds);
closeSeconds--;
if(closeSeconds < 0){
popup.modal('hide');
}
}, 1000)
}, openSeconds * 1000);
$.ajax({
url: dataSrc,
dataType: "html",
success: function(data) {
$(".modal-body").html(data);
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" id="AniPopup" tabindex="-1" role="dialog" aria-labelledby="AniPopupLabel" aria-hidden="true" data-close="10" data-open="2" data-src="http://www.anitur.com.tr/popup/test-6-text" data-id="69">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="memberModalLabel">Popup Header</h4>
</div>
<div class="modal-body">
this content loaded by ajax
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Kapat</button>
<span class="will-close">will be closed after : <strong>n</strong> seconds</span>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Use standard event hidden.bs.modal of bootstrap modal:
$("#AniPopup").on('hidden.bs.modal', function () {
// do your staff here
});

Categories