I have this code in my page.
$(document).ready(function () {
$("#ba_object_Code").change(function () { $("#HRBK").val($(this).val()); });
$.cookie('cookie_name', 'cookie_value');
if (sessid == 'xyz') {
$("#ControlPlanID").removeAttr('disabled');
}
$(".t-grid-action.t-button.t-state-default.t-grid-add").click(function () {
$.cookie('sessid', 'xyz');
});
});
I am getting this error
Microsoft JScript runtime error: Object doesn't support this property or method
Your not defining sessid, so when you call it, it will fail.
See working example: http://jsfiddle.net/zNDHN/
$(document).ready(function () {
var sessid = $.cookie('sessid');
$("#ba_object_Code").change(function () { $("#HRBK").val($(this).val()); });
$.cookie('cookie_name', 'cookie_value');
if (sessid == 'xyz') {
$("#ControlPlanID").removeAttr('disabled');
console.log('cookie_found');
}
$(".t-grid-action.t-button.t-state-default.t-grid-add").click(function () {
$.cookie('sessid', 'xyz');
console.log('cookie_created');
});
});
order is important and jquery files have to be included in_layout.cshtml incase master page is used... 'JQuery' is undefined
Related
My problem is that the jQuery load event is not working with my custom Javascript structure. I have tried many solutions to solve this problem but I failed.
var Init_Template = (function($) {
"use strict";
return {
init: function() {
this.plugins();
this.menus();
},
plugins: function() {
// Codes
},
menus: function() {
$(window).on("load", function(e) {
alert();
});
}
};
})(jQuery);
// Load when ready
jQuery(document).ready(function() {
function System_Init() {
Init_Template.init();
}
if (window.self === window.top) {
System_Init();
} else {
setTimeout(System_Init);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You will want that script with the jquery loading BEFORE you execute your javascript and jquery code so move the script tag above your code. I believe this will solve your issue for you.
I have a question about javascript module pattern with JQuery.
Im a little confused about how i should use jquery. I have all my javascript modules in seperate files.
Lets say I have a small module
var jqueryTest = (function () {
function privateMethod() {
$("input[type=submit], a, button")
.button()
.click(function () {
alert("ALARM");
});
}
return {
test: function () {
privateMethod();
}
};
})();
I then call the module from my index and it works.
I then tried to pass JQuery as a parameter like this
var jqueryTest = (function (jq) {
function privateMethod() {
jq("input[type=submit], a, button")
.button()
.click(function () {
alert("ALARM");
});
}
return {
test: function () {
privateMethod();
}
};
})(JQuery);
But then it stops working?
The word "JQuery" thats passed as a parameter, what does this refer to?
And how should I use JQuery when having the javascript in different files?
Hope someone can help
you have a typo. its jQuery. not JQuery
Try using jQuery instead of JQuery:
Example:
html:
<div id="myDiv"></div>
javascript:
var jqueryTest = (function (jq) {
jq("#myDiv").html('<label>Hi there!</label>');
return "hi " + jq("#myDiv").text();
})(jQuery);
alert(jqueryTest);
below methods are working fine when I have them in razor or partial views. after them to JS from these are not at all. JS file is loading and other regular javascript methods working fine. What could be the wrong?
$('.phonelocation').on('change', function () {
$("#HdnCommunicationLocation").val(this.value); // or $(this).val()
});
$('.phonetype').on('change', function () {
$("#HdnCommunicationType").val(this.value); // or $(this).val()
$('.phoneCountry').trigger('change');
});
$('.phoneCountry').change(function () {
..
}
You must add the js after the document is loaded.
$(document).ready(function () {
$(document).on('change', '.phonelocation', function () {
$("#HdnCommunicationLocation").val(this.value); // or $(this).val()
});
$(document).on('change', '.phonetype', function () {
$("#HdnCommunicationType").val(this.value); // or $(this).val()
$('.phoneCountry').trigger('change');
});
$(document).on('change', '.phoneCountry', function () {
..
}
});
update: try adding the events to the document that way no matter when the elwments are added the events will still work
I want to call a function with a namespace based on its name.
Perhaps some background: What I want is, dynamically bind pages via $.mobile.loadPage(inStrUrl, { showLoadMsg: false }); and then, based on the current page, invoke a function within a loaded page. For example: each page has a showFilter function, the Event is attached to a main.html - page which should call the matching function in the current page.
I also tried some solutions, with jquery too, but nothing works for me.
This is my function code:
function namespace() { }
namespace.showFilter = function () {
alert("Test");
}
And want to "invoke" or "call" it via its name.
This is what i tried at least.
$(document).ready(function() {
var fn = window["namespace.showFilter"];
fn();
});
I get error TypeError: fn is not a function
Here is a fiddle http://jsfiddle.net/xBCes/1/
You can call it in the following way:
$(document).ready(function() {
window["namespace"]["showFilter"]();
});
or
$(document).ready(function() {
window["namespace"].showFilter();
});
or
$(document).ready(function() {
window.namespace.showFilter();
});
I found that I had to manually set it to window.
window.namespace = function() { }
window.namespace.showFilter = function () {
alert("Test");
};
$(document).ready(function() {
var fn = window["namespace"]["showFilter"];
fn();
});
http://jsfiddle.net/xBCes/4/
Like this:
$(function() {
window.namespace.showFilter();
});
P.S. I shortened the $(document).ready(...)
function namespace() {}
namespace.showFilter = function () {
alert("Test");
}
$(document).ready(function() {
var fn = namespace.showFilter();
fn();
});
http://jsfiddle.net/xBCes/3/
I just created my first jQuery plugin , it is very simple it slideToggle two Divs , the code works fine and it do what i want , the problem is that i get an ERROR message at the console saying :
Uncaught TypeError: object is not a function
it refer to this line of code
})(jQuery);
CODE
$(function($) {
$.fn.toggleDiv = function(opt) {
var options = $.extend({}, $.fn.toggleDiv.objectOptions, opt);
return this.each(function() {
if (options.animation == true) {
$(this).slideToggle();
} else {
$(this).toggle();
}
});
};
$.fn.toggleDiv.objectOptions = {
animation: false
};
$("button").click(function() { $("#Div1, #Div2")
.toggleDiv({animation : fa}); return false; });
})(jQuery);
Does any one know what is that error and how can i fix it thanks
You either want to do
(function ($) { ... })(jQuery);
if you want your code to be run immediatly,
or
jQuery(function ($) { .... });
for your code to be run on document-ready.
You are referring to $("button"), and therefore need the document tree to be available. So use the second version. A even nicer solution would be to use the jQuery function "delegate", this would look something like this:
jQuery(function ($) {
$(document).delegate("button", "click", function (ev) { ... });
});