I am using CodeIgniter.
I have two dropdowns called as status and action.
In the status drop-down, options are
Create
Pending
Verified
In action drop-down, options are
Paid
Refund
Dispute
Now, What I am doing is, When the user selects a status from the drop-down then onchage popup will display. Same onchage popup for action.
In the popup, I have a field which is message and two buttons called as submit and Cancel.
I am calling the controller on click on submit button to insert the message using AJAX. It's working for statusdrop-down but how to call the other controller for the action drop-down on click on submit button from the same popup?
I want to use the popup for action dropdown.
Any idea will be a great help.
Would you help me out in this issue?
$(function() {
$("#f_order_status, #f_order_status_confirm").change(function() {
$('#popup_verify').show();
});
});
function closePopup(obj) {
var id = $(obj).data('id');
$("#popup_verify").hide();
};
$("#o_order_status_action").on("submit", function(e) {
e.preventDefault(); //prevents form default action
var f_order_status = $('#f_order_status').val(); // get the selected value from dropdown
var f_order_status_confirm = $('#f_order_status_confirm').val(); // get the selected value from dropdown
$.ajax({ //do ajax to do update
type: "POST",
url: "<?php echo base_url('Customer_control/admin_order_verification');?>",
data: {
f_order_status: f_order_status,
f_order_status_confirm: f_order_status_confirm
},
success: function(dataReturned) {
if (dataReturned == 'true') {
location.href = baseUrl + "/Customer_control/list"
} else {
alert("There are some issue white updateing the records");
}
}
});
});.confirmation_alert {
position: fixed;
/* Stay in place */
z-index: 9;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
}
.profile_content {
position: fixed;
top: 25%;
/*transform: translateY(-50%);*/
background-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.5s;
animation-name: slideIn;
animation-duration: 0.5s;
max-width: 922px;
margin: auto;
left: 0;
right: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, .3);
margin-top: -65px;
}
.profile_header {
padding: 1px 20px;
background-color: #fafafc;
color: white;
/* min-height: 58px; */
border-bottom: 1px solid #f7f7f7;
display: block;
width: 100%;
}
.profile_content.p_v_popup {
border: 2px solid #666;
}
.confirmation_alert .profile_content {
max-width: 380px;
border: 2px solid #f96e64;
}
.p_v_popup .profile_header {
background: #666;
}
.confirmation_alert .profile_header {
padding: 6px 20px;
background-color: #f96e64;
}
.profile_body {
padding: 35px 50px;
}
.profile_footer {
padding: 15px;
background-color: #fdfdfe;
color: #858585;
text-align: center;
}
/* Add Animation */
@-webkit-keyframes slideIn {
from {
top: -500px;
opacity: 0
}
to {
top: 25%;
opacity: 1
}
}
@keyframes slideIn {
from {
top: -500px;
opacity: 0
}
to {
top: 25%;
opacity: 1
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
.p_v_popup .profile_footer .submit_btn {
background: #666;
}
.confirmation_alert .profile_footer .submit_btn {
background: #f96e64;
color: #fff;
}
.confirmation_alert .profile_footer .btn_default {
padding: 5px;
display: inline-block;
outline: none;
border: none;
cursor: pointer;
text-transform: uppercase;
font-weight: 300;
min-width: 100px;
border-radius: 50px;
margin: 0 3px;
}<select class="select_control" name="f_order_status" id="f_order_status">
<option value="" disabled selected>Select</option>
<option value="1">Create</option>
<option value="-1">Pending</option>
<option value="2">Verified</option>
</select>
<select class="select_control" name="f_order_status_confirm" id="f_order_status_confirm">
<option value="" disabled selected>Select</option>
<option value="1">Paid</option>
<option value="-1">Refund</option>
<option value="2">Dispute</option>
</select>
<div class="confirmation_alert" id="popup_verify" style="display: none;">
<div class="opacity"></div>
<form id="o_order_status_action" method="post">
<div class="profile_content p_v_popup">
<div class="profile_header clearfix">
<a href="javascript:void(0);" class="close_popup " onclick="closePopup(this)" data-id=""> x </a>
<div class="profile_name_pic"> Confirmation!!! </div>
</div>
<div class="profile_body">
<div class="row">
<div class="col-md-12">
<div class="leave_reason">
<div class="form_group">
<input type="hidden" name="hidden_cust_id" id="hidden_cust_id" value="<?php echo $encryption_id;?>">
<input type="hidden" name="hidden_o_id" id="hidden_o_id" value="<?php echo $encript_o_id_id;?>">
<label>Message</label>
<textarea class="form_control" name="f_followup_message" rows="2" id="f_followup_message"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="profile_footer clearfix">
<button type="submit" class="btn_default submit_btn">Submit</button>
<button type="button" class="btn_default cancel_btn" onclick="closePopup(this)" data-id=""> Cancel</button>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script></div>
