Magento Configurable options not showing in drop down - javascript

I have a Magento store that uses two different templates. One for desktop version and the other for all other mobile devices. I used the Exception method to change the templates based on the variables in the exception list. I also have a large number of configurable products. These work just fine on the main desktop theme. All the options show and it goes through to checkout easily.
The problem is on the other theme. I get all the options for the different attributes showing on the product page but when I click the drop downs none of the options have been loaded. This happens on all products.
I am convinced it is a jQuery conflict issue as I have searched Google and this seem s to be a popular problem. I have however, disabled all my jQuery scripts allowing only prototype to run and still I get this problem.
Has anyone expirienced this and had an alternative or is there something else I could be missing?
The theme is Zonda and I've also tried using jQuery no conflict but unless I'm using it wrong it has not helped.

Related

Trying to use Mobile Framework: Gliders in my web application

I'm currently trying to adapt my currently in-development jquery-mobile web application to use the navigational structure from this mobile template called Gliders, and I'm having some issues.
http://www.enableds.com/products/gliders/
I've been following their FAQ in order to incorporate the page structure, as well as the left sidebar in an attempt to get their navigational structure working, but I keep getting the following error in tons of my scripts:
$ is not a function
This is what was happening when I kept my current version of jquery in (which is 1.11.3); and when I switched to their version (which is 1.8.2), I get this error:
$(...).sketch is not a function
Though even if I comment my sketch functions out, the left sidebar isn't showing up at all.
Does anyone have experience with using templates like this?
Looks like it was because I was using a different version of jQuery than the version that was in the application.

primefaces jquery ui tabs

Context: Trying to use jquery ui plugins (tabs and dialog) in a primefaces application directly from javascript (due to a certain requirement).
Problem: Getting 'length undefined' and 'undefined not a function' errors on the calls. More specifically, $("#id").tabs() is throwing the error.
What I did: search in stackoverflow; checked $.fn.* and $.ui.* in the console; surprisingly a lot of ui plugins are available (datepicker, droppable, selectable) but dialog and tabs seem to be missing. $.ui.version is 1.11.3. I tried using outputScript and directly <script> tags to include jquery ui, but none seemed to include these plugins; tried noConflict.
Additional info: It worked at some point intermittently.. not sure what caused it to work and what is preventing it from working now. Spent a lot of time troubleshooting this.
Advance thanks for your time and shall drop additional info if required.
PrimeFaces contains a customized (subset) of the jQuery-UI components. The others have to be added by you. And make sure you use them from a compatible version. Compatible with the jQuery version that PrimeFaces uses.
Including them should be done like you normally would include separate jquery-ui components or jquery-ui compatible ones by normally loading them via a javascript tag

Shortcode inside a slider

I am looking for a slider that would be able to display shortcode in WordPress.
For example, I can create a map with the shortcode [awesomeMap id='1']. And I know there are a bunch of sliders out there, but I can't seem to find one where I could add slides that simply consists of
[awesomeMap id='1'],
[awesomeMap id='2'],
[awesomeMap id='3']
And then when I call [show-slider], it would give me a slider with 3 maps. I'm trying to setup the WordPress so that people taking care of it in the future won't have to touch the code too much...
Anyone know of a WordPress slider that would support this functionality.
Check out Layerslider.
It's a pretty robust slider, responsive, and allows the use of shortcodes by providing a place for HTML. I've used this plugin on several projects and just tested it with a map shortcode on one of my sites. Seems to work well. It's always possible you run into plugin conflicts, but it may work for you.

(Foundation CSS) Dropdowns are not working

So dropdowns aren't working when using foundation (not even the code copy-pasted from the foundation docs).
This Html is generated using Play! Framework, and I am viewing it using chrome. This code is running on Localhost, not a foreign server. (Maybe chrome is blocking js on localhost or something?)
The following is the code I'm using. Any help would be appreciated.
JSFiddle: http://jsfiddle.net/U7CZq/
code
There are a couple things that I see here that could be causing problems.
The first major issue is you are not including foundation.topbar.js file, which is needed to implement the dropdowns.
The other issue is you should call $(document).foundation() at the bottom of the page to allow foundations javascript components to manipulate the DOM of the topbar to add the proper elements and classes need for the topbar dropdowns.

How can you use jQuery mobile's Column-Toggle without applying the mobile style to your whole page?

I'm trying to use the jQuery Mobile Column-Toggle widget in a web application that will be almost exclusively used by non-mobile users, so I really just want the Column picker functionality, without any of the other jQuery Mobile features. However, if I load the jQuery Mobile js and css, my entire site picks up the mobile style, which conflicts horribly with my existing stlying.
I've tried several mobileinit options that supposedly should suppress the mobile styling (I've tried various combinations of these settings - I'm just combining them all here for brevity):
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.ignoreContentEnabled = true;
$.mobile.page.prototype.options.keepNative = "select, input, a";
});
The other option I've seen is to add data-role="none" to all of the elements you don't want to style, but that has two problems:
It doesn't work for me (I'm still investigating why, and will update my question soon).
It seems like bad practice to junk up your html with a ton of suppression tags, which also increase the page size.
I've tried using the download builder to create a customer jQuery Mobile package with only the Column-Toggle (and dependency) module, but that custom package doesn't seem to work at all.
So I have two questions really:
Is there an alternative column picker for HTML tables that I can use instead of the jQuery Mobile version. I feel like I have done extensive web research, but have found nothing else.
What methods exist to prevent jQuery Mobile from applying it's style to your whole page? There are a few other SO questions about this, and I'm afraid that there just isn't any currently working method to do so.
Update: I've actually changed to using the new column selection widget in the tablesorter plugin, and scrapped jQuery Mobile.

Categories