I have a master grid and sub grid. On click of row expand , I was able to fetch the result and display. It was working fine in IE and chrome. Now I am getting Error: Object doesn't support property or method 'jqGrid' in IE10 but it works fine in chrome.
I am loading grid.locale before jqgrid src . List of scripts:
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.carouFredSel-6.2.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.src.js" type="text/javascript"></script>
I am able to show the result in master grid. When I expand the sub grid , I am getting the error.The following is the code where I am getting the error.
subGrid: true,
subGridRowExpanded: function (subgrid_id, row_id) {
var orderid= jQuery('#tblJQGrid').jqGrid('getCell', row_id, 'OrderID');
Line: 291
Error: Object doesn't support property or method 'jqGrid'
You should include more full list of JavaScript files which you use and it's order. .
One of the possible reasons could be the usage of jQuery version which has bug in IE10. For example if you would use jQuery 2.0.2 you could have the described problem. Usage of jQuery 2.0.3 or 1.10.2 will solve the problem.
Related
I have the following page http://link.org/ (tested and is valid W3 HTML), where I am using the jquery cycle slideshow function (old version).
But even though the cycle function file is definitely being called, I am still getting an error: $(...).cycle is not a function
Would someone be able to look and see what the issue might be?
Thanks!
For some weird reason jQuery tools are invoking ready event before page is completely loaded, change order of scripts from:
<script type="text/javascript" src="includes/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="includes/jquery.tools.min.js"></script>
to
<script type="text/javascript" src="includes/jquery.tools.min.js"></script>
<script type="text/javascript" src="includes/jquery.cycle.all.min.js"></script>
and your error will be gone.
I'm working with a site developed by an external developer. I've noticed the code they use for accordions only supports a fixed number of accordion items per page (even though their CMS can create an unlimited amount of items marked as being displayed accordion-style). I'm trying to tidy this up to avoid confusing my colleagues later down the line.
I'm trying to add a standard Mootools more accordion, but when I add it to a page I get the error below:
Uncaught TypeError: Property 'container' of object # is not a
function mootools-core-1.4.5-full-compat.js:683
Here's an example page - the links in tags below 'Session details - Click the titles below for more information on each session.' should all be accordions.
I'm calling this code at the bottom of my page from http://www.aua.ac.uk/scripts/accordion.js:
window.addEvent('domready', function(){
new Fx.Accordion($$('#sub_left .accordion_heading'),$$('#sub_left .accordion_holder'), {
opacity: 0,
display: -1,
alwaysHide: true
});
});
Using these versions of Mootools (referenced at the top of the page in the head):
mootools-core-1.4.5-full-compat.js and mootools-more-1.4.0.1.js
Here is a fiddle using those verions of mootools, a portion of the HTML from my page, and the same accordion code - and it's all working. I think there is a conflict somewhere on my full page but I can't work out where.
http://jsfiddle.net/bcfu2/5/
Does anyone have any idea how to either fix this, or where to start debugging it - other than removing code/links to JS files one by one?
The js of microsoft creating some collision with mootools Array implements:
<script src="/WebResource.axd?d=maKRZUGfDX1oNLvbjE5CVpp8Freqy1QYQvNjdATWoN2tEAP8BRYB9DDy6RYI9PQwhPak11VYG6N-fakPxQX9OdjCS0k1&t=634604425351482412" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=WSd7pLxkPBvO2m8zwahAn--zWk9drBpRcPo6hiP5S6h3lc4U02xAjGNhWI80hxb4tjqMmAYSYPB7ziM6k7g74E-bBOiz7xRre8hSbGF4tJ2E6c8VeX-W4J-tQv1ZL10ruL5uPffOFyiUX3xZVWWQT_YClyI1&t=ffffffffb868b5f4" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=bawOzJp1LF5Sj6rS_r-W75i2ouoWmFBvTNI9zqR0q_Lsf42KbPAaMTrPFSZ9jqam3zDWOHBUgNgKBDwGos_WSLyBOzTAzYVuGRRlgWxM0Jm-uc_fb8NPaprYxmDuvgVoemZKvN0bfNIpr2yzsXUjhCVB-0dFOF6qHbKXJEXRN_LWShmr0&t=ffffffffb868b5f4" type="text/javascript"></script>
If you remove those scripts you will see your code is working fine:
http://jsfiddle.net/V8WRM/
So in all my failed attempts to get jQueryUI working, I have tried this example here after downloading a theme from the jQueryUI site.
and here is my code looking at that example in the link above in my asp.net mvc page.
<link type="text/css" href="<%= Url.Content("~/Scripts/jquery-ui/css/smoothness/jquery-ui-1.8.17.custom.css")%>" rel="stylesheet" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-1.7.1.min.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-ui-1.8.17.custom.min.js")%>"></script>
<script>
$('#dialog_link').click(function(){
$('#Dialog').dialog('open');
return false;
});
</script>
<p id="dialog_link">Open Dialog</p>
<div id="Dialog" title="Dialog title!">
This content shown within dialog...
</div>
After hitting F5 I would have expected to see a clickable text which when clicked would bring up a modal dialog with a [x] button to close it and get back to the main window. However what I get to see is this on page load,
where the text 'open dialog' does not respond to click events and the supposed "modal dialog" is already visible in the form of a plain string and without any formatting. So where did all the magic of jQueryUI go? Something wrong in my linking correct scripts?
Totally lost. Please help..
Edit
This exact same code works in pure html mode in a different file. when I copy this code into my asp.net mvc page within the content tags I get a javascript error at a non-descript line!!
Just take the 'open' out of your $('#Dialog').dialog('open'); and you are good to go.
Edit: Added this jsFiddle with your code as an example:
http://jsfiddle.net/DoomHamster/LhJsL/1/
Also, you don't need 'return false' when clicking an element with no default click event.
EDIT: From your comment below I suspect that you are having issues with loading jQuery and jQueryUI in the first place. Try replacing your script and css links with the following as a test to eliminate path issues:
<link type="text/css" rel="Stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
Try this
$(function()
{
$('#dialog_link').click(function(){
$('#Dialog').dialog();
return false;
});
})
I'm restructuring a page for a client, and I'm having some issues with the jQuery code I implemented on the page.
There's a pop-up lightbox that uses Prototype which appears when the page loads, and then there's marquee/scrollers on the top and right that I put there that use jQuery. I'm really unsure about what's causing the error.
I'm familiar with jQuery's noConflict, but I've tried pretty much every variation of it on this page and I still get an error - after a few seconds the marquees stop - and IE displays that "Errors on page" dialog, referencing line 464 ("Array length must be assigned a finite positive number").
Here is the page: -link removed by author-
Here is prototype.js: -link removed by author-
I have absolutely no idea what is causing this error and JavaScript isn't my strongest side.
When I first started seeing this error, I was Googling around for more general "Prototype + jQuery" errors, when I should have been looking for a solution specific to the exact problem I was dealing with.
Adding the terms "array length" and "line 464" actually led me to the solution to this specific problem, and here it is:
Updated from prototype v1.4 to v1.5.1.2 (v1.7, the latest release,
didn't work right and even produced a stack overflow error).
Changed around the order of the scripts, and changed noConflict:
<script src="/scripts/jquery-1.5.2.js" type="text/javascript"></script>
<script src="/scripts/jquery.Scroller-1.0.src_4.js" type="text/javascript"></script><!-- all _$_'s replaced with _jQuery_ -->
<script type="text/javascript">
<!--
// more jquery, all $'s replaced with jQuery
-->
</script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>
<script src="scripts/prototype-1.5.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// everything else, including prototype scripts
-->
</script>
And that's it! Now I don't get the "Line 464" error and all scripts work fine.
Thank you #Ken and #Diodeus for leading me to the solution.
You may need to go through the plugins and replace $( with jQuery(, since you need to use "jQuery..." instead of "$..." in no-conflict mode.
Surround the code that uses jQuery with
(function ($) {
... // Your code
})(jQuery)
This way it uses local $ which is bound to jQuery and and jQuery only.
Also it is considered a bad idea to use both frameworks on the same website. You can find jQuery replacements for pretty much all of Prototype plugins.
I would find plugins in the same library. jQuery has all the plugins you mentioned, so there's no need to try using both. These two libraries can be difficult to get working together.
If you're set on using both libraries, try this ordering:
1) other lib
2) jquery
3) noconflict call
4) all plugins
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="/scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$.noConflict();
-->
</script>
<script src="/scripts/jquery.Scroller-1.0.src_3.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<blink>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='/lightview.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="/photography/js/scrollable.js"></script>
<script>
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
// Use Prototype with $(...), etc.
$('div.box').hide();
</script>
</blink>
My code isnt working im not sure why?
any advice?
You need to use jQuery.noConflict() to release $ back to prototype, like this:
jQuery.noConflict(); //restore $ to prototype
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
$('div.box').hide();
Though jQuery can do show/hide, so you may not need both libraries, depending on what you're doing (for example, there are lightbox plugins for jQuery and scrollable plugins for prototype, so you could go either way with using a single library for everything).
You can also give it an alias from the $ restoring call, it returns a reference to jQuery, so you can do this:
var $j = jQuery.noConflict(); //restore $ to prototype
$j(function(){
$j("div.scrollable").hide();
});
$('div.box').hide();
Once I had the same problem, using Prototype and jQuery on the same page, and specifying the jQuery.noConflict() function, but my stuff didn't fade in/out right (stuff were jumping weird and sometimes only worked on the first animation). When I disabled Prototype, my jQuery code did exactly what it was supposed to do. I came to the conclusion the jQuery and Prototype have the same function names and these cause conflict in some way.
Disable Prototype temporarily and see if your jQuery code performs as expected.