I have an Apache write that works everywhere except on pages that are using 'tabs'.
For some reason, the tabs are loading as if they are full pages loaded through AJAX (ran through the index.php as the rewrite instructs - but it shouldn't be rewriting an # anchor link I would think...)
Is there a way that I can stop it from doing this? It's weird because not only is it treating the # link as a real URL, it's adding -33,000px to the <html> via inline style, so this is what it looks like AFTER I disable it in the inspection tool. Otherwise it's just black and extremely long.
I should add that this was not an issue until I added <base href="/folder/"> to fix an issue with it not rewriting sub-directories properly. Before, it still did the rewrite and rendered the page correctly.
Update
This is definitely a <base> and jQueryUI's .tabs clashing. When I removed the rewrite and use the long URL it continuously clones them. The rewrite saved it from rewriting past 12 times or so.
mod_rewrite does also look at the fragment identifiers, but you can tell it not to in a RewriteCond.
The following only allows a URI that doesn't end with a fragment identifier.
RewriteCond %{REQUEST_URI} !(#(.*))$
Thanks to this bug report I found a solution.
$.fn.__tabs = $.fn.tabs;
$.fn.tabs = function (a, b, c, d, e, f) {
var base = location.href.replace(/#.*$/, '');
$('ul>li>a[href^="#"]', this).each(function () {
var href = $(this).attr('href');
$(this).attr('href', base + href);
});
$(this).__tabs(a, b, c, d, e, f);
};
//$('#the-object').tabs();
Apparently at 1.8 it worked, at 1.9 it went loopy. This adds the base href to the link, fixing the issue.
Apparently this is partly due to a bug in jQueryUI tabs
The Bug Report
I'm not sure I can wrap my head around this, but it is working in IE and not in Chrome/Firefox... Guess I'll try a plug-in.
Related
I'm trying to add global hotkey support to Spotify (and others). For this I have to execute a content script in the player app iframe, but no matter what pattern I try Firefox just won't execute my content script.
This is what I try to do:
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: /^https?:\/\/play\.spotify\.com\/apps\/player\/.+/,
attachTo: ["frame"],
contentScriptFile: [data.url("content.js")]
});
Has anyone any idea what could be wrong? How can I make it match?
See:
https://bitbucket.org/panzi/play-control/src/f1dbd217661c0f09d3615dce7b8b1cab9f8fbf70/browser-plugin/firefox/playcontrol-spotify/lib/main.js?at=default
The same thing for Chrome works perfectly well:
https://bitbucket.org/panzi/play-control/src/f1dbd217661c0f09d3615dce7b8b1cab9f8fbf70/browser-plugin/chrome/playcontrol-spotify/?at=default
I'm a regex noob, but in the doc examples, they don't use ^ even when the string starts with 'http'.
Try getting progressively more stringent to see which part of the regex it doesn't like. Throw an onAttach: console.log("pageMod attached"), in there to make sure it isn't being attached and something else isn't causing the problem.
/.*play\.spotify\.com\/apps\/player.*/ If this works, then either it doesn't like the beginning or the end. Try:
/https?:\/\/play\.spotify\.com\/apps\/player.*/
/^https?:\/\/play\.spotify\.com\/apps\/player.*/
.*play\.spotify\.com\/apps\/player\/.*/
.*play\.spotify\.com\/apps\/player\/.+/
If all of the above work, then your string should work too.
URL matching works the way I've written it. The bug was something else.
Okay, if I could offer a bounty for this I would - I offer virtual karma.
As mentioned in the title I have an .NET/MVC4/Jquery Mobile/Knockout website. On the index page there is a button
<button data-bind="click: getResults" data-theme="f">Search</button>
which calls a javascript function
$.mobile.navigate("/results?option1=a&option2=b", { transition: amw.transitions.slide });
This works great on all browsers and devices except Chrome/iPhone. As far as I can tell the version of Chrome or iOS does not matter. The resulting URL in the address bar is
iPhone/Chrome: http://www.mywebsite.com/#/results?option1=a&option2=b
Other Devices: http://www.mywebsite.com/results?option1=a&option2=b
I have put alerts throughout jQuery mobile to try and figure out what is going on (if someone knows a way to debug chrome on iOS let me know) and I cannot see where the extra # is being added.
This may not seem like a big deal but the url ends up being passed on to a downstream service that really does not like the extra #.
I can put in a hack at the call to the service to strip out the # but I would really like to figure out what is happening.
The only suspect line I can find in jQuery mobile (1.3.0) is line #2298
// if the hash is included in the data make sure the shape
// is consistent for comparison
if( data.hash && data.hash.indexOf( "#" ) === -1) {
data.hash = "#" + data.hash;
}
But I am not sure what this does or why it would occour only on Chrome/iPhone.
so StackOverflow people - what is going on?
Thanks.
I'm trying to use jayq with jquery.ui.sortable to make a list on a page
sortable. Looking at http://jqueryui.com/demos/sortable/ it seems like it should be as
simple as:
(.sortable ($ :#sortable))
Which compiles down to:
jayq.core.$.call(null, "\ufdd0'#sortable").sortable();
And throws:
Uncaught TypeError: Cannot call method 'call' of undefined
when I try to include it in a page. Interestingly, the generated code
does work in the page when I paste it into the js console, which implies
to me that something necessary is loaded after that line is executed.
I've modified
(def cljs-options {:advanced {:externs ["externs/jquery.js"]}})
to
(def cljs-options {:advanced {:externs ["externs/jquery.js" "js/ui/jquery-ui.js]}})
after reading
http://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html
, which doesn't seem to be sufficient. I'm guessing that jquery.ui
modifies the $ Prototype, but I'm not sure how to accomplish this in
clojurescript
I'm also using noir and noir-cljs, if it makes any difference.
Looking at using jQueryUI with closure compiler it might just be that jquery-ui needs a hand rolled externs file in order to be used, possibly a major undertaking. Can anyone confirm?
There were two separate aspects to solving this.
To compile in advanced mode, I needed to add the following to my externs file.
$.prototype.sortable = function (a,b) { };
$.prototype.disableSelection = function (a,b) { };
I'm using noir-cljs, and in my view template, had the following:
(:require [noir.cljs.core :as cljs])
(:use [hiccup.page :only [include-js]])
...
(cljs/include-scripts :with-jquery)
(include-js "/js/jquery-ui.js")
But this can't ever work, since the jquery-ui code needs to be included after jquery but before the generated ClojureScript. The solution is to manually include the libraries in the page:
(include-js "/js/jquery.js")
(include-js "/js/jquery-ui.js")
(include-js "/cljs/bootstrap.js") ;; Generated
I'm starting in web2py and I need to link my static files in my view files.
I'm trying to use URL() helper to make the links but I doesn't work properly...
My application is called red, my controller default and my function index.
My view is called index.html and is inside default folder, when I go to the page I see the view correctly but my URL are all wrong...
So far I tryed:
URL('static', 'css/bootstrap.min.css')
which gave back: "/static/css/bootstartp.css"
URL(a=request.application, args='static/css/bootstrap.css')
which gave: "/default/red/static/css/bootstrap.min.css"
URL(r=request, arg='static/css/bootstrap.min.css')
which gave: "/index/static/css/bootstrap.min.css"
URL('static/css/bootstrap.min.css')
which gave: "/default/static/css/bootstrap.min.css"
URL(a=request.application, c='static/css/bootstrap.min.css', f='')
which gave: "/red/red/static/css/bootstrap.min.css"
I may have tried some more but with no success...
My index function only returns dict().
And my router:
routers = dict(
# base router
BASE = dict(
applications = ['red', 'admin'],
default_application = 'red',
default_controller = 'default',
default_function = 'index',
map_static = True
)
)
I think it's also important to say I'm testing it on google app engine.
I want to get "/red/static/css/bootstrap.min.css".
I hope you want to link the css files in your view.
You can do this is tow ways.
1.In controller file (inside index():)
response.files.append(URL(request.application,'static/css','bootstrap.min.css'))
the same command you can use in view (index.html) also:
{{response.files.append(URL(request.application,'static/css','bootstrap.min.css'))}}
2.in the view (index.html) you can mention the normal css linking.
<LINK rel="stylesheet" type="text/css" href="{{=URL('static/css','bootstrap.min.css')}}">
if you want to link this file for the entire application. Then mention the above line in the layout.html page.
To get "/red/static/css/bootstrap.min.css":
URL('red/static', 'css/bootstrap.min.css')
I found the solution.
URL('static', 'css/bootstrap.min.css')
This line is correct, however I needed to turn map_static off in the routers file.
I have a few multiselect boxes from the Jquery UI on a page that work perfectly well in Chrome & Safari but not in Firefox for some reason... when I load the Error Console in Firefox I see:
Error: $.widget is not a function
Source File: http://localhost:3000/javascripts/jquery.multiselect.js?1302660373
Line: 563
Any ideas why?
edit: the line itself is within the open function right where it says "// react to option changes after initialization"
// open the menu
open: function(e){
var self = this,
button = this.button,
menu = this.menu,
speed = this.speed,
o = this.options;
widget: function(){
return this.menu;
},
// react to option changes after initialization
_setOption: function( key, value ){
var menu = this.menu;
switch(key){
case 'header':
menu.find('div.ui-multiselect-header')[ value ? 'show' : 'hide' ]();
I am assuming you are using the jQuery Multiselect plugin… which depends on jQuery UI.
Sounds like you have not included enough of the jQuery UI library or just none of it. You need to include the core parts of jQuery UI (including Widget) if you build a custom download. Or just download the whole jQuery UI and include it instead.
For anyone else who is getting this but has the requirements; make sure you are including the Javascript files in the correct order. This error was being caused by my jquery-ui.js being included after the multiselect js file.
This answer is probably unrelated to the situation of the questioner, but I put it here for the sake of others Googling the question.
I got this error using Rails 3.2 and fixed it by deleting (renaming) the public/assets folder. It seems there are a lot of problems with the assets pipeline still. I don't know the details but have had other Javascript failures that are fixed this way.
Actually if you are getting this error then it's either
a) per #andyb answer - you haven't included the correct jQuery UI components
OR
b) your DOM is not loaded yet with the correct $.widget and therefore your function is attempting to call before $.widget has loaded. to fix the problem, ensure $.widget is called BEFORE your function