Javascript error in IE7 only (jQuery / Cycle.js - javascript

I'm using jQuery and cycle.js to fade through some images on this site.
On the first and last slides, I've put a callback function to go to the next/prev pages, however in IE7 I'm receiving a runtime javascript error (not in any other browsers).
Here's the link to my javascript file: http://bit.ly/dAKEof
The error I'm receiving in IE7 is:
Line: 126
Char: 4
Error: Object Expected
Code: 0
Here's the code I have at line 126 of the functions.js file:
window.location = $('#next').find("a").attr("href");
Any ideas?

I didn't see a link to the site with the error in your question but saw a url in your profile and went there to see if that might be the one. Looks like it is...
IE is notorious for giving incorrect line numbers in its javascript errors. The error is actually on line 125:
function onBefore(curr, next, opts, fwd) {
// If the page isn't loading or refreshing - initCycle == false (fixes auto unbinding of slide opts on load)
// If is last slide and next slide is fwd direction go to next project instead of wrapping cycle
if(opts.currSlide + 1 == opts.slideCount && fwd && !initCycle){
opts.end(opts); // <-- this line is failing b/c the end function is null
window.location = $('#next').find("a").attr("href");
}
// If is first slide, and next slide is bkwd direction go to prev project instead of wrapping cycle
else if(opts.currSlide + 1 == 1 && !fwd){
opts.end(opts); // <-- this also fails for the same reason
window.location = $('#prev').find("a").attr("href");
}
}
The end function in the ops object is null, and that's where the error is. Interestingly, I checked in FF as well and this is also true there, but it seems to recover more gracefully than IE in this case.
It's not entirely clear from the rest of the code how the onBefore function gets called. Looks like it might be the cycle plugin itself. In any event, wherever that call happens the opts object appears to not be getting populated with all the data that is needed by your function.
Update:
I took a look at the cycle plugin code and opts.end is a callback that the user of the plugin must supply. So the solution to your problem is to either provide your own callback when you create the cycle object (line 101 in your js file) or remove the lines in your code that invoke the end function.
Update in response to OP's comment below:
Upon closer inspection your code will actually do exactly what you want without the need to invoke an end callback, so you can safely remove those lines. The plugin triggers your onBefore callback before it does any animations. And since you reload a new url in the browser when moving backward from the 1st slide or forward from the last one, it never even gets to the fade animation, which is your goal.
However, to answer your question on how to add an end callback to the original cycle object, you would do it exactly as you did for onBefore and onAfter. Create a function with whatever code you want to execute and then include end: yourFuncName in the object hash passed to the plugin. Another way to stop the cycle plugin is $(selector).cycle('stop');. But again, none of this is needed in your case. Just remove the calls to end and you should be fine.

Related

Wait for element to not have class - and then other element to disappear in Cypress

I have a flow, where I put something in a cart on a webshop, and then this occurs:
I choose the options and click 'Add to cart'.
Small delay (like 200ms)
An overlay appears, with a loading indicator (for about 1000ms)
The overlay disappears.
Small delay (like 200ms)
The 'Add to cart'-button reaches a loading-state (with a spinner)
The loading-state (the spinner) disappears
The product gets added to the cart.
Go to cart (confirming that the product was added).
How do I chain this together in Cypress?
Attempt 1
The small delays and the order of things messes it up.
cy.get('.add_to_cart_button').click(); // Step 1
cy.get('.overlay').should( 'not.be.visible' ); // Step 4
cy.get('.add_to_cart_button').should( 'not.have.class', 'loading' ); // Step 7
cy.visit( Cypress.env( 'baseUrl' ) + '/cart' ); // Step 9
But the flakyness is unreal!
Sometimes it goes to the cart, showing an empty cart (if it checks for the overlay and the loading-state of the button are reaches within the small delays.
Attempt 2
I even tried adding some quick-fixes, adding cy.wait(3000) a couple of places. But even then it gives me this error:
wait 3000
!! TypeError
The following error originated from your application code, not from Cypress.
> Cannot read property 'indexOf' of undefined
When Cypress detects uncaught errors originating from your application it will automatically fail the current test.
This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event.Learn more
Ideally, I should check that the overlay are both shown and then hidden, to ensure that the order of things occurs in the order described above. I'm just afraid that it's shown for such a brief amount of time, that Cypress will miss that it was there, leading to even more flakyness.
I Think you miss some steps, because like in this webinar, cypress can see that the element is missing from the page at the moment step 1 is implemented and the loading has not started, so it gives false positive assertion. My solution to such cases is to add more steps to the test, instead of using fixed cy.wait() -my steps are the following:
cy.get('.add_to_cart_button').click(); // Step 1
cy.get('.overlay').should( 'be.visible' ); // Needed to see that the process is starting
cy.get('.overlay').should( 'not.be.visible' ); // Needed to see that the process has ended
cy.get('.add_to_cart_button').should( 'have.class', 'loading' ); // Needed to see that the process is starting
cy.get('.add_to_cart_button').should( 'not.have.class', 'loading' ); // Needed to see that the process has ended
cy.visit( Cypress.env( 'baseUrl' ) + '/cart' ); // Step 9
Also I recommend using the following lines in the cypress.json file:
"defaultCommandTimeout": 60000,
"requestTimeout": 60000,
"responseTimeout": 60000,

ExternalInterface return to AS3 not working consistently in IE

So, I'm having some trouble returning a value from an ExternalInterface call. I have a piece of code that looks like this:
var a:String = String(ExternalInterface.call("function() { var returnTest = 'test'; alert(returnTest); return returnTest;}"));
ExternalInterface.call("alert", a);
The first alert (in the anonymous function on line 1) is correct (obviously). However, the alert on line 2 is returning null 90% of the time in IE10. It works everytime in Firefox though.
To further explain the bit about working 90% of the time, it seems I can roll the dice again on whether or not it will work by adding or removing seemingly meaningless alerts. For example: let's say it's not working, I could add an alert and it will start working. Or, say it is working, I could add an alert for debugging, and it stops working, remove the alert, still doesn't work, add the alert back, and it starts working again. I know this isn't what's happening, but it's behaving as if a coin is flipped every time an alert is added or removed.
And this all only happens in IE, works perfectly every time in Firefox.
Thanks.
Edit:
The code I provided isn't the actual code that needs to work, but rather the code that I wrote to verify where the problem was. The actual situation is that there's a JavaScript property in the environment our Flash is running in that we need to know, but we don't have access to the HTML or JavaScript the SWF will be running in. The actual code I need to run looks more like this:
var pageNameFromJS:String = String(ExternalInterface.call("function() { var pageName = ServerObject.currentPage.name; alert(pageName); return pageName;}"));
ExternalInterface.call("alert", pageNameFromJS);
The alert in the first line is just to make sure that ServerObject.currentPage.name works, which it does. The alert in the second line is debug code that was added when we noticed that functions that require pageNameFromJS weren't working.
Really I dont know why you complicate things like this ;)
You can do it easier :
AS3 code:
ExternalInterface.addCallback("flash_function", flash_function);
function flash_function(from_js_param){
trace('param received from js : '+from_js_param)
}
ExternalInterface.call("js_function", to_js_param)
JS code:
function js_function(from_flash_param){
var to_flash_param = 'I received your '+from_flash_param;
(get_your_swf).flash_function(to_flash_param);
}

undefined is not a function error on javascript load

I have been trying to debug this issue for the past 3 hours and pulling my hair now. In my site when I load I get a undefined is not a function. I've been looking at the syntax and nothing seems to be wrong. Here is a link to my site. If you check the console, then it errors on the first load. Any idea?
Your plugin "Lazy Load" does not terminate with a semi colon, and as such cannot be combined into a single file with "malihu jquery custom scrollbars".
As the second plugin starts with (, the javascript engine will interpret that as a call to a function that it expects to be returned from the previous function call.
Add a ; at the end of the Lazy Load file.
Roughly, the code
/*
* Lazy Load - jQuery plugin for lazy loading images
*/
(function(a,b,c,d){ .... })(jQuery,window,document)
/*
== malihu jquery custom scrollbars plugin ==
*/
(function($){ ...})(jQuery);
is interpreted as
anonymousFunction(jQuery, window, document)(function($) { ... })
^ anonymous function returns undefined
but a function was expected

Multiple calls to select2() on select input makes it disappear

How to reproduce :
Go to http://ivaynberg.github.com/select2/select2-latest.html with Chrome.
Open web development console, type :
$("#e1").select2()
"TypeError: Object -1 has no method 'show'"
and the first select disappears, why?
The problem is that on the second call the code wants to destroy the old generated dropdown before creating a new one. It does so before initializing itself properly.
The relevant code is in the "delete" function around line 645:
if (select2 !== undefined) {
select2.container.remove();
select2.dropdown.remove();
select2.opts.element
.removeData("select2")
.unbind(".select2")
.attr("tabIndex", this.elementTabIndex) <--- fail here
.show();
Trouble is it calls .attr("tabIndex", this.elementTabIndex) while this.elementTabIndex is undefined and .attr(name, undefined) is equivalent to .attr(name), thus returning the attribute itself (instead of the jquery element. So you got the attribute value '-1', and '-1'.show() makes no sense then, of course.
as a kludge, use .attr("tabIndex", this.elementTabIndex || -1).
a better fix might be is to call destroy only after this.elementTabIndex is initialized. I am not sure if the call to attr is really needed in the destroy at all, but then I cannot claim I understand the code.

gridcomplete function always running?

I'm using jqgrid with grails and need to select some objects. This works for one given object. My problem is that sometimes, calling function has no id. So there is nothing to do after grid completion. And I'm not able to do that even after trying if (false)... In all case, grid.jqgrid("setSelection... is executed and I get the message
java.lang.NullPointerException
Cannot get property 'id' on null object
which is true. But why is this line executed ???
gridComplete: function() {
if (false) {
grid.jqGrid("setSelection",'${cableFocus.id}',true);
}
return;
I have a second question : How can I use gridComplete to select several rows instead of one ?
Thanks very much for any help,
Olivier
The problem is not with gridComplete or your if statement (which is javascript). As you are getting a java error i'm guessing ${cableFocus.id} is placeholder (which will always get exectuted)
So the javascript is not running but your java code is still attempting to run and throwing the error

Categories

Resources