Develop Reference

jQuery script works only once, then TypeError: $(...) is not a function

I've downloaded this script for use conditional fields in forms:
(function ($) {
$.fn.conditionize = function(options) {
var settings = $.extend({
hideJS: true
}, options );
$.fn.showOrHide = function(is_met, $section) {
if (is_met) {
$section.slideDown();
}
else {
$section.slideUp();
$section.find('select, input').each(function(){
if ( ($(this).attr('type')=='radio') || ($(this).attr('type')=='checkbox') ) {
$(this).prop('checked', false).trigger('change');
}
else{
$(this).val('').trigger('change');
}
});
}
}
return this.each( function() {
var $section = $(this);
var cond = $(this).data('condition');
// First get all (distinct) used field/inputs
var re = /(#?\w+)/ig;
var match = re.exec(cond);
var inputs = {}, e = "", name ="";
while(match !== null) {
name = match[1];
e = (name.substring(0,1)=='#' ? name : "[name=" + name + "]");
if ( $(e).length && ! (name in inputs) ) {
inputs[name] = e;
}
match = re.exec(cond);
}
// Replace fields names/ids by $().val()
for (name in inputs) {
e = inputs[name];
tmp_re = new RegExp("(" + name + ")\\b","g")
if ( ($(e).attr('type')=='radio') || ($(e).attr('type')=='checkbox') ) {
cond = cond.replace(tmp_re,"$('" + e + ":checked').val()");
}
else {
cond = cond.replace(tmp_re,"$('" + e + "').val()");
}
}
//Set up event listeners
for (name in inputs) {
$(inputs[name]).on('change', function() {
$.fn.showOrHide(eval(cond), $section);
});
}
//If setting was chosen, hide everything first...
if (settings.hideJS) {
$(this).hide();
}
//Show based on current value on page load
$.fn.showOrHide(eval(cond), $section);
});
}
}(jQuery));
I'm trying this because I need to use conditionize() in one of my tabs and when I reload the tab, all works but if I go to other tab and I return to the previous tab(where I need this works), I get that error.
When I change tabs, I'm only reloading one part of the page.
When I load the page this works perfectly, but if I try to call function again from browser console, it tells me that TypeError: $(...)conditionize() is not a function.
I have included the script in header tag and I'm calling it with this script on the bottom of body:
<script type="text/javascript">
$('.conditional').conditionize();
</script>
EDIT:
I have written
<script type="text/javascript">
console.log($('.conditional').conditionize);
setTimeout(function () {console.log($('.conditional').conditionize);}, 2);
</script>
and this print me at console the function, and when 2 milliseconds have passed, it print me undefined

I have found the solution.
Because any reason, the $ object and jQuery object are not the same in my code.
I have discovered it using this on browser console:
$===jQuery
This return false (This was produced because in other JS, I was using the noConflict(), which give me the problem)
Explanation: noConflict()
So I have solved it changing the last line of my JS by:
//Show based on current value on page load
$.fn.showOrHide(eval(cond), $section);
});
}
}($));
Putting the $ instead of 'jQuery'

DevExtreme DataGrid onRowDblClick

I want to implement an onRowDblClick event for the DevExtreme DataGrid.
I need this Event for multiple grids so I would like to implement this for the DataGrid for general.
I was thinking about overriding the onClick action and check for a double click or extend the DataGrid with an onRowDblClick Action but i have no idea how to implement this.
Please advise a way to do this functionality.
OK, finally I implemented an addRowDblClick function which looks like this:
var clickTimer, lastRowClickedId;
function addRowDblClick(id, dblClickFunc) {
$("#" + id).dxDataGrid({
onRowClick: function (e) {
//OBTAIN YOUR GRID DATA HERE
var grid = $("#" + id).dxDataGrid('instance');
var rows = grid.getSelectedRowsData();
if (clickTimer && lastRowCLickedId === e.rowIndex) {
clearTimeout(clickTimer);
clickTimer = null;
lastRowCLickedId = e.rowIndex;
//YOUR DOUBLE CLICK EVENT HERE
if (typeof dblClickFunc == 'function')
dblClickFunc();
} else {
clickTimer = setTimeout(function () { }, 250);
}
lastRowCLickedId = e.rowIndex;
}
});
}
And at the DataGrid I called an function OnContentReady where I call this function with the Id and the function I want to call when I double click.
addRowDblClick('dxDataGrid', showDetail);

I that work with this :
$("#grdMain").dxDataGrid({
....
onRowPrepared:function(event){
$(event.rowElement).on('dblclick', function(){
console.log('row dblclicked');
}).on('remove', function(){
//on remove event in jquery ui libraries or
// https://stackoverflow.com/questions/29255801/jquery-on-remove-not-working-parent-node-fire-empty
$(this).off('dblclick remove');
})
}
})

I did this and worked pretty well (I followed this answer)
var clickTimer, lastRowCLickedId;
$("#grdMain").dxDataGrid({
...
onRowClick: function (e) {
//OBTAIN YOUR GRID DATA HERE
var grid = $("#grdMain").dxDataGrid('instance');
var rows = grid.getSelectedRowsData();
if (clickTimer && lastRowCLickedId === e.rowIndex) {
clearTimeout(clickTimer);
clickTimer = null;
lastRowCLickedId = e.rowIndex;
//YOUR DOUBLE CLICK EVENT HERE
alert('double clicked!');
} else {
clickTimer = setTimeout(function () { }, 250);
}
lastRowCLickedId = e.rowIndex;
}
});

Handler defined with document.on deleted when object deleted from DOM

I have some severe memory leaks on my SPA. I managed to localize where the leak is, but I can't fix it. I have a code like this :
$(document).on("click.widget", ".glyphicon-collapse-down", function (e) {
var contentElement = $(e.target).closest(".widget").find(".widget-body");
$(e.target)
.removeClass("glyphicon-collapse-down")
.addClass("glyphicon-collapse-up");
kendo.fx(contentElement).expand("vertical").stop().play();
});
I can generate widgets over time on my single page, so I need the buttons to have a handler even if they don't exist yet (every widget come with a button group). When I switch from the current page to another, I delete everything from the page and load a new page with an ajax request. And here is appears the memory leak. I suspect that it might lies in the fact that the handlers are not deleted properly.
EDIT : The leak becomes very smaller when I don't include this script in the app :
//expand the widget
$(document).on("click.widget", ".glyphicon-collapse-down", function (e) {
var contentElement = $(e.target).closest(".widget").find(".widget-body");
$(e.target)
.removeClass("glyphicon-collapse-down")
.addClass("glyphicon-collapse-up");
kendo.fx(contentElement).expand("vertical").stop().play();
});
//collapse the widget
$(document).on("click.widget", ".glyphicon-collapse-up", function (e) {
var contentElement = $(e.target).closest(".widget").find(".widget-body");
$(e.target)
.removeClass("glyphicon-collapse-up")
.addClass("glyphicon-collapse-down");
kendo.fx(contentElement).expand("vertical").stop().reverse();
});
//remove the widget and updating the layout accordingly
$(document).on("click.widget", ".glyphicon-remove", function (e) {
var contentElement = $(e.target).closest(".widget");
var ancestor = $(contentElement).parent();
var rightColumn = $("#right-column");
var mainColumn = $("#main-column");
kendo.unbind(contentElement);
kendo.destroy(contentElement);
$(contentElement).fadeOut().remove();
// //Widget layout modification on remove
if ((rightColumn.items().length - 1 == 0) && (ancestor.attr("id") == "right-column")) {
if (mainColumn.items().length == 1) {
$("#main-column").removeClass("col-lg-6").hide().addClass("col-lg-12").fadeIn();
}
else if (mainColumn.items().length > 1) {
var firstWidget = mainColumn.items().last();
$(firstWidget).hide().prependTo("#right-column").fadeIn();
}
}
if ((mainColumn.items().length - 1 == 0) && (ancestor.attr("id") == "main-column")) {
if (rightColumn.items().length == 1) {
$("#right-column").removeClass("col-lg-6").hide().addClass("col-lg-12").fadeIn();
}
else if (rightColumn.items().length > 1) {
var firstWidget = rightColumn.items().last();
$(firstWidget).hide().prependTo("#main-column").fadeIn();
}
}
});
//Enable the widget fullscreen
$(document).on("click.widget", ".widget-fullscreen-on", function (e) {
var contentElement = $(e.target).closest(".widget");
contentElement.addClass("fullscreen");
$(e.target)
.removeClass("glyphicon-resize-full")
.removeClass("widget-fullscreen-on")
.addClass("glyphicon-resize-small")
.addClass("widget-fullscreen-off");
});
//Disable the widget fullscreen
$(document).on("click.widget", ".widget-fullscreen-off", function (e) {
var contentElement = $(e.target).closest(".widget");
contentElement.removeClass("fullscreen");
$(e.target)
.removeClass("glyphicon-resize-small")
.removeClass("widget-fullscreen-off")
.addClass("glyphicon-resize-full")
.addClass("widget-fullscreen-on");
});
//Inserts a widget into the page content and modifies the layout accordingly
function insertWidget(jtext) {
jtext.attr("id", "");
if (($('#main-column').items().length == 0) && ($('#right-column').items().length == 0)) {
if ($("#main-column").hasClass("col-lg-12")) {
$(jtext).hide().prependTo('#main-column').fadeIn();
}
else if ($("#right-column").hasClass("col-lg-12")) {
$(jtext).hide().prependTo('#right-column').fadeIn();
}
}
else if ($("#main-column").hasClass("col-lg-12")) {
$("#main-column").removeClass("col-lg-12").addClass("col-lg-6");
$(jtext).hide().prependTo('#right-column').fadeIn();
}
else if ($("#right-column").hasClass("col-lg-12")) {
$("#right-column").removeClass("col-lg-12").addClass("col-lg-6");
$(jtext).hide().prependTo('#main-column').fadeIn();
}
else if ($('#right-column').items().length < $('#main-column').items().length) {
$(jtext).hide().prependTo('#right-column').fadeIn();
}
else {
$(jtext).hide().prependTo('#main-column').fadeIn();
}
}

run javascript function from master page button

I have a javascript function on the child page that I need to run when the save button on the master page is clicked.
ValidateCheckList = function() {
var ErrorCodeU1001 = "U1001";
var ErrorCodeU1002 = "U1002";
var ErrorCodeU1003 = "U1003";
var errors = [];
$('<%= errorsHiddenField.ClientID %>').val("0");
var fingerprintsTaken = $('<%= FingerprintsTakenYesNo.PluginSelector %>').YesNoPlugin(YesNoMethodsEnum.IsYes);
if (!fingerprintsTaken) {
errors.push(ErrorCodeU1001);
}
var dnaTaken = $('<%= DNATakenYesNo.PluginSelector %>').YesNoPlugin(YesNoMethodsEnum.IsYes);
if (!dnaTaken) {
errors.push(ErrorCodeU1002);
}
var photographTaken = $('<%= PhotographTakenYesNo.PluginSelector %>').YesNoPlugin(YesNoMethodsEnum.IsYes);
if (!photographTaken) {
errors.push(ErrorCodeU1003);
}
if (errors.length > 0) {
('<%= errorsHiddenField.ClientID %>').val(errors.length.toString());
$(document).PageUtilPlugin(PageUtilMethodsEnum.DisplayUserNotificationMessage, { messageType: "Warning", message: errors });
}
}
I have tried -
$(document).ready(function() {
document.getElementById("ctl00_ctl00_ContentPlaceHolder1_SaveButton").onclick = ValidateCheckList;
but this doesn't work.
It also needs to do a postback.
Can anyone help?
thanks

try this
change you code like this
function ValidateCheckList ()
{
if(allvalidates)
return true;
else
return false;
}
on master page save button in page load
button.Attribute.Add("OnClick", "return ValidateCheckList ()");

what do you mean with the parent and child exactly ?
if you mean the pop-ed up window is the child window you can use this
childwindow = window.open("child.html", "Pop", "width=700,height=400, scrollbars=1");
childwindow.yourfunction();

Getting the query portion of the URL and performing an action on it

Im currently creating a website for one of my classes in school.
I want the site to be setup so it doesn't look like its reloading.
BY doing the pages in a query: ?page=index.
I do this by fading in the Div depending on the query. I know the page actually reloads, but it doesnt look like its not reloading with the fade. You can see my site here: http://yolatools.yolasite.com/resources/project.html?page=index
Now the only problem is that when I do ?page=fcduj its suppose to show the page not found DIV.
My code is:
function load(){
var profile=location.search;
if(profile=="?page=index")
{
$('.section, #home').fadeIn(1500);
$('.i').addClass('active');
$('.a, .m').addClass('grey');
}
else if(profile=="?page=about")
{
$('.section, #about').fadeIn(1500);
$('.a').addClass('active');
$('.m, .i').addClass('grey');
}
else if(profile=="?page=more"){
$('.section, #more').fadeIn(1500);
$('.m').addClass('active');
$('.a, .i').addClass('grey');
}
else if(profile==="")
{
location.href = '?page=index';
}
if(profile !== '?page=index' && profile !== '?page=about' && profile !== '?page=more') {
var rsts = profile.substr(6);
$('#query').html(rsts);
$('#wrong').fadeIn(1500);
}
}
I launch this function with onload in the body tag.
The part that is suppose to make the Page not found DIV to show is:
if(profile !== '?page=index' && profile !== '?page=about' && profile !== '?page=more') {
var rsts = profile.substr(6);
$('#query').html(rsts);
$('#wrong').fadeIn(1500);
}
But it doesn't seem to be working, but I have no Idea why. For the ?page=index I don't want to use PHP even though that's usually used with PHP. Thanks in advance.

The #wrong div is shown, but the parent .section div is not shown.
Change that if statement to:
if(profile !== '?page=index' && profile !== '?page=about' && profile !== '?page=more') {
var rsts = profile.substr(6);
$('#query').html(rsts);
$('.section, #wrong').fadeIn(1500);
}

Create a custom 404 error page, that has the needed JS

replace your javascript with this:
function home(){
$('#home').fadeIn(1000);
$('#about, #more').fadeOut(10);
}
function about(){
$('#about').fadeIn(1000);
$('#home, #more').fadeOut(100);
}
function more(){
$('#more').fadeIn(1000);
$('#about, #home').fadeOut(100);
}
function menu(){$('#h1').fadeIn(1000);setTimeout('other()',1000)}
function other(){
$('#h3').fadeIn(500);
setTimeout('$("#menu").fadeIn(500);', 500)
}
function load(){
var profile=location.search;
if(profile=="?page=index")
{
$('.section, #home').fadeIn(1500);setTimeout('menu()', 1500)
}
else if(profile=="?page=about")
{
$('.section, #about').fadeIn(1500);setTimeout('menu()', 1500)
}
else if(profile=="?page=more"){
$('.section, #more').fadeIn(1500);setTimeout('menu()', 1500)
}
else if(profile==="")
{
location.href = '?page=index';
}
else {
var rsts = profile.substr(6);
$('#query').html(rsts);
$('#wrong,#articles').fadeIn(1500);
$('#about, #more, #home').hide();
}
}