|
JavaScript - Using The Plugin Datatables And Getting The 'is Not A Function' Error On A Method
Hi,
I am using the JS plugin DataTables. I am initializing the plugin on the Document ready and it is working fine. However, when I try to invoke a method, it throws the error: TypeError: table.fnSort is not a function When debugging, table shows all the properties and methods of DataTables and fnSort shows undefined. I checked the DataTables js file and fnSort is there. Does anyone know why this might be happening? Here is the page: Prudential Annuities FP Portal If you click the upper arrow of the right column (Double), you will see the alert and the error. FYI - You have to refresh the page each time to see the error. Thanks! Similar TutorialsWe use datatables on our site which displays data from a MySQL database, we just installed jeditable for inline editing, when a user updates a field the database is updated but the cell doesn't refresh displaying the new data. Our initialization code is below, any help is appreciated Code: $(document).ready(function() {
oTable3 = $('#links').dataTable( {
"sDom":'t<"bottom"ifpl><"clear">',
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "bSortable": false},
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]
}
).makeEditable({
sUpdateURL: "<a href="http://domain.com/account/profiles/updatelinkvalue%22" target="_blank" rel="nofollow">http://domain.com/account/profiles/updatelinkvalue"</a>,
"aoColumns": [
null,
null,
{
//indicator: 'Saving Engine Version...',
tooltip: 'Click to change link status',
loadtext: 'loading...',
type: 'select',
onblur: 'submit',
submit: 'Ok',
loadurl: '<a href="http://domain.com/account/profiles/engineversionlist%27" target="_blank" rel="nofollow">http://domain.com/account/profiles/engineversionlist'</a>,
loadtype: 'GET',
sUpdateURL: "<a href="http://domain.com/account/profiles/customupdateenginevalue%22" target="_blank" rel="nofollow">http://domain.com/account/profiles/customupdateenginevalue"</a>;
},
Hello! I am new to the boards, I am a graphic and web designer. Been designing and developing web sites since 2001. I have fun doing it and was lucky enough to have someone hire me to do it and get paid for it. The reason I signed up to the boards is so that I can search for some help since I am starting to learn jQuery I am having a little bit of trouble with a page I am working on and was hoping someone would be able to help me out! The problem: I have a spry collapsable panel with 4 panels, in the panels I have jQuery carousel plugins with the thumbs plugin. The problem I am having is that I want the carousel in the 4 panels like I mentioned before but I can only get one of the panels to function fully. The other three loses their forward back functions. I tried copying the code for the first one and just renaming the classes and functions so it would separate the two. The thumbs plugin will still work, I just can not get the carousel function to repeat on another one. I will post the code I have left off with. If you need to see the page you can message me. Thanks for reading and if you can help it will be great! Here is the java: Code: $(document).ready(function () {
$('.infiniteCarousel').infiniteCarousel();
});
$.fn.infiniteCarousel = function () {
function repeat(str, num) {
return new Array( num + 1 ).join( str );
}
return this.each(function () {
var $wrapper = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapper.find('> ul'),
$items = $slider.find('> li'),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapper.innerWidth() / singleWidth),
currentPage = 1,
pages = Math.ceil($items.length / visible);
if (($items.length % visible) != 0) {
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); // reselect
$wrapper.scrollLeft(singleWidth * visible);
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 500, function () {
if (page == 0) {
$wrapper.scrollLeft(singleWidth * visible * pages);
page = pages;
} else if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
// reset back to start position
page = 1;
}
currentPage = page;
});
return false;
}
$wrapper.after('<a class="arrow back"><</a><a class="arrow forward">></a>');
$('a.back', this).click(function () {
return gotoPage(currentPage - 1);
});
$('a.forward', this).click(function () {
return gotoPage(currentPage + 1);
});
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
});
};
//Carousel 2
$('.infiniteCarouselTwo').infiniteCarouselTwo();
$.fn.infiniteCarouselTwo = function () {
function repeat(str, num) {
return new Array( num + 1 ).join( str );
}
return this.each(function () {
var $wrapperTwo = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapperTwo.find('> ul'),
$items = $slider.find('> li'),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapperTwo.innerWidth() / singleWidth),
currentPage = 1,
pages = Math.ceil($items.length / visible);
if (($items.length % visible) != 0) {
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); // reselect
$wrapperTwo.scrollLeft(singleWidth * visible);
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapperTwo.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 500, function () {
if (page == 0) {
$wrapperTwo.scrollLeft(singleWidth * visible * pages);
page = pages;
} else if (page > pages) {
$wrapperTwo.scrollLeft(singleWidth * visible);
// reset back to start position
page = 1;
}
currentPage = page;
});
return false;
}
$wrapperTwo.after('<a class="arrow back"><</a><a class="arrow forward">></a>');
$('a.back', this).click(function () {
return gotoPage(currentPage - 1);
});
$('a.forward', this).click(function () {
return gotoPage(currentPage + 1);
});
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
});
};
Here is the CSS: Code: .infiniteCarousel {
width: 395px;
position: relative;
}
.infiniteCarousel .wrapper {
width: 825px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
overflow: auto;
min-height: 10em;
position: absolute;
top: 0;
margin-top: 0;
margin-right: 40px;
margin-bottom: 0;
margin-left: 40px;
left: 20px;
}
.infiniteCarousel ul a img {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.infiniteCarousel .wrapper ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
.infiniteCarousel ul.thumb li {
display:block;
float:left;
padding: 10px;
height: 85px;
width: 85px;
-ms-interpolation-mode: bicubic;
}
.infiniteCarousel ul.thumb li a img {
display:block;
}
.infiniteCarousel .arrow {
display: block;
height: 36px;
width: 37px;
text-indent: -999px;
position: absolute;
top: 25px;
cursor: pointer;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.infiniteCarousel .forward {
background-position: 0 0;
right: 0;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
left: 910px;
}
.infiniteCarousel .back {
background-position: 0 0px;
left: 0;
background-image: url(../images/arrow-back.png);
background-repeat: no-repeat;
}
.infiniteCarousel .forward:hover {
background-position: 0 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
}
.infiniteCarousel .back:hover {
background-position: 0 0px;
background-image: url(../images/arrow-back.png);
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
}
/* Carousel Two */
.infiniteCarouselTwo {
width: 395px;
position: relative;
}
.infiniteCarouselTwo .wrapperTwo {
width: 825px; /* .infiniteCarouselTwo width - (.wrapperTwo margin-left + .wrapperTwo margin-right) */
overflow: auto;
min-height: 10em;
position: absolute;
top: 0;
margin-top: 0;
margin-right: 40px;
margin-bottom: 0;
margin-left: 40px;
left: 20px;
}
.infiniteCarouselTwo ul a img {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.infiniteCarouselTwo .wrapperTwo ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
.infiniteCarouselTwo ul.thumbTwo li {
display:block;
float:left;
padding: 10px;
height: 85px;
width: 85px;
-ms-interpolation-mode: bicubic;
}
.infiniteCarouselTwo ul.thumbTwo li a img {
display:block;
}
.infiniteCarouselTwo .arrow {
display: block;
height: 36px;
width: 37px;
text-indent: -999px;
position: absolute;
top: 25px;
cursor: pointer;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.infiniteCarouselTwo .forward {
background-position: 0 0;
right: 0;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
left: 910px;
}
.infiniteCarouselTwo .back {
background-position: 0 0px;
left: 0;
background-image: url(../images/arrow-back.png);
background-repeat: no-repeat;
}
.infiniteCarouselTwo .forward:hover {
background-position: 0 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
}
.infiniteCarouselTwo .back:hover {
background-position: 0 0px;
background-image: url(../images/arrow-back.png);
}
ul.thumbTwo li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_viewTwo {
}
Here is the HTML: Code: <div id="around" class="CollapsiblePanel">
<div class="CollapsiblePanelTabBlue" tabindex="1">Around town</div>
<div class="CollapsiblePanelContent">
<div id="main_viewTwo"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
<!-- Start Carousel -->
<div class="infiniteCarouselTwo">
<div class="wrapperTwo">
<ul class="thumbTwo">
<li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
<li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
<li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
<li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
<li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
<li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
<li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
<li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
<li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
<li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
<li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
<li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
<li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
<li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
<li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
<li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
</ul>
</div>
</div>
<!--End Carousel-->
</div>
</div>
<div id="campus" class="CollapsiblePanel">
<div class="CollapsiblePanelTabGreen" tabindex="1">Campus life</div>
<div class="CollapsiblePanelContent">
<div id="main_view"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
<!-- Start Carousel -->
<div class="infiniteCarousel">
<div class="wrapper">
<ul class="thumb">
<li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
<li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
<li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
<li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
<li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
<li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
<li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
<li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
<li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
<li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
<li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
<li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
<li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
<li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
<li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
<li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
</ul>
</div>
</div>
<!--End Carousel-->
</div>
</div>
Ask me if you need any more information from me. Like I said if you need to see the page message me! It is not a site I want to make too public at the moment for some reasons of who I work for. Ok so this is for school i do not want the answer i just need to be pointed in the right direction. i have been reading as much as i can to get this figured out but i am running out of time to get this done and i still have plenty of other work to do. This is the error i get uncaught TypeError object has no method 'getTime' I cant figure out what is causing this. i have removed the line and the error moves to the next one down which is the getFullYear method. I am thinking i screwed something up big time but i just cant see it. Code: function yearly(calendarDay) {
if (calendarDay == "") {
calendarDay = currentTime.getday();
}else{
calendarDay = calendarDay;
}
var currentTime = calendarDay.getTime();
var thisYear = calendarDay.getFullYear();
document.write("<table id='yearly_table'><tr>");
document.write("<th id='yearly_title' colspan='4'>");
document.write(thisYear());
document.write("</th>");
document.write("</tr>");
var monthNum = -1;
for (var i=1; i<3; i++){
document.write("<tr>");
for(var j=1; j<4; j++){
monthNum++;
calendarDay.setDate(1);
calendarDay.setmonth(monthNum);
writeMonth(calendarDay, currentTime);
}
document.write("</tr>");
}
document.write("</table>");
}
function writeMonthCell(calendarDay, currentTime) {
document.write("<td class='yearly_months'>");
writeMonth(calendarDay, currentTime);
document.write("</td>");
}
Hi, New to JS. Have ordered some new books, but need to get somethings going in the mean time. What I wanted to do is to link to a new page having a date range input in the form of 6 text boxes, 2 sets of mm-dd-yy, from and to, where the upon loading the page box 1 of the from would auto focus and then auto tab and then post where php could take over on the server side. Setting up the form and the lay out, no problem. Auto focusing went just like expected using the following code, included because on the next step everything fell apart. [/CODE] <script type="text/javascript" > window.onload=function() { document.getElementById("input1").focus(); } </script> [/CODE] So then the wheels came off and in response, began to simplify what was trying to be done to find where the issues were. As far as I can get working is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" >
window.onload=function() {
document.getElementById("input1").focus();
}
</script>
<script type="text/javascript" >
function myFunc() {
alert("is this working");
}
</script>
</head>
<body>
<input id="input1" name="input1" type="text" onkeyup="myFunc()" maxlength="2" value="type a No." />
</body>
</html>
First issue with this: When I first get to the page everything is just as ordered. The focus is on the text box and the default value is "type a No." When I press a key onkeyup, I bring up the alert box with "is this working" in it. But when I refresh the page with the refresh button, after clicking the "ok" on the alert box, the character that was typed in is still displayed. If I use the link to the page, or the URL from the address bar, then the page reloads properly with the default value, "type a No". Question 1: How do you get the default textbox value using the refresh button as apposed to reloading the page using a link or from the address bar? Using Firefox 8.0 Second and more important at the moment: If I change the script to pass an argument to the function the script crashes. It does not pull up an alert box and freezes. My guess is that I'm doing something wrong on a concept level. NOTE: changed the default value of the text box to " ". Looked like to me there was an issue with the size specification and the default string length as you could only enter in a key stroke by highlighting the text and replacing it Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" >
window.onload=function() {
document.getElementById("input1").focus();
}
</script>
<script type="text/javascript" >
function myFunc(awe) {
alert(awe);
}
</script>
</head>
<body>
<input id="input1" name="input1" type="text" onkeyup="myFunc("123")" maxlength="2" value="" />
</body>
</html>
Question 2: can someone straighten me out with this? Hi , I am inserting an image into a span tag by click on button and resize the image using resize_image_height_weight function. I am using two function to do this task. setImage setImage_w3Validation setImage function resize the image but fail on w3validation on my webpage( As per w3c there is no attribute onload for image tag.) To fix out this issue I am using setImage_w3Validation function which pass on w3validation but unable to call resize_image_height_weight function. My purpose is to resize the image. Kindly suggest me how to do it? <html> <head> <script TYPE="text/javascript" language="javascript"> function resize_image_height_weight(id, hgt, wdth){ //alert(id); Obj=document.getElementById(id); myImage = new Image(); myImage.src = Obj.src; var heights = myImage.height; var widths = myImage.width; // alert("Height=>" + heights + " Width=> " + widths); if(heights > hgt || widths > wdth) { if(heights > widths) { var temp = heights/hgt; var new_width = widths / temp; new_width = parseInt(new_width); heights = hgt; widths = new_width; } else { var temp = widths/wdth; var new_height = heights / temp; new_height = parseInt(new_height); heights = new_height; widths = wdth; } } Obj.height = heights; Obj.width = widths; } function setImage(){ document.getElementById("IM0").innerHTML ="<center><img src=\"http://www.google.co.in/intl/en_com/images/srpr/logo1w.png\" id=\"img1\" alt=\"\" height=\"125\" width=\"125\" onload=\"resize_image_height_weight('img1',125,125);\"><\/center>"; } function setImage_w3Validation(){ document.getElementById("IM1").innerHTML ="<center><img src=\"http://www.google.co.in/intl/en_com/images/srpr/logo1w.png\" id=\"img2\" alt=\"\" height=\"125\" width=\"125\"><script type=\"text/javascript\">document.getElementById('img2').onload = function(){resize_image_height_weight('i12',125,125);};<\/SCRIPT><\/center>"; //I wanna to do the task using this one function to resize img for w3validation } function clear_page(){ document.getElementById("IM0").innerHTML =""; document.getElementById("IM1").innerHTML =""; } </script> </head> <body> <div class="img3"><span id="IM0"></span></div> <div class="img3"><span id="IM1"></span></div> <input type="button" name="btn1" value="Image Onload W3C Fail" onclick="setImage();"> <input type="button" name="btn2" value="Image Onload W3C Pass" onclick="setImage_w3Validation();"> <input type="button" name="btn2" value="Clear" onclick="clear_page();"> </body> </html> Hey, this error ONLY occurs in IE. "Unexpected call to method or property access." I pinpointed it to this line: o.appendChild(e); The full function is: Code: function aO(d, t, src, p, id ){
alert('aO has begun.');
var o, e, i;
if (!ie){ o = cE('object');o.data = src; }
else { o = cE('embed');o.src = src; }
o.id = id;
if (!ie){ p.push( ['movie', src] ); }
if ( typeof(id) === 'String' ){o.id = id;}
o.type = t;
o.style.width = '210px';
for(i = 0; i < p.length; i++){
e = cE('param');
e.name = p[i][0];
e.value = p[i][1];
o.appendChild(e);
}
d.appendChild(o);
alert('aO has finished.');
}
What it does is write a flash object to the page. The FULL code is: Code: <!-- Chat Options -->
<noscript>
It appears that you do not have JavaScript enabled. Please enable it, otherwise you cannot view the chatbox.
</noscript>
<div id="chatWrap">
<ul id="ccon" style="display:none;">
<li><a href="javascript:void(0);" onclick="switchChat();">Switch to <span id="cnext">Chat Title</span></a></li>
<li><a href="javascript:void(0);" onclick="resizeChat();"><span id="csize">Expand</span> Chat</a></li>
<li><a href="javascript:void(0);" onclick="toggleChat();"><span id="chatToggle">Close</span> Chat</a></li>
</ul>
</div>
<div id="cbox" style="display:block;"></div>
<!-- Chat Script -->
<script type="text/javascript"><!-- // --><![CDATA[
var chats = [];
chats[0] = ['Main Chat', 'Uber-Anime-Chat', 1236404792847];
chats[1] = ['Roleplay Chat','Uber-Anime-Roleplay', 1236403501064];
var chat = {
'opt': 'a=000000&b=100&c=999999&d=848484&e=000000&g=CCCCCC&h=333333&i=29&j=CCCCCC&k=666666&l=333333&m=000000&n=CCCCCC&s=1&t=0',
'ref': 'www.uber-anime.com',
'cur': 0,
'delay': 1.5,
'params': [['wmode','transparent'] , ['allowscriptaccess','always'] , ['allownetworking','internal']]
}
var chatState = 0;
var chatStates = [];
chatStates[0] = ['Expand', '300px'];
chatStates[1] = ['Shrink', '500px'];
function cE(e){return document.createElement(e);}
function cT(s){return document.createTextNode(s);}
var ie = false;
function aO(d, t, src, p, id ){
var o, e, i, embed;
if (!ie){ o = cE('object');o.data = src; }
else { o = cE('embed');o.src = src; }
o.id = id;
if (!ie){ p.push( ['movie', src] ); }
if ( typeof(id) === 'String' ){o.id = id;}
o.type = t;
o.style.width = '210px';
for(i = 0; i < p.length; i++){
e = cE('param');
e.name = p[i][0];
e.value = p[i][1];
o.appendChild(e);
if(ie) {
embed = cE('embed');
embed.setAttribute(p[i][0], p[i][1]);
}
}
if(ie) o.appendChild(embed);
d.appendChild(o);
}
function switchChat() {
if (document.getElementById('cbox').hasChildNodes())
while (document.getElementById('cbox').childNodes.length >= 1)
document.getElementById('cbox').removeChild(document.getElementById('cbox').firstChild);
var x = chat.cur;
chat.cur = (x + 1) % chats.length;
var c = chats[x];
var src = 'http://st.chatango.com/flash/group.swf?ref=' + chat.ref + '&gn=' + c[1] + '.chatango.com&cid=' + c[2] + '&' + chat.opt;
document.getElementById('cbox').innerHTML = '';
aO( document.getElementById('cbox'), 'application/x-shockwave-flash', src, chat.params, 'chat' );
document.getElementById('ccon').style.display = 'block'; // qfix
document.getElementById('cnext').innerHTML = chats[chat.cur][0];
document.getElementById('chat').style.height = chatStates[chatState][1];
document.getElementById('csize').innerHTML = chatStates[chatState][0];
}
function resizeChat(){
if(chatState == 0)
chatState = 1;
else
chatState = 0;
document.getElementById('chat').style.height = chatStates[chatState][1];
document.getElementById('csize').innerHTML = chatStates[chatState][0];
}
function toggleChat() {
if(document.getElementById('cbox').style.display == 'block') {
display = 'none';
chatStateTxt = 'Open';
} else {
display = 'block';
chatStateTxt = 'Close';
}
document.getElementById('chatToggle').innerHTML = chatStateTxt;
document.getElementById('cbox').style.display = display;
}
function chatInit(){
if (navigator.userAgent.indexOf('MSIE') !== -1){ie = true;}
if ( chat.delay <= 0 ){
switchChat();
} else {
i = cE('img');
i.src = 'ajax-loader.gif';
document.getElementById('cbox').appendChild(i);
document.getElementById('cbox').appendChild(cT(' Loading Chat... If this message stays up, your browser may not be supported.'));
var clk = setTimeout( function(){ switchChat(); }, chat.delay * 1000 );
}
delete chatInit;
}
chatInit();
//]]>
</script>
Can anyone tell me how to fix this? This is ridiculously irritating, and it's important that I can fix it ASAP. Hi, I'm a newbie to the forum and jquery and have been trying to use it for a slick form wizard i found here. http://thecodemine.org/ It's almost complete but IE keeps giving me an error I've tried everything to fix with no luck. I'm using jquery-1.4.2.min.js and the error it's giving me is Unexpected call to method or property access. line 103 character 460 The code it highlights is: Code: {this.nodeType===1&&this.appendChild(a)})},
at the end of this line. Complete line is: Code: wrapInner:function(a){if(c.isFunction(a))return this.each(function(b){c(this).wrapInner(a.call(this,b))});return this.each(function(){var b=c(this),d=b.contents();d.length?d.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){c(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){c.nodeName(this,"body")||c(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.appendChild(a)})},
Any help would be greatly appreciated. Thanks! FYI: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Tue, 15 Nov 2011 16:45:53 UTC Message: Unexpected call to method or property access. Line: 103 Char: 460 Code: 0 URI: http://custsatdev/contact/jqueryform...y-1.4.2.min.js i keep getting error Call to undefined function codeandurl() below is my code PHP Code: <?php $value= strip_tags(get_field('link',$post)); $resultid=get_field('resultid',$post); codeandurl($resultid,$value); ?> <div id="result"></div> <script type="text/javascript"> function codeandurl(resultid,url){ $( "#result" ).text(resultid); $( "#result" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); window.open(url); return false; } </script> I'm trying to "progressively enhance" one of my surveys using javascript. Basically, I have rating scales that make use of radio buttons as each point on the scale. Each radio button occupies its own cell in a table. I wrote some functions that will highlight cells on mouseover in a color corresponding to its position on the scale (e.g. the lowest point is red, the midpoint is yellow, the highest point is green). When a radio button is clicked, the background of the button's cell and preceding cells in the same row will be colored accordingly. The functions are working well in FireFox and Chrome (I just have to add a few lines using the addEvent function to make it compatible with IE). The effect looks a lot nicer when I add a function that makes the visibility of the radio buttons hidden. However, I want to make sure that there is a fallback option in case the functions that color the cells don't work for whatever reason. I would not want the radio buttons hidden in this case. Is there a method whereby I can call the "hideRadiobuttons" function only if the other functions are successfully executed? Why is the callwhy is the slice method only a method of an Array instance? The reason why I ask is because if you want to use it for the arguments property of function object, or a string, or an object, or a number instance, you are forced to use Array.prototype.slice.call(). And by doing that, you can pass in any type of object instance (Array, Number, String, Object) into it. So why not just default it as a method of all object instances built into the language? In other words, instead of doing this: Code: function Core(){
var obj = {a : 'a', b : 'b'};
var num = 1;
var string = 'aff';
console.log(typeof arguments);//Object
console.log(arguments instanceof Array);//false
var args1 = Array.prototype.slice.call(arguments);
console.log(args1);
var args2 = Array.prototype.slice.call(obj);
console.log(args2);
var args3 = Array.prototype.slice.call(num);
console.log(args3);
var args4 = Array.prototype.slice.call(string);
console.log(args4);
Core('dom','event','ajax');
Why not just be able to do this: Code: function Core(){
var obj = {a : 'a', b : 'b'};
var num = 1;
var string = 'aff';
var args = arguments.slice(0);
var args2 = obj.slice(0);
var args3 = num.slice(0);
var args4 = string.slice(0);
//right now none of the above would work but it's more convenient than using the call alternative.
}
Core('dom','event','ajax');
Why did the designers of the javascript scripting language make this decision? Thanks for response. Code: <html>
<head>
<script>
function changeBgColor(){
document.getElementById("bgc").style.background-color=333333;
}
</script>
<style>
#bgc{
width:300px;
height:100px;
background-color:#cccccc;
}
</style>
</head>
<body>
<p id="bgc" onmouseover="changeBgColor()">
Hi There, pls change bg color
</p>
</body>
</html>
I am getting following error "SCRIPT5007: The value of the property 'changeBgColor' is null or undefined, not a Function object eventTest1.html, line 22 character 29" This is a simple code, why am I getting such a weird error. Whats wrong in here ? Thanks Can you guys please tell me why the link() function isnt working. Code: <html>
<head>
<script type ="text/JavaScript">
var counter = 0;
var counter2 = 0;
var arraynumb = 0;
var arraynumb2 = 0;
var global;
var array = ['Mohamad', 'Karim', 'Anthony', 'Rami', 'Natalia', 'Sarah', 'Samer', 'Violette', 'Plume', 'Sharshabil'];
var array2 = ["1000", "1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008", "1009"];
var searchKey = document.searchform.inputVal.value;
var searchKey2 = document.searchform.inputVal2.value;
var searchKey3 = document.searchform.inputVal.value;
function pass(){
searchKey = document.searchform.inputVal.value;
for (var i = 0, len = array.length; i < len; i++){
if (array[i] == searchKey){
counter = 1;
arraynumb = i;
}
}
}
function pass1(){
searchKey2 = document.searchform.inputVal2.value;
for (var i = 0, len = array2.length; i < len; i++){
if (array2[i] == searchKey2){
counter2 = 1;
arraynumb2 = i;
}
}
}
function access()
{
if (counter == 1 && counter2 == 1 && arraynumb == arraynumb2)
{
window.alert("You may access the website");
window.alert(array[0]);
global = 1;
}
else{
window.alert("You may not access the website");
global = 0;
}
}
function link()
{
if (global == 1 && array[0] == searchkey3 )
{
window.alert("You are an administrator, you may use all the ciphers");
}
else
window.alert("you are not signed in, please do so");
}
</script>
</head>
<body>
<form name = "searchform" action = "">
<p>Enter username<br/>
<input name = "inputVal" type = "text" size = "30"/>
<input name = "search2" type = "button" value = "Search" onclick = "pass()"/>
</p>
<p>Enter password<br/>
<input name = "inputVal2" type = "password" size = "30"/>
<input name = "search" type = "button" value = "Search" onclick = "pass1()"/>
<input name = "Access site" type = "button" value = "Access" onclick = "access()"/>
<br/>
<br/>
<input name = "linkto" type = "button" value = "Shift" onclick = "link();"/>
<br/>
</p>
<br/>
<p></p>
</form>
</body>
</html>
hi guys, im not very good with javascript/jquery, i have the following code: Code: <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(window).ready(function() {
$("#responsecontainer").load("includes/inc-mess-jail.php", function(response, status, xhr) {
});
var refreshId = setInterval(function() {
$("#responsecontainer").load('includes/inc-mess-jail.php?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
});
</script>
it basically updates the div tag: Code: <tr>
<td colspan="2">
<div id="responsecontainer" align="center"></div>
</td>
</tr>
i wanted to add an error message to it, that comes up underneath the <div id="responsecontainer" align="center"></div> that says "Error" with an id number next to it, then when your mouse goes over it a box comes out saying "there was a problem retrieving your information. the game will continue trying to resolve this" and then underneath where it says error i would like it to say the number of attempts it has tried to recollect the information. obviously i would only like this error message to come up, when it cannot refresh the information. Any help would be great, even pointing me in the right direction For some reason in IE this script Code: <script type="text/javascript">
//<![CDATA[
function SelectDisplayDiv(pointer){var divs = document.getElementsByClassName('hiddenDiv');for(var i =0; i < divs.length; ++i){divs[i].style.display = "none";} document.getElementById(pointer).style.display = 'block';}//]]>
</script>
is saying "Object doesn't support this method or property" But this script Code: function SelectDisplayDiv(pointer){var divs = document.getElementsByClassName('hiddenDiv');for(var i =0; i < divs.length; ++i){divs[i].style.display = "none";} document.getElementById(pointer).style.display = 'block';}
*almost the exact same thing, just not written to the canvas by code, hard coded rather- does not. What does that error mean? Is this an IE thing? My isNumber function below gives 'event is not defined' error when I press the home key or the tab key - how can I fix that? Thanks PHP Code: function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode // 86 == ctrl-v // 36 == shift home to select entire field // 46 delete // 35 end // 36 home // 67 ctrl-c // 40 down key //alert(charCode); if ( (charCode == 35 || charCode == 40 || charCode == 86 || charCode == 46 || charCode == 67 || charCode == 36 || charCode == 8 || charCode == 9 || charCode == 32) || (charCode >= 48 && charCode <= 57) ) { return true; } return false; Hi, The Problem I get a error message only in IE when ever I try to call a function from an external file. I am using jQuery if that makes any difference and various plugins. Quote: Error: The value of the property '<function name>' is null or undefined, not a Function object. All the call work fine in FF, chrome, safari etc but for some reason I just can't get it to work with IE. This is getting annoying now, i have no idea what is causing it. here is an example: admin.js Code: function create_cleditor_admin_form(textarea_object)
{
$(textarea_object).cleditor({
height: 120,
controls: // controls to add to the toolbar
"bold italic underline | color highlight removeformat | bullets numbering | alignleft center alignright justify | undo redo | ",
useCSS: false
});
}
calling code Code: $(document).ready(function() {
try {
create_cleditor_admin_form('textarea');
} catch(e) {
alert("Error: "+e.message);
}
});
I have tried searching for this error on google and came up empty handed, surely it just something very stupid. Thanks in advance why does my javascript function run right away when the page loads? but not wen the button is clicked? its working the opposite to how i want it to i didnt include the other html tags to help focus on this. Btw im tryna avoid the method of having the onclick="funct()" method which would be written in the button tag. Thank you. <body> <button id="mybutton">Click me</button> </body> <script type = "text/javascript"> var b = document.getElementById("mybutton"); b.onclick = funct() function funct() { alert("Thanks for clicking me!"); } </script> Hi all, I have written the following javascript code which makes a simple calculation and writes between the <span> tags using Inner HTML My code is: Code: <html>
<head>
<script type="text/javascript">
function hesapla() {
kredimiktari = document.hesapla.miktar.value
kredivadesi = document.hesapla.vade.value;
faiz = document.hesapla.faiz.value;
ayliktaksit1 = (kredimiktari * faiz) / kredivadesi;
geriodeme1 = kredimiktari * faiz;
document.getElementById('ayliktaksit').innerHTML = "<strong>Taksit / Ay :</strong>" + ayliktaksit1;
document.getElementById('geriodeme').innerHTML = "<strong>Taksit / Ay :</strong>" + geriodeme1;
}
</script>
</head>
<body>
<form name="hesapla">
<input type="text" name="miktar" value="Kredi Miktarı" onfocus = "if (this.value == 'Kredi Miktarı') this.value = '';" onblur = "if (this.value == '') this.value = 'Kredi Miktarı';" />
<input type="text" name="vade" value="Kredi Vadesi" onfocus = "if (this.value == 'Kredi Vadesi') this.value = '';" onblur = "if (this.value == '') this.value = 'Kredi Vadesi';" />
<input type="text" name="faiz" value="Faiz Oranı" onfocus = "if (this.value == 'Faiz Oranı') this.value = '';" onblur = "if (this.value == '') this.value = 'Faiz Oranı';" />
<div id="gosterim"><span id="ayliktaksit"></span><span id="geriodeme"></span></div>
<input type='button' value='Hesapla' onClick='hesapla()'><br><br>
<img src="images/dot2.png" width="180" height="2" alt="dot"/>
</form>
</body>
</html>
I am really confused as similar code on Tizag web site works fine. Code: <script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
Could anyone tell me what the wrong thing is about my code Many thanks in advance telmessos Eagle eyes needed! I have a function which is called twice. It allows the elements of an array to be set to a different color, successively: Code: function ln8 (arrayA,color,current) {
var arrayB=(typeof arrayA == 'string')? arrayA.split(',') : arrayA;
var line = document.getElementById(arrayB[current]);
line.style.color = color;
if (current != arrayB.length - 1) {
current++;
setTimeout(function() {ln8(arrayB, color, current)},8) }
}
It works fine the first call; the second time, FF throws an error message: 'line is null' referring to 'line.style.color = color;'. It's used in a switch function, and I've tested each case of the switch, two browsers, and still get the error. So I'm assuming the second call is the problem, but I just can't see what's wrong with it. Maybe before you wade through the code, can you think of other reasons for the error? First call: the function is at the third line of each case: Code: function makeLine5() {
var a = Coin1()
var b = Coin2()
var c = Coin3()
var h = ( a + b + c )
A=a;B=b;C=c;D=h;
switch(h) {
case 6:
noHex2(5,'D'); noHex(Hex5Yang,'hidden',0); nodot(5, 4, 'e');
setTimeout('report5()',3000);
setTimeout('ln8(Line5Yin,\'#e11\',0)',6000);
setTimeout('dot(5, 4, \'f\')',10000); return false;
break
case 7:
noHex2(5,'D'); noHex(Hex5Yin,'hidden',0);
setTimeout('report5()',3000);
setTimeout('ln8(Line5Yang,\'#e11\',0)',6000); return false;
break
case 8:
noHex2(5,'C'); noHex(Hex5Yang,'hidden',0);
setTimeout('report5()',3000);
setTimeout('ln8(Line5Yin,\'#e11\',0)',6000); return false;
break
default:
noHex2(5,'C'); noHex(Hex5Yin,'hidden',0);nodot(5, 4, 'f');
setTimeout('report5()',3000);
setTimeout('ln8(Line5Yang,\'#e11\',0)',6000);
setTimeout('dot(5, 4, \'e\')',10000); return false; }
}
second call: Code: function makeLine6() {
var a = Coin1()
var b = Coin2()
var c = Coin3()
var k = ( a + b + c )
A=a;B=b;C=c;D=k;
switch(k) {
case 6:
noHex2(6,'D'); noHex(Hex6Yang,'hidden',0);nodot(6, 5, 'e');
setTimeout('report6()',3000);
setTimeout('ln8(Line6Yin,\'#e11\')',6000);
setTimeout('dot(6, 5, \'f\')',10000);
setTimeout('lastBitz()',13000); return false;
break
case 7:
noHex2(6,'D'); noHex(Hex6Yin,'hidden',0);
setTimeout('report6()',3000);
setTimeout('ln8(Line6Yang,\'#e11\')',6000);
setTimeout('lastBitz()',13000); return false;
break
case 8:
noHex2(6,'C'); noHex(Hex6Yang,'hidden',0);
setTimeout('report6()',3000);
setTimeout('ln8(Line6Yin,\'#e11\')',6000);
setTimeout('lastBitz()',13000); return false;
break
default:
noHex2(6,'C'); noHex(Hex6Yin,'hidden',0);nodot(6, 5, 'f');
setTimeout('report6()',3000);
setTimeout('ln8(Line6Yang,\'#e11\')',6000);
setTimeout('dot(6, 5, \'e\')',10000);
setTimeout('lastBitz()',13000); return false;}
}
hello i am trying to include the following following in my code, but it keeps creating an error. i need to know the correct place to include the function.many thanks Code: CODE
----------------------------------------
<script type="text/javascript">
$(function() {
$("#flex1").flexigrid(
{
url: 'staff.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id_con', width : 40, sortable : true, align: 'left'},
{display: 'Name', name : 'name_con', width : 150, sortable : true, align: 'left'},
{display: 'Email', name : 'email_con', width : 150, sortable : true, align: 'left'},
{display: 'Phone', name : 'phone_con', width : 250, sortable : true, align: 'left'},
{display: 'Mobile', name : 'mobile_con', width : 150, sortable : true, align: 'left'},
{display: 'Fax', name : 'fax_con', width : 150, sortable : true, align: 'left'},
{display: 'Notes', name : 'notes_con', width : 250, sortable : true, align: 'left'}
],
buttons : [
{name: 'Edit', bclass: 'edit', onpress : doCommand},
{name: 'Delete', bclass: 'delete', onpress : doCommand},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'name_con'},
{display: 'Email', name : 'email_con', isdefault: true},
{display: 'Position', name : 'position'}
],
sortname: "name_con",
sortorder: "asc",
usepager: true,
title: "Staff",
useRp: true,
rp: 10,
showTableToggleBtn: false,
resizable: false,
autowidth: true,
autoheight: true,
singleSelect: true
}
);
});
FUNCTION
-----------------------------------------------------------
function doCommand(com, grid) {
if (com == 'Edit') {
$('.trSelected', grid).each(function() {
var id_con = $(this).attr('id_con');
id_con = id_con.substring(id_con.lastIndexOf('row')+3);
alert("Edit row " + id_con);
});
} else if (com == 'Delete') {
$('.trSelected', grid).each(function() {
var id_con = $(this).attr('id_con');
id_con = id_con.substring(id_con.lastIndexOf('row')+3);
alert("Delete row " + id_con);
|
|||||||