Here am using jQuery popup in my .phtml
file on the first run it sending data properly, on send time it fetching old data as-swell as new data. So how to prevent this condition.
Code:
<div class="popUpDiv" id="popup-modal">
<select id="reason_id" name="field1">
<option value="R000001">Order Created by Mistake</option>
<option value="R000002">Items would not arrive on time</option>
<option value="R000003">Shipping cost is too high</option>
<option value="R000004">Item price is too high</option>
<option value="R000005">Need to change order details or payment method</option>
<option value="R000006">Others</option>
</select>
<textarea class="reason_msg" name ="field2" rows="4" cols="50"></textarea></br>
<div class="submit_btn_div">
<button name="submit" id="submit">Submit</button>
</div>
</div>
<?php foreach ($_orders as $_order): ?>
<button class="cancel_order gray-btn" value="<?php echo $_order->getId(); ?>"><a href="javascript:void(0)"><?php /* @escapeNotVerified */ echo __('Cancel') ?></a></button>
<?php endforeach; ?>
Here is my jQuery for modal popup:
require(['jquery', 'jquery/ui'],function($){
// $(".popUpDiv").hide();
$('.reason_msg').hide();
$(".cancel_order").click(function(){
console.log("here 1");
var reason_msg = '';
var order_id = $(this).val();
console.log(order_id);
// $(".popUpDiv").show();
$("#reason_id").change(function(){
if($('#reason_id').val() == 'R000006'){
$('.reason_msg').show();
}else{
$('.reason_msg').hide();
}
});
$("#submit").click(function(){
console.log("here");
$("#popup-modal").modal('closeModal');
$('#reason_id').prop('selectedIndex',0);
$("textarea[name='field2']").val('');
});
});
});
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function($,modal
) {
$(document).ready(function() {
$('#popup-modal').on('hidden.bs.modal', function (e) {
$('#reason_id').prop('selectedIndex',0);
//For reset textarea
$("textarea[name='field2']").val('');
});
});
$('#popup-modal').on('modalclosed', function() {
//For reset Select field
$('#reason_id').prop('selectedIndex',0);
//For reset textarea
$("textarea[name='field2']").val('');
});
$(".cancel_order").click(function(){
$("#popup-modal").modal('openModal');
});
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
cache: false,
title: 'Select a Reason to Cancel',
modalClass: 'custom-modal',
buttons: [{
text: $.mage.__('Continue'),
class: 'module_pop',
click: function () {
$('#reason_id').prop('selectedIndex',0);
//For reset textarea
$("textarea[name='field2']").val('');
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-modal'));
return false;
}
);
Where am I doing wrong? can I get help?
Thanks in advance