I am facing a weird problem here :
In firebug i see this error :
$ is not a function
_handleEvent() in pro.js
e = load
var handlers = this.events[e.type], el = $(this);
The full function is defined as follows :
_handleEvent : function(e) {
var returnValue = true;
e = e || Event._fixEvent(window.event);
var handlers = this.events[e.type], el = $(this);
for (var i in handlers) {
el.$$handleEvent = handlers[i];
if (el.$$handleEvent(e) === false) returnValue = false;
}
return returnValue;
}
Can you guys kindly help me out here and figure out why is this error being thrown here. It's not related to jquery, i guess.
NOTE : It gives the error : $(this ) is not a function in IE
I think you've either not loaded jQuery correctly or you are executing this code before the inclusion of jQuery. Or you might be using jQuery's noConflict-mode, http://api.jquery.com/jQuery.noConflict/, in which case you'd need to replace $() by jQuery().
Also, make sure you execute this code either at document load or, even better, when jQuery is loaded:
$(document).ready(function() {
// your code goes here
});
Related
I'm facing this very weird issue that my function in document ready is not triggered, unless I put alert after the function. I found this out when I debug using the alert, and apparently everything was working fine. But when I removed the alert, function 'RaiseEvent' never get called.
Here's my HTML:
<script src="../Content/jquery.mobile-1.4.2/js/jquery.js"></script>
<script src="../Content/jquery.mobile-1.4.2/js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="Scripts/hybrid.js"></script>
<script>
$(document).ready(function(){
//populate form
//alert('Calling POPULATE-FORM');
RaiseEvent('POPULATE-FORM');
//alert('After POPULATE-FORM');
});
</script>
The RaiseEvent function is retrieved from hybrid.js:
function RaiseEvent(eventName)
{
if (!eventName) eventName = '';
var qs = '';
var elms = document.getElementsByTagName('*');
for (var i = 0; i < elms.length; i++) {
if (elms[i].name) {
qs += (qs.length > 0 ? '&' : '') + encodeURIComponent(elms[i].name) + '=' + encodeURIComponent(elms[i].value);
}
if (elms[i].type == 'checkbox' && elms[i].checked)
qs += (qs.length > 0 ? '&' : '') +
'checked:' + encodeURIComponent(elms[i].name) + '=1';
}
location.href = 'xpostback:' + eventName + ':' + qs;
}
I've googled this issue and found few people facing this also Here but I followed his solution already to no avail.
Anyone facing the same issue or have any suggestions/advice what might go wrong?
I have some thoughts on your problem.
a) Callback function in ready()
From documentation handler is callback function which means that when DOM element is ready your function is beeing called. I suppose that is not the problem.
document.ready( handler );
b) Jquery.mobile
Fast googling told me that you could use different function. See pagecreated documentation.
$(document).on('pagecreated',function(){
RaiseEvent('POPULATE-FORM');
});
Also look here:
jQuery mobile $(document).ready equivalent
jQuery Mobile: document ready vs page events
c) Error in function RaiseEvent(eventName)
Even if your function works with alert this doesn't guarantee that you function is working properly. I had a lot of situations that in all modern browsers my code works but there was some bugs. Only Internet Explorer was so kind and throw me errors. I suggest running your code with JS debugger.
Summary
I would start from b) and then try to look at c). Good luck :)
Apparently there is another "document.ready" function in hybrid.js that caused inconsistent RaiseEvent calling. Probably because the asynchronous nature of Javascript, the RaiseEvent('POPULATE-FORM') get overlapped by the RaiseEvent('DOCUMENT-READY') in hybrid.js:
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
RaiseEvent("DOCUMENT_READY");
Init();
clearInterval(readyStateCheckInterval);
}
}, 50);
Credits to #Barmar for helping me debugging the isssue!
I'm trying to up my js foo and start to use the module patter more but I'm struggling.
I have a main page with a jquery-ui element that pops up a dialog that loads an ajax requested page for data entry. The below code is contained within the popup ajax page.
After the pop up is loaded the Chrome console is able to see and execute ProtoSCRD.testing() just fine. If I try to run that in the jQuery.ready block on the page, I get:
Uncaught ReferenceError: ProtoSCRD is not defined
Yet i can execute toggleTypeVisable() in the ready block and life is good. Can anyone shed some light?
$(document).ready(function() {
setHoodStyleState();
$('#hood-style').change(function(){
hstyle = $('#hood-style').val();
if ( hstyle.indexOf('Custom') != -1) {
alert('Custom hood style requires an upload drawing for clarity.');
}
setHoodStyleState();
});
setCapsState();
$('#caps').change(function(){
setCapsState();
});
setCustomReturnVisibility();
$('#return').change(function(){ setCustomReturnVisibility(); });
toggleTypeVisable();
$('#rd_type').change(function(){
toggleTypeVisable();
});
ProtoSCRD.testing();
});
function toggleTypeVisable(){
if ( $('#rd_type').val() == 'Bracket' ) {
$('.endcap-ctl').hide();
$('.bracket-ctl').show();
}
if ( $('#rd_type').val() == 'Endcap' ) {
$('.bracket-ctl').hide();
$('.endcap-ctl').show();
}
if ( $('#rd_type').val() == 'Select One' ) {
$('.bracket-ctl').hide();
$('.endcap-ctl').hide();
}
}
ProtoSCRD = (function($, w, undefined) {
testing = function(){
alert('testing');
return '';
}
getDom = function(){
return $('#prd-order-lines-cnt');
}
return {
testing: testing,
getDom: getDom
};
}(jQuery, window));
calling the popup dialog like so - which is in fact in another ready in a diff file on the parent page:
// enable prototype button
$( "#proto-btn" ).click(function(e){
e.preventDefault();
showPrototype();
});
I don't know if it will solve your problems at all, but you are definitely missing several var statements you really should have:
var ProtoSCRD = (function($, w, undefined) {
var testing = function(){
alert('testing');
return '';
};
var getDom = function(){
return $('#prd-order-lines-cnt');
};
return {
testing: testing,
getDom: getDom
};
}(jQuery, window));
IMHO, it's best practice to use var for every variable you declare. (Function declarations do so implicitly.)
But I really don't know if this will help solve anything. But it should store everything in its proper scope.
Update
Here's one possible issue: if the document is already ready (say this is loading at the end of the body), then perhaps jQuery is running this synchronously. Have you tried moving the definition of ProtoSCRD above the document.ready block?
I'm desperate having spent well over an hour trying to troubleshoot this. I am trying to access a node in the DOM which is created from an ASP.NET control. I'm using exactly the same id and I can see that they match up when looking at the HTML source code after the page has rendered. Here's my [MODIFIED according to suggestions, but still not working] code:
ASP.NET Header
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
$(document).ready(
var el = document.getElementById('<%= txtBox.ClientID %>');
el.onchange = alert('test!!');
)
</script>
</asp:Content>
ASP.NET Body
<asp:TextBox ID="txtBox" runat="server"></asp:TextBox>
Resulting Javascript & HTML from above
<script type="text/javascript">
$(document).ready(
var el = document.getElementById('MainContent_txtBox');
el.onchange = alert('test!!');
)
</script>
...
<textarea name="ctl00$MainContent$txtBox" id="MainContent_txtBox"></textarea>
I can only assume that the script is loading before the control id has been resolved, yet when I look at the timeline with Chrome's "Inspect Element" feature, it appears that is not the case. When I created a regular textarea box to test and implement the identical code (different id of course), the alert box fires.
What on earth am I missing here? This is driving me crazy >.<
EDIT: Wierd code that works, but only on the initial page load; firing onload rather than onchange. Even jQuery says that .ready doesn't work properly apparently. Ugh!!
$(document).ready(function() {
document.getElementById('<%= txtBox.ClientID %>').onchange = alert('WORKING!');
})
Assuming the rendered markup does appear in that order, the problem is that the element doesn't yet exist at the time your JavaScript is attempting to locate it.
Either move that JS below the element (preferably right at the end of the body) or wrap it in something like jQuery's document ready event handler.
Update:
In response to your edits, you're almost there but (as others have mentioned) you need to assign a function to the onchange event, not the return result of alert(). Something like this:
$(document).ready(function() {
// Might as well use jQuery to attach the event since you're already using
// it for the document ready event.
$('#<%= txtBox.ClientID %>').change(function() {
alert('Working!');
});
});
By writing onchange = alert('Working');, you were asking JavaScript to assign the result of the alert() method to the onchange property. That's why it was executing it immediately on page load, but never actually in response to the onchange event (because you hadn't assigned that a function to run onchange).
Pick up jQuery.
Then you can
$(function()
{
var el = document.getElementById('<%= txtBox.ClientID %>');
el.onclick() { alert('test!!'); }
});
Other answers have pointed out the error (attempting to access DOM nodes before they are in the document), I'll just point out alternative solutions.
Simple method
Add the script element in the HTML below the closing tag of the element you wish to access. In its easiest form, put it just before the closing body tag. This strategy can also make the page appear faster as the browser doesn't pause loading HTML for script. Overall load time is the same however, scripts still have to be loaded an executed, it's just that this order makes it seem faseter to the user.
Use window.onload or <body onload="..." ...>
This method is supported by every browser, but it fires after all content is loaded so the page may appear inactive for a short time (or perhaps a long time if loading is dealyed). It is very robust though.
Use a DOM ready function
Others have suggested jQuery, but you may not want 4,000 lines and 90kb of code just for a DOM ready function. jQuery's is quite convoluted so hard to remove from the library. David Mark's MyLibrary however is very modular and quite easy to extract just the bits you want. The code quality is also excellent, at least the equal of any other library.
Here is an example of a DOM ready function extracted from MyLibrary:
var API = API || {};
(function(global) {
var doc = (typeof global.document == 'object')? global.document : null;
var attachDocumentReadyListener, bReady, documentReady,
documentReadyListener, readyListeners = [];
var canAddDocumentReadyListener, canAddWindowLoadListener,
canAttachWindowLoadListener;
if (doc) {
canAddDocumentReadyListener = !!doc.addEventListener;
canAddWindowLoadListener = !!global.addEventListener;
canAttachWindowLoadListener = !!global.attachEvent;
bReady = false;
documentReady = function() { return bReady; };
documentReadyListener = function(e) {
if (!bReady) {
bReady = true;
var i = readyListeners.length;
var m = i - 1;
// NOTE: e may be undefined (not always called by event handler)
while (i--) { readyListeners[m - i](e); }
}
};
attachDocumentReadyListener = function(fn, docNode) {
docNode = docNode || global.document;
if (docNode == global.document) {
if (!readyListeners.length) {
if (canAddDocumentReadyListener) {
docNode.addEventListener('DOMContentLoaded',
documentReadyListener, false);
}
if (canAddWindowLoadListener) {
global.addEventListener('load', documentReadyListener, false);
}
else if (canAttachWindowLoadListener) {
global.attachEvent('onload', documentReadyListener);
} else {
var oldOnLoad = global.onload;
global.onload = function(e) {
if (oldOnLoad) {
oldOnLoad(e);
}
documentReadyListener();
};
}
}
readyListeners[readyListeners.length] = fn;
return true;
}
// NOTE: no special handling for other documents
// It might be useful to add additional queues for frames/objects
else {
if (canAddDocumentReadyListener) {
docNode.addEventListener('DOMContentLoaded', fn, false);
return true;
}
return false;
}
};
API.documentReady = documentReady;
API.documentReadyListener = documentReadyListener;
API.attachDocumentReadyListener = attachDocumentReadyListener;
}
}(this));
Using it for your case:
function someFn() {
var el = document.getElementById('MainContent_txtBox');
el.onclick = function() { alert('test!!');
}
API.attachDocumentReadyListener(someFn);
or an anonymous function can be supplied:
API.attachDocumentReadyListener(function(){
var el = document.getElementById('MainContent_txtBox');
el.onclick = function() { alert('test!!');
};
Very simple DOM ready functions can be done in 10 lines of code if you just want one for a specific case, but of course they are less robust and not as reusable.
I want to get page_tag information from the page and want to make sure that DOM for this page is already ready before getting the page tag information.
I am doing
$(document).ready(
{
alert("test");
var page_tag : $("head meta[name='page_tag']").attr('content');
page_tag : (page_tag) ? page_tag : '';
}
But it gives me errors,
missing : after property id
alert("Check if document is ready");\n
Any suggestions on what could be the possible reasons for it or any other way of checking if the dom is ready or not before getting page_tag information.
try
$(document).ready(function() {
var page_tag = $("head meta[name='page_tag']").attr('content');
alert(page_tag);
});
The ready() function requires you to pass in a function that it will execute when the document is ready.
You have a syntax error, you are using : instead of = to make the assignment:
var page_tag = $("head meta[name='page_tag']").attr('content');
page_tag = (page_tag) ? page_tag : '';
Or simply:
var page_tag = $("head meta[name='page_tag']").attr('content') || '';
The above will work, because the attr method returns a String or undefined if the attribute is not present.
I'm pretty sure it should be:
$(document).ready(function() {
alert("test");
var page_tag = $("head meta[name='page_tag']").attr('content');
page_tag = (page_tag) ? page_tag : '';
}
You need to use a = instead of :
Hey guys, I have some code that I found that I would rather use as jQuery instead of direct JavaScript. Hopefully you guys can help me convert it:
var sub = document.getElementById('submit');
sub.parentNode.removeChild(sub);
document.getElementById('btn-area').appendChild(sub);
document.getElementById('submit').tabIndex = 6;
if ( typeof _some_var != 'undefined') {
document.getElementById('some-textarea').value = _some_var;
}
document.getElementById('something').style.direction = 'ltr';
The reason I want to do this is because FireFox is telling me that sub is null when it is used on the second line. This happens because that code runs before the the submit button appears. So naturally I would like to use jQuery for the purpose of running the code after everything is ready. Yes, I know it's possible to do that in direct JavaScript as well, but I would rather have jQuery either way.
Thanks!
There's absolutely no need to use jQuery for this purpose. Assuming you do not already have a load event handler:
window.onload = function() {
// your code
};
Or throw it right before the end body tag, or to be more specific anywhere in the source after the submit button - there's nothing really dirty about it.
<script src="your-code.js"></script>
</body>
However, a quick jQuery rewrite..
$(function() {
$('#submit').appendTo('#btn-area').attr('tabIndex', 6);
if ( typeof yourVar != 'undefined' ) {
$('#textarea').val( yourVar );
}
$('#something').css('direction', 'ltr');
});
Did not test.
Here it is:
var sub_html = $('#submit').html();
$('#submit').html('');
$('#btn-area').html(sub_html);
$('#submit').attr('tabindex', 6);
if(typeof _some_var != 'undefined')
{
$('#some-textarea').val(_some_var);
}
$('#something').css('direction', 'ltr');