How can I write an alternative function for DOMSubtreeModified?
$('html').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
var structure = $(event.target).closest(".form--group");
structure.find(".thevoornaam, .date_of_birth, .stepbirthVal, .livingkid, .right, .limitSelected, .pijlers, .total_pijlers").on("keyup change DOMSubtreeModified", function() {
if (structure.find(".thevoornaam").val().length > 1 && structure.find(".date_of_birth").val().length > 1 && structure.find('.stepbirthVal').html() == "" && structure.find(".livingkid").is(':checked') && structure.find(".right").is(':checked') && structure.find(".limitSelected:checked").val() == "1" && structure.find(".pijlers").val() != null && structure.find(".total_pijlers").val() != null) {
$("#stepbirth").removeClass("disabled");
} else if (structure.find(".thevoornaam").val().length > 1 && structure.find(".date_of_birth").val().length > 1 && structure.find('.stepbirthVal').html() == "" && structure.find(".livingkid").is(':checked') && structure.find(".right").is(':checked') && structure.find(".limitSelected:checked").val() == "0") {
$("#stepbirth").removeClass("disabled");
} else {
$("#stepbirth").addClass("disabled");
}
});
});
This function is working fine but i am getting this message in browser console.
[Violation] Added synchronous DOM mutation listener to a event. Consider using MutationObserver to make the page more responsive.
Can anyone help me with this?
Thanks in advance.
Related
I have this code that displays a different image in place of a broken image link. The problem is that the script changes not only "damaged" images, but also images that display without a problem. How can I modify the code below?
$("img").each(function () {
if (
(typeof this.naturalHeight != "undefined" &&
this.naturalHeight == 0 &&
this.naturalWidth == 0) ||
this.readyState == "uninitialized"
) {
$(this).attr(
"src",
"http://some-photo.blabla.png"
);
}
});
I'm taking my first steps in programming.
Modifying the code so that it only fixes broken links, not all of them.
Your code should be executed after the page is fully loaded
$(document).ready(function () {
$("img").each(function () {
if (
(typeof this.naturalHeight != "undefined" &&
this.naturalHeight == 0 &&
this.naturalWidth == 0) ||
this.readyState == "uninitialized"
) {
$(this).attr(
"src",
"http://some-photo.blabla.png"
);
}
});
}
I found a solution, of course with your help. Thank you!
var delayscript = function(){
$(document).ready(function () {
$("img").each(function () {
if (
(typeof this.naturalHeight != "undefined" &&
this.naturalHeight == 0 &&
this.naturalWidth == 0) ||
this.readyState == "uninitialized"
) {
$(this).attr(
"src",
"http://some-photo.blabla.png"
);
}
});
})
};
setTimeout(delayscript, 10000);
I have a drop down menu, and when I select the 'All' option, it gives me this error on the console:
TypeError: Cannot read property '0' of undefined
at n.$scope.onSearchByChanged (http://localhost:8080/js/jenkinsVersion/directives/assignment-filter.js:70:81)
So, I went to my script, function, line 70,character 81 :
$scope.onSearchByChanged = function () {
if ($scope.filter.list.searchBy == 'DEPARTMENT_CODE' && !$scope.filterScope.departments) {
$scope.loadDepartments();
} else if ($scope.filter.list.searchBy != 'DEPARTMENT_CODE') {
$scope.filter.list.departmentId = 0;
}
if ($scope.filter.list.searchBy == 'GROUP' && !$scope.filterScope.editorGroups) {
$scope.loadEditorGroups();
} else if ($scope.filter.list.searchBy != 'GROUP') {
$scope.filter.list.groupId = $scope.filterScope.editorGroups[0].id; //line 70
}
$scope.clearFilter('text');
};
if ($scope.filter.list.searchBy == 'GROUP' && !$scope.filterScope.editorGroups) {
$scope.loadEditorGroups();
}
if ($scope.filter.list.searchBy == 'DEPARTMENT_CODE' && !$scope.filterScope.departments) {
$scope.loadDepartments();
}
$scope.isStatusSelected = function (status) {
return _.indexOf($scope.filter.list.talentAssignmentStatuses, status) > -1;
};
$scope.selectTalentAssignmentStatus = function (status) {
$scope.clearFilter('text');
if ($scope.isStatusSelected(status)) {
_.remove($scope.filter.list.talentAssignmentStatuses, function (el) {
return status == el;
});
} else {
$scope.filter.list.talentAssignmentStatuses.push(status);
}
};
here is the loadEditorGroups function :
$scope.loadEditorGroups = function () {
Reference.getEditorGroups($scope, function (response) {
$scope.filterScope.editorGroups = response.list;
if ($scope.filterScope.editorGroups.length > 0) {
$scope.filter.list.groupId = $scope.filterScope.editorGroups[0].id
}
});
};
I'm still learning JS. Why is this error being thrown? When I change the value of the item I want to retrieve from that editorGroups list it just gives me the same error but with the corresponding number. Your help would be appreciated, please let me know if I can supply further information. Thank you!
Your logic for this if-else block is probably wrong:
if ($scope.filter.list.searchBy == 'GROUP' && !$scope.filterScope.editorGroups) {
$scope.loadEditorGroups();
} else if ($scope.filter.list.searchBy != 'GROUP') {
$scope.filter.list.groupId = $scope.filterScope.editorGroups[0].id; //line 70
}
The program will enter the else if block when both:
the if condition is false, that is: ($scope.filter.list.searchBy == 'GROUP' && !$scope.filterScope.editorGroups) == false
the else if condition is true, that is: ($scope.filter.list.searchBy != 'GROUP') == true
We can take these two statements and simplify them:
!($scope.filter.list.searchBy == 'GROUP' && !$scope.filterScope.editorGroups) && ($scope.filter.list.searchBy != 'GROUP')
($scope.filter.list.searchBy != 'GROUP' || $scope.filterScope.editorGroups) && ($scope.filter.list.searchBy != 'GROUP')
($scope.filter.list.searchBy != 'GROUP')
In step 2, I applied De Morgan's law to simplify !(A && B) to (!A || !B).
In step 3, I simplified the &&, since (A || B) && A is the same as just A.
So really, all we know when we enter the else if block is that searchBy != 'GROUP'. We do not know anything about editorGroups, and indeed, it may be undefined!
What you're probably looking for is:
if ($scope.filter.list.searchBy == 'GROUP' || !$scope.filterScope.editorGroups) {
$scope.loadEditorGroups();
} else if ($scope.filter.list.searchBy != 'GROUP') {
$scope.filter.list.groupId = $scope.filterScope.editorGroups[0].id;
}
Notice the || in the if condition. This ensures that the else if is executed only when ($scope.filter.list.searchBy != 'GROUP' && $scope.filterScope.editorGroups), so that editorGroups[0] will not give an error. I don't know enough if this is what you intended this code to do, so correct me when I'm wrong. :-)
70:81 means line 70, character 81.
The problem is at editorGroups[0]: If editorGroups is undefined, it cannot read editorGroups[0] because undefined has no property called 0.
Make sure that editorGroups isn't undefined and you'll be fine!
Here is my html code
<input type="button" name="Button" value=" Next " runat="server" id="btnNext" class="button" onclick ="if (!EmptyCheck()) return false;" />
and
function EmptyCheck() {
debugger;
var txtRSI = $("input[id$=txtRSI]").val();
var txtQFix = $("input[id$=txtQFix]").val();
var txtPassPercent = $("input[id$=txtPassPercent]").val();
var txtDefRejRate = $("input[id$=txtDefRejRate]").val();
var txtBuildVar = $("input[id$=txtBuildVar]").val();
var txtEffortVar = $("input[id$=txtEffortVar]").val();
var txtScheVar = $("input[id$=txtScheVar]").val();
var txtDeliMet = $("input[id$=txtDeliMet]").val();
var txtBudgetVar = $("input[id$=txtBudgetVar]").val();
var ddlOwner = $('select[id$="ddlOwner"]').val();
var ddlAccount = $('select[id$="ddlAccount"]').val();
var ddlProgramme = $('select[id$="ddlProgramme"]').val();
var ddlMonth = $('select[id$="ddlMonth"]').val();
var ddlYear = $('select[id$="ddlYear"]').val();
if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") ||
(txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1")
|| (ddlProgramme == "-1") || (ddlYear == 0)) {
alert("All fields are Mandatory");
return false;
}
else {
return true;
}
}
This is javascript method works fine in my browser.whereas the same is not working for others.
couldnt find why this happens..
inline code is not supported in chrome..i saw this in several posts..but it works for me..but not for others.. can somebody give an alternate solution to this???
also i have server side implememnted...wanted to achieve both.
i have tried like this also
getelementbyid('btnid').addeventlistener('click', function()){}
Have you tried just using the function? If your function returns a boolean value, why are you checking it to then return another boolean value? Just return EmptyCheck()
However, I will say that using the inline functions in my experience has been a poor decision. The functions can be managed/called more efficiently from an external jscript file. Here's an example:
Step 1
In your .js file, create a generic (but not anonymous) function for each page. For examples, we'll work in a hypothetical "Home" page.
function HomePageEvents() {
}
Step 2
Now we have a function that will serve as a container for your home page's javascript . . . But of course we need to run the function at some point. Well, we want to make sure the function is run once the document is finished loading of course, since we'll likely need to reference elements of the rendered page. So let's go ahead and create an anonymous function that will trigger this container function (aka, HomePageEvents() function). In your Home page, add the following:
<script type="text/javascript">
$(document).ready({function(){
HomePageEvents();
});
</script>
Step 3
What was it we were trying to do again? Oh, right! We want to add a click event for your button. Well, we can first start by creating the function for the click event. Now, I'm assuming your button has some kind of innate functionality, and all we are doing here is validating the button. If this is indeed the case, all we need to do is return a true or false indicating whether the event should continue.
function HomePageEvents() {
// Function to perform our validation.
function validateNext() {
if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") || (txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1") || (ddlProgramme == "-1") || (ddlYear == 0)) {
alert("All fields are Mandatory");
return false;
} else {
return true;
}
};
};
Step 4
Now that we have the validation function ready, we just need to add the function as a click event for our btnNext button.
function HomePageEvents() {
// Add function to btnNext button . . .
$('#btnNext').on('click', function(){
validateNext();
});
// Function to perform our validation.
function validateNext() {
if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") || (txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1") || (ddlProgramme == "-1") || (ddlYear == 0)) {
alert("All fields are Mandatory");
return false;
} else {
return true;
}
};
};
The end result is you get (1) all your javascript in a single file--which is better for caching, (2) the file is easily manageable, and (3) you can isolate code for each page.
As an alternate you can use jQuery click event. Read documentation from here .
$('.button').click(function(){ // button is the class name of your input control
// Your EmptyCheck Logic goes here.
});
Note that there are other solutions as well to bind click event using jQuery like .on().
$('.button').on('click', function() {
// Your EmptyCheck Logic goes here.
});
Hope this helps!
I have following Jquery
$('#txtSearch_text').attrchange(function (attrName) {
if (counter > 0) {
var contains = $('#txtSearch_text').attr('class').indexOf("validation");
if ($('#txtSearch_text').val() == '' && contains <= -1) {
$('#txtSearch_text').addClass('validation');
}
else if ($('#txtSearch_text').val() != '' && contains >= 0) {
$('#txtSearch_text').removeClass('validation');
}
}
//counter = 1;
});
The above jquery fires when txtSearch textbox changes any attribute. It works ok. but i want to fire above Jquery for multiple TextBoxes.. so if i have 4 TextBox then i will have to write Jquery 4 times for 4 different TextBox.
is there any way to write above jquery only one time for all TextBox ??
Thanks
You can pass comma seprated selector for all four textboxes. and inside use $(this) to get current object reference.Like this :
$('#txtSearch_text,#txtSearch_second,#txtSearch_third,#txtSearch_fourth').attrchange(function (attrName) {
if (counter > 0) {
var contains = $(this).attr('class').indexOf("validation");
if ($(this).val() == '' && contains <= -1) {
$(this).addClass('validation');
}
else if ($(this).val() != '' && contains >= 0) {
$(this).removeClass('validation');
}}});
Add a common class like txtSearch_text to all 4 elements then use it as a selector to target them
$('.txtSearch_text').attrchange(function (attrName) {
if (counter > 0) {
var contains = $(this).attr('class').indexOf("validation");
if ($(this).val() == '' && contains <= -1) {
$(this).addClass('validation');
} else if ($(this).val() != '' && contains >= 0) {
$(this).removeClass('validation');
}
}
//counter = 1;
});
TableHandler.prototype.IsAlreadySelected = function(dataToCheck)
{
var _this = this;
if (_this.NewTemplateUsageSelected.length > 0)
{
var len = _this.NewTemplateUsageSelected.length;
for (var i = 0; i < len; i++)
{
var an = _this.NewTemplateUsageSelected[i];
var isTemplateUsageDataDuplicate=false;
var isNonApplicableCGDataDuplicate=false;
if ((an.CustomerName == dataToCheck.CustomerName) &&
(an.ProgramName == dataToCheck.ProgramName) &&
(an.WorkpackageName == dataToCheck.WorkpackageName) &&
(an.ActivityName == dataToCheck.ActivityName) &&
(an.SelectedWorkFlowType == dataToCheck.SelectedWorkFlowType) &&
(an.SelectedWorkFlowCategory == dataToCheck.SelectedWorkFlowCategory) &&
(an.ReWorkflow== dataToCheck.ReWorkflow) &&
(an.AllowCheckGroupSelection == dataToCheck.AllowCheckGroupSelection) &&
(an.InitiatorGroupSelection == dataToCheck.InitiatorGroupSelection) &&
(an.R1GroupSelection == dataToCheck.R1GroupSelection) &&
(an.R2GroupSelection == dataToCheck.R2GroupSelection) &&
(an.R3GroupSelection == dataToCheck.R3GroupSelection) &&
(an.R4GroupSelection == dataToCheck.R4GroupSelection) &&
(an.InitiatorMinReworkEffort == dataToCheck.InitiatorMinReworkEffort) &&
(an.R1MinReworkEffort == dataToCheck.R1MinReworkEffort) &&
(an.R2MinReworkEffort == dataToCheck.R2MinReworkEffort) &&
(an.R3MinReworkEffort == dataToCheck.R3MinReworkEffort) &&
(an.R4MinReworkEffort == dataToCheck.R4MinReworkEffort) &&
(an.AllowFileAttachment == dataToCheck.AllowFileAttachment) &&
(an.QualityReviewer== dataToCheck.QualityReviewer) &&
(an.AllowLiabiltySelection == dataToCheck.AllowLiabiltySelection)&&
(an.SetToInactive == dataToCheck.SetToInactive)&&
(an.NonApplicabilityCheckGroupAllowed == dataToCheck.NonApplicabilityCheckGroupAllowed))
{
istemplateusagedataduplicate=true;
}
var checkgroupslendataToCheck=dataToCheck.NonApplicableCheckGroupList.length;
var nalen=an.NonApplicableCheckGroupList.length;
if(checkgroupslendataToCheck == nalen )
{
for (var i = 0 ;i < checkgroupslendataToCheck ; i++)
{
var naDatatocheck= dataToCheck.NonApplicableCheckGroupList[i];
var naData=an.NonApplicableCheckGroupList[i];
if(
( naDatatocheck.INonApplicability == naData.INonApplicability )&&
( naDatatocheck.R1NonApplicability == naData.R1NonApplicability )&&
( naDatatocheck.R2NonApplicability == naData.R2NonApplicability) &&
( naDatatocheck.R3NonApplicability == naData.R3NonApplicability )&&
( naDatatocheck.R4NonApplicability == naData.R4NonApplicability))
isNonApplicableCGDataDuplicate=true;
else
{
isNonApplicableCGDataDuplicate=false;
break;
}
}
if(isNonApplicableCGDataDuplicate==true && istemplateusagedataduplicate==true)
return true;
}
}
}
};
The above code is causing error Internet may run slowly. When i seached for a solution i got solutions like change of registry and IE version, Move the code to cdebehind,usage of plugin etc.. Which are not feasible in our project. So I have to change the above logic.Any inbuilt function in javascript or jquery which i can use to campare a two nested list.
The inner loop needs to use a different variable as its counter or it will make the outer loop go on infinitely. Currently you are using i for both loops.