We Keep Coding

How to watch/listen to a variable and trigger an "onChange" event (Modular JS)

I want to listen to this.progress variable.
Whenever it's changed - it should update my charts loading percentage and progress bar loading percentage.
I tried using the .change in my bindEvents() section but i got an error saying it's not valid to apply the .change function on variable (works only on elements).
So i tried doing something like this (see last variable under cacheDom):
(function() {
const qwData = {
// Initialize functions
init: function() {
this.cacheDom();
this.bindEvents();
},
// Cache vars
cacheDom: function() {
this.dataDisplayed = false;
this.countUsers = <?php echo $_SESSION['all_users_count_real']; ?>;
this.$form = $('#frm_reportit');
this.start_date = this.$form[0][9].value;
this.end_date = this.$form[0][10].value;
this.dateCount = this.countDays(this.start_date, this.end_date);
this.show = document.querySelector('#btn-show');
this.downloadBtn = document.querySelector('#download_summary_button');
this.$dataContainer = $('#qw-data-container');
this.$qwTable = $('#qwtable');
this.$qwTbody = this.$qwTable.find('tbody');
this.qwChart = echarts.init(document.getElementById('main-chart'));
this.progressBar = document.querySelector('.progress-bar');
this.progress = function(){
var progressPrecent = 0;
return {
getProgress: function () {
return progressPrecent;
},
updateValue: function(progressPrecent) {
this.updateProgressTableChart(progressPrecent);
}
}
};
},
// Bind click events (or any events..)
bindEvents: function() {
var that = this;
// On click "Show" BTN
this.show.onclick = this.sendData.bind(this, this.start_date, this.end_date);
// On Change inputs
this.$form.change(function(){
that.updateDatesInputs(this);
});
// On Change inputs
/*this.progress.change(function(){
// Show Chart Loading
that.qwChart.showLoading({
text: that.returnNumWithPrecent(that.progress)
});
that.setProgressBarValue(that.progress);
});*/
},
// Get data, prevent submit defaults and submit.
sendData: function(sdate, edate, e) {
e.preventDefault();
let that = this;
$.ajax({
type: 'POST',
url: "/potato/ajax.php?module=potato_module",
dataType: 'json',
data: {
start_ts: sdate,
stop_ts: edate,
submitted: true
},
beforeSend: function() {
console.log(that.progress);
setTimeout(function (){
// Something you want delayed.
}, 1000);
that.progress = 50;
setTimeout(function (){
// Something you want delayed.
}, 2000);
that.progress = 60;
// that.setProgressBarValue(that.progress);
// Show Chart Loading
that.qwChart.showLoading({
color: '#00b0f0'/*,
text: that.returnNumWithPrecent(that.progress)*/
});
// If data div isn't displayed
if (!that.dataDisplayed) {
// Show divs loading
that.showMainDiv();
} else {
that.$qwTbody.slideUp('fast');
that.$qwTbody.html('');
}
},
complete: function(){
},
success: function(result){
}
});
that.dataDisplayed = true;
},
...........
......................
...................................
...............................................
})();
Keep getting this error in the console for where the console.log(this.progress) is:
undefined

You can use defineProperty with your own setter.
(function() {
const qwData = {
// Initialize functions
init: function() {
this.cacheDom();
this.bindEvents();
},
// Cache vars
cacheDom: function() {
this.dataDisplayed = false;
this.countUsers = <?php echo $_SESSION['all_users_count_real']; ?>;
this.$form = $('#frm_reportit');
this.start_date = this.$form[0][9].value;
this.end_date = this.$form[0][10].value;
this.dateCount = this.countDays(this.start_date, this.end_date);
this.show = document.querySelector('#btn-show');
this.downloadBtn = document.querySelector('#download_summary_button');
this.$dataContainer = $('#qw-data-container');
this.$qwTable = $('#qwtable');
this.$qwTbody = this.$qwTable.find('tbody');
this.qwChart = echarts.init(document.getElementById('main-chart'));
this.progressBar = document.querySelector('.progress-bar');
Object.defineProperty(this, "progress", {
get: () => {
return this.progressPrecent || 0;
},
set: (value) => {
if(value != this.progressPrecent){
this.updateProgressTableChart(value);
this.progressPrecent = value;
}
}
});
},
// Bind click events (or any events..)
bindEvents: function() {
var that = this;
// On click "Show" BTN
this.show.onclick = this.sendData.bind(this, this.start_date, this.end_date);
// On Change inputs
this.$form.change(function(){
that.updateDatesInputs(this);
});
// On Change inputs
/*this.progress.change(function(){
// Show Chart Loading
that.qwChart.showLoading({
text: that.returnNumWithPrecent(that.progress)
});
that.setProgressBarValue(that.progress);
});*/
},
// Get data, prevent submit defaults and submit.
sendData: function(sdate, edate, e) {
e.preventDefault();
let that = this;
$.ajax({
type: 'POST',
url: "/potato/ajax.php?module=potato_module",
dataType: 'json',
data: {
start_ts: sdate,
stop_ts: edate,
submitted: true
},
beforeSend: function() {
console.log(that.progress);
setTimeout(function (){
// Something you want delayed.
}, 1000);
that.progress = 50;
setTimeout(function (){
// Something you want delayed.
}, 2000);
that.progress = 60;
// that.setProgressBarValue(that.progress);
// Show Chart Loading
that.qwChart.showLoading({
color: '#00b0f0'/*,
text: that.returnNumWithPrecent(that.progress)*/
});
// If data div isn't displayed
if (!that.dataDisplayed) {
// Show divs loading
that.showMainDiv();
} else {
that.$qwTbody.slideUp('fast');
that.$qwTbody.html('');
}
},
complete: function(){
},
success: function(result){
}
});
that.dataDisplayed = true;
},
...........
......................
...................................
...............................................
})();

JQuery DataTable resets on button click

I am using jQuery DataTables on a site that features the regular searchbox and some preset buttons that sort the table by column when pressed. The code does indeed sort the table when the button resets, but it immediately resets within 1/2 second. Here is my code:
//CATEGORY BUTTONS
$("#Term").on('click', function (event) {
dataTable.column(2).search('Term').draw();
});
I've searched around and looked at many forums. This should be correct, but the result always instantly resets the form. I've removed the search box functionality to see if that was interfering and causing the issue, but the issue remained. It just blinks the results up really fast and then resets it all to showing the entire list again. Could this be a thing with Internet Explorer (this machine has no access to any other browsers)?
Here is the full code:
$(document).ready(function () {
//USES API FOR DYNAMIC SEARCHING
//RENDERS TABLE
var dataTable = $("#videos").DataTable({
"paging": false,
bjQueryUI: true,
ajax: {
url: "/api/videos",
dataSrc: ""
},
columns: [
{
width: "70%",
data: "title",
render: function (data, type, video) {
var videoTitle = video.title.toUpperCase();
return "<VideoItem><a href='" + "../" + video.url + "'>" + "<spacerTop>" + videoTitle + "</spacerTop></a></VideoItem>";
}
},
{
width: "10%",
visible: false,
data: "description",
render: function (data) {
return data;
}
},
{
width: "10%",
visible: false,
data: "categoryName",
render: function (data) {
return data;
}
},
{
width: "10%",
visible: false,
data: "meta",
render: function (data) {
return data;
}
},
{
width: "10%",
visible: false,
data: "date",
render: function (data) {
return data;
}
},
{
width: "10%",
visible: false,
data: "categoryID",
render: function (data) {
return data;
}
}
]
});
//CONTROLS DELETE BUTTON ACTION
$("#videos").on("click", ".js-delete", function () {
var button = $(this);
bootbox.confirm("Are your sure you want to delete this video?", function (result) {
if (result) {
$.ajax({
url: "/api/videos/" + button.attr("data-video-id"),
method: "DELETE",
success: function () {
button.parents("tr").remove();
}
});
}
});
});
//MAKES SEARCH BOX ON TOP INTERACT WITH DATATABLE
$(".search-box-input").keyup(function () {
dataTable.search(this.value).draw();
});
//CATEGORY BUTTONS
$("#Term").on('click', function (event) {
dataTable.column(2).search('Term').draw();
});
});

Dailog Box not passing value after the Ajax call

I am opening a dialog box on click and it has a div with textarea in it. On the same page I use an ajax call to load content in another div.
After I make the ajax call, the text field in the dialog box doesn't pass the value on submit but it works perfectly fine, before the ajax call.
Jquery
$(document).ready(function() {
$("#popup").dialog({
autoOpen: false,
title: "Popup",
show: {
effect: "fade",
duration: 150
},
hide: {
effect: "fade",
duration: 150
},
clickOutside: true,
clickOutsideTrigger: "#btn"
});
$("#btn").click(function() {
$("#popup").dialog("open");
});
});
$.widget("ui.dialog", $.ui.dialog, {
options: {
clickOutside: false,
clickOutsideTrigger: ""
},
open: function() {
var clickOutsideTriggerEl = $(this.options.clickOutsideTrigger);
var that = this;
if (this.options.clickOutside) {
$(document).on("click.ui.dialogClickOutside" + that.eventNamespace, function(event) {
if ($(event.target).closest($(clickOutsideTriggerEl)).length == 0 && $(event.target).closest($(that.uiDialog)).length == 0) {
that.close();
}
});
}
this._super();
},
close: function() {
var that = this;
$(document).off("click.ui.dialogClickOutside" + that.eventNamespace);
this._super();
},
});
Html
<button type="button" id="btn>Open Popup</button>
<div id="popup" style="display:none;">
<textarea id="textID" style="resize:none"></textarea></div>
Ajax Call causing the problem
$('.link').on('click', function (e) {
var load= $(this).attr('href');
var $this = $(this);
if(load == "#open") {
$.ajax({
type: 'post',
url: "/page/view/" + $(this).parents("[data-id]").attr("data-id"),
complete: function (event) {
$("#content").contents().remove();
$("#content").append(event.responseText);
}
});
}
});

Javascript Confirm change into jquery modal dialog

I have here a delete record via ajax. I add confirm message if I want to delete the record or not. What I need is change the confirm message into modal dialog http://jqueryui.com/dialog/#modal-confirmation.
I want to change this javascript code
if(confirm("All PR and PO in this record will be deleted. Are you want to delete?"))
into this jquery modal dialog. Any help?
<script>
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
Ajax delete
<script>
$(function () {
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
if (confirm("All PR and PO in this record will be deleted. Are you want to delete?")) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</script>

You will override confirm method of javascript in your html code as follow
<script>
function confirm(message) {
var myTitle =
"<div style='float: left'>Error</div><div style='float: right; margin-right: 15px;'>Close</div>";
$('<div id="dlgTest1" style="display: none;min-height:auto;"><p style="text-align:justify;font-family:verdana;font-weight: bold;">'+message+'</p></div>').dialog({
resizable: false,
modal: true,
width: 300,
height: 'auto',
bgiframe: false,
//position: ['top', 5],
draggable: true,
closeOnEscape: true,
minHeight:20,
buttons: [{
text: "Cancel",
"style": 'background-color:#CCCCCC !important;color:rgb(119, 119, 119);font-family:verdana',
click:function(){
$(this).dialog('close');
return false;
}
},{
text: "Ok",
"style": 'background-color:#007AC0 !important;color:white;font-family:verdana',
click:function(){
$(this).dialog('close');
}
}
],
close:function(){ $(this).dialog('destroy').remove(); }
}).siblings('.ui-dialog-titlebar').append(myTitle); // title goes here;
//$("#dlgTest1").dialog("open").dialog("moveToTop");
};
and then use it , But be careful don't use html submit button on it, Use html normal button

//try this code
<script>
var isConfirmed=false;
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
isConfirmed=true;
$(this).dialog("close");
},
Cancel: function () {
isConfirmed=false;
$(this).dialog("close");
}
}
});
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
$("#dialog-confirm").html("All PR and PO in this record will be deleted. Are you want to delete?");
if (isConfirmed) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</script>

//replace your script with this code and try
<script>
var isConfirmed=false;
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
isConfirmed=true;
$(this).dialog("close");
},
Cancel: function () {
isConfirmed=false;
$(this).dialog("close");
}
}
});
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
$("#dialog-confirm").html("All PR and PO in this record will be deleted. Are you want to delete?");
$("#dialog-confirm").dialog();
if (isConfirmed) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</script>

jQuery function not work for Second Time

I write this jQuery after it works fine completely for first time it give this error then for second time none of function work.I also use jQuery UI you can see in code.
This error happens after first time complete:
Uncaught SyntaxError: Unexpected token } jquery-1.8.3.js:564
Markup and code:
<link href="../../StyleSheets/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script src="../../Scripts/jquery-1.8.3.js"></script>
<script src="../../Scripts/jquery-ui-1.9.2.custom.js"></script>
<script>
$(function () {
$(":checkbox").change(function () {
var $this = $(this);
if ($this.is(":checked")) {
$this.closest("tr").addClass("SlectedtRow");
} else {
$this.closest("tr").removeClass("SlectedtRow");
}
})
var tittle = '';
var url = '';
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: [
{
text: "بلی",
click: function () {
DoAction();
$(this).dialog("close");
}
},
{
text: "خیر",
click: function () {
$(this).dialog("close");
}
}
]
});
// Link to open the dialog
$('#ConfirmRiver , #DeleteRiver').click(function (event) {
var IsSelected = false;
var ModalText = " آیا رودخانه ";
$('#RiverForm input:checked').each(function () {
ModalText += this.value + " - "
IsSelected = true;
});
if (IsSelected) {
document.getElementById('ErrorContent').style.display = "none";
ModalText = ModalText.slice(0, -2);
if (this.id == 'DeleteRiver') {
ModalText += "حذف گردد" + "؟"
tittle = 'حذف رودخانه'
url = '#Url.Action("DeleteRiver", "WaterResourcesManagement")';
}
if (this.id == 'ConfirmRiver') {
ModalText += "تایید نهایی گردد" + "؟"
tittle = 'تایید اصلاح و بازبینی رودخانه '
url = '#Url.Action("ChangeRiverARStatus", "WaterResourcesManagement")';
}
$('#ModalMessgae').text(ModalText);
$("#dialog").dialog("open");
$("#dialog").dialog({ title: tittle });
event.preventDefault();
}
else {
document.getElementById('ErrorContent').innerHTML = " اطلاعات مورد نظر را انتخاب نمایید";
document.getElementById('ErrorContent').style.display = "block";
document.getElementById('ErrorContent').className = "msg-Yellow";
}
})
function DoAction() {
var list = [];
$('#RiverForm input:checked').each(function () {
if( url == '#Url.Action("ChangeRiverARStatus", "WaterResourcesManagement")')
{
var Ar= $('#RiverForm').find("input[value='"+this.id+"']").attr('id');
list.push(Ar);
}
else{
list.push(this.id);}
});
var parameters = {};
parameters = JSON.stringify({ "Id": list, AreaID: #Request.QueryString["AreaID"] });
$.ajax({
url: url,
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: "html",
traditional: true,
data: parameters,
success: function (data, textStatus, jqXHR) {
$('#updateAjax').html(data);
},
error: function (data) {
$('#updateAjax').html(data);
}
});
}
});
</script>

I add if (!request.isjax()) in all jquery code and it works