Google Polymer with Rails menu not working - javascript

I'm trying to use Google Polymer in a Rails app. I'm using the gem emcee (https://github.com/ahuth/emcee) and I have the core installed.
I am trying to just setup the scaffolding element to see how it works. However, I can't get the menu to expand when the window is small (mobile). The button just doesn't work. Javascript is loading because without it nothing works. I tried removing everything I could think about that would be causing problems.
You can see the problem on EDIT: removed link (no longer valid)
Note that I've tried removing all other JS besides platform.js and even all css.
Besides the button not working, the page starts dark when scaled small.
I'm also using Rails 4.0.2 and Ruby 2.1.2.

Did you add the required 'custom' javascript?
document.addEventListener('polymer-ready', function() {
var navicon = document.getElementById('navicon');
var drawerPanel = document.getElementById('drawerPanel');
navicon.addEventListener('click', function() {
drawerPanel.togglePanel();
});
});

When I updated to the newest version, this problem went away. I'm not sure if it was a bug or something I did wrong the first time, but it works now.

Related

Kendo Drop Down List Widget breaks when filter property set

I have a kendo drop down list tied to a remote data source. I've followed the documentation and configured virtualization and the remote data source is working as intended, but if the Filter option is set at all, bluring out of the open drop down throws an error in JS, and selecting anything throws an error in JS. The only way to close the list is clicking on the close arrow in the drop down widget.
Below are screens of the errors i'm seeing in the console. 'Add' of undefined occurs when selecting an item:
'Attr' of undefined occurs when clicking outside of the drop down list to blur and close.
I'm at a loss here. Any addition of the filter option causes these errors. I've isolated that as the issue by systematically removing every possible option and the only thing that seems to prevent the errors from occurring is the filter option:
#(Html.Kendo().DropDownList()
.Name("MyDropDown")
.DataTextField("MyText")
.DataValueField("Id")
.Filter(FilterType.Contains) //<--This guy right here
...
..more code..
...
)
I've tried it in just JavaScript, I've tried it using the kendo ASP.NET MVC wrappers and the .ToClientTemplate option. I've tried it just using the MVC wrappers alone. I must be missing something but alas I do not see it.
EDIT: The issue seems to be happening in the close handler in kendo.all.js:
_closeHandler: function (e) {
if (this.trigger(CLOSE)) {
e.preventDefault();
} else {
this._focused.attr('aria-expanded', false);
this.ul.attr('aria-hidden', true);
}
},
When it goes to set the aria-expanded to false on close, the _focused property is undefined. This happens before the close event, as I tried to hook into close to see if there is something in there I can manually correct. Is there any reason why this script isn't working? Am I missing a file? Everything appears to be configured correctly, but nevertheless, the widget is broken.
Edit #2: I thought maybe there was something wrong with the kendo libs, or some mismatch between libraries, or that this was possibly a bug in an older version, so I udpated my kendo libraries and the mvc wrapper to the newest version (2018.1.117) and the exact same issue is still happening. I thought maybe there was a mismatch in jquery version somehow that was causing the issue, but according to the documentation, version 2018.1.117 requires jQuery version 1.12.4, which i'm using. Just updated all the libraries and dependencies and i'm still getting the error.
In setting up an isolated test of the issue, I stumbled on to a line in a 3rd party script that was hijacking jQuery.fn.focus, which apparently had some serious side effects. Removing this line in the 3rd party script appeared to fix the issue entirely.
Try .Filter("contains"), might do the trick.

Integrating Isotope js on Joomla 1.5 site

I am trying to integrate Isotope JS on Joomla 1.5 site. (I know it's old Joomla!)
https://www.buffalobrownies.com/?view=article&id=269
I got the code working fine on a test page on that domain (but outside of Joomla).
Inside Joomla, neither the JQuery nor vanilla JS seems to trigger.
With JQuery trigger code on, I get this error on Chrome Console:
Cannot read property 'isotope' of null
(With the vanilla JS script turned on I get a bunch of OTHER errors......)
So I'm guessing there is something wrong with the reference to $ but I'm not clued up enough to know what it is...
Any thoughts out there? Thanks for your help
(I have Jquery linked high up in the <head>, then Isotope JS link just after, then the isotope trigger JS before the bottom </body> tag)
Chris
So I discovered that it was Mootools in Joomla 1.5 that was causing the conflict.
(I just had to start taking lines of code out, one by one, until I found the one that made the difference).
I managed to find some code online that turned Mootools off for the front end, but kept it on for the back end.
Now I've managed to get the Isotope script working in my example. Now I just need to get it working with live data!

WordPress jQuery.load() pagination link gives 404

I'm trying to build a jQuery-based next/previous navigation but ran into a roadblock of a weird error. Here's a very much simplified version of what I'm trying to do:
$('.next').click(function(ev) {
ev.preventDefault();
$('main').fadeOut();
$('main').load('/page/2/ main .content', function() {
$('main').fadeIn();
});
});
The next page link is usually generated dynamically of course.
Clicking on the link gives a 404 error in the Chrome developer tools and the content never loads into the main tag. Changing it to a rewrite-less /?paged=2 also 404's. When inserting a link to a page however (like /contact/) works without without a problem. Directly entering the link works as well, so rewriting is working correctly.
This is driving me nuts. Anyone has an idea how to make this work?

"Add media" button not working after upgrade to Wordpress 3.9

An automatic upgrade to Wordpress 3.9 broke the "Add media" functionality for posts on our client's site...when you click "Add media", it wasn't showing any of the photos in the media library (just had a blank area where the photos should be), even though those photos are still there when you go to the Media Library via the "Media" menu item in the main navigation.
Since then, I have tried upgrading to Wordpress 3.9.2, disabling all plugins, and setting the theme to the default TwentyTen theme. The issue still remains, and the only difference after all of that is that the upgrade to Wordpress 3.9.2 (from an earlier 3.9 version) seems to have caused a spinning icon to appear in the area where the photos should load, but it just spins forever and the photos never load.
I looked at the AJAX calls in Chrome Developer Tools and found that the admin_ajax.php call is actually returning the correct data, including all the correct image paths, so that's not the problem...I'm thinking there must be some Javascript-related issue that's causing the images not to appear.
Debugging this further, I found the initialize() function of media.controller.GalleryAdd, which is a standard Wordpress file at wp-includes/js/media-views.js. I added the console.log() function to see what was going on:
initialize: function() {
// If we haven't been provided a `library`, create a `Selection`.
if ( ! this.get('library') ) {
console.log('media.query result', media.query({ type: 'image' }) )
this.set( 'library', media.query({ type: 'image' }) );
}
media.controller.Library.prototype.initialize.apply( this, arguments );
}
Wordpress uses Backbone.js, and although I don't know Backbone, I found what looks like a problem here...the media.query() result has a length of 0 and its models array is empty.
I am trying to debug further to find the source of the problem, but I'm not all that familiar with the Wordpress source code and as I mentioned I'm not familiar with Backbone either, and it would be nice to get this resolved without having to spend hours upon hours debugging it more.
Can anyone provide any ideas/suggestions as to what might be the problem here?
I figured out what the problem was, and it was surprisingly simple...it was caused by extra whitespace at the end of wp-config.php! I simply removed the closing ?> tag at the bottom of the file to avoid whitespace from causing any problems in the future (I personally always omit the closing ?> tag in my own code but this site was built by someone else.) I'm guessing that the whitespace was interfering with header() function somewhere in the Wordpress code, causing the media gallery window to stop working.
I had the same issue, I fund that two jQuery files were missing jquery.ui.tabs.min.js and jquery.ui.tooltip.min.js. I found the source in Google Code. they need to be placed in wp-includes/js/jquery/ui

JQuery Slider Control - slider-handle not moving

I've got a text scrollbox made with JQuery. It works fine when on its own (nationalboston.com/temp) but when I hand it off to be wrapped into a Joomla page, the slider handle doesn't move (here). As far as I can tell, everything else works fine.
I've inspected the computed CSS in Chrome Inspector, and it seems that the handle is styled as it should be (position:absolute; top:auto;). What am I doing wrong?!
EDIT:This appears to be the case in Safari 3.x Mac and Chrome 3 Alpha Mac, Not in Firefox Mac. I haven't done further testing.
I followed your link in Firefox 3.0.11 on mac and the slider works perfectly. Did you find the solution to your problem? The first idea that came to me when I read your question was that you might have a javascript namespace conflict (using more than one JS framework?). A possible solution would then have been to run JQuery in no-conflict mode, as in:
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
More info there: http://docs.jquery.com/Core/jQuery.noConflict

Categories

Resources