I'm trying to get working jQuery UI and prototype libraries together and finally arrived to this:
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>
<script type="text/javascript" src="/js/prototype.js"></script>
<script>
var jq = jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script src="/js/jquery-ui.js"></script>
And call jQuery like so:
jQuery(function($){
$('#myid').[...]
});
or
jQuery('#myid').[...]
But now, I can't get rid of the following error (without calling anything):
Uncaught TypeError: proto.plugins[i].push is not a function
and comes from the jquery-ui.js file with this part:
$.ui.plugin = {
add: function( module, option, set ) {
var i,
proto = $.ui[ module ].prototype;
for ( i in set ) {
proto.plugins[ i ] = proto.plugins[ i ] || []; // Error fires here
proto.plugins[ i ].push( [ option, set[ i ] ] );
}
},
Is there a solution?
I ran into the same problem. The cause for me was my attempt to add a function to javascript's Object class.
In fact, simply extending javascript's Object is not supported at all by jQuery - and thereby its plugins.
This answer to the question of extending Object has a good solution which solved the problem with jQueryUI for me.
Related
I am working on a Firefox Add, using the newest SDK. The problem I am having, is that when ever I try to run a custom dom function it doesn't work.
Scenario:
The firefox add-on must be able to loop through all tabs, and if the correct one is open based on the title, run a specific function, like: mydom.checkIt();
<!DOCTYPE html>
<html>
<head>
<title>My Web</title>
</head>
<body>
<script>
mydom = {};
mydom.checkIt = function (){
alert('Hi');
};
</script>
</body>
</html>
Then the add-on source code would be something like:
var tabs = require('sdk/tabs');
for (let tab of tabs)
{
if(tab.title=='My Web')
{
tab.activate();
}
}
tabs.on('activate', function(tab) {
tab.attach({
contentScript: "if(typeof(mydom)!=='undefined')mydom.checkIt();else console.log('no defined');"
});
});
But this doesn't work and it says always: "no defined"
Any ideas?
You have to get into the dom js scope with unsafeWindow or wrappedJSObject. So contentWindow.wrappedJSOBject.checkIt() works from bootstrap addon (not sure about sdk)
Warning though, this may not be e10s friendly and we should find a way to support that
I'm using the tablesorter search/filter plugin to search names from a list. so when i type in a letter corresponding to the letters in the list will display. I used this: http://mottie.github.io/tablesorter/docs/example-widget-filter-external-inputs.html as a reference.
Below is my code:
var $table = $('#table').tablesorter({
sortList: [[0,0], [1,0]],
theme: 'blue',
widgets: ["zebra", "filter"],
widgetOptions : {
filter_columnFilters: false,
filter_saveFilters : true,
}
});
$.tablesorter.filter.bindSearch( $table, $('.search-subaccounts') );
HTML:
<input class="search-subaccounts" type="search" data-column="1"/>
I'm trying to filter names based on first name.
so when i try to execute it, gives me the following error:
Uncaught TypeError: Cannot read property 'bindSearch' of undefined
I dont know why it says 'filter' is undefined whereas i tried executing exactly the way its in the demo. What did i do wrong here?
Any ideas??
It sounds like the widget file isn't being included since the bindSearch function isn't being found - it's included with the filter widget. Make sure you load the following files on your page (theme file name will vary depending on your choice):
<link rel="stylesheet" href="css/theme.blue.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.widgets.min.js"></script>
Note: JS/Jquery noob alert (yes, me)
There seems to be a conflict between the following two plugins:
TableSorter (2.9.1)
bootstrap-popover.js v2.2.1
The plugins work as they should separately, but when together, the popovers don't work. I've tried moving the calls to the popover script (and its initialization) before any other plugins, but no dice. I have a feeling the tablesorter script is somehow removing the titles from the DOM (another subject I know little about) before the popover script can load, but no dice.
In my HTML
<script src="../../js/jquery-1.8.2.min.js"></script>
<script src="../../js/jquery.tablesorter.js"></script>
<script src="../../js/jquery.tablesorter.pager.js"></script>
<script src="../../js/tooltips-popovers.js"></script>
<script>
$(function(){
$("#stats").tablesorter();
});
</script>
<script>
$("a[rel=popover]").popover({html:true,trigger:'hover'});
</script>
<script> /* Initiate pager */
$(function(){
var pagerOptions = {
container: $(".pager"),
};
$("table")
.tablesorterPager(pagerOptions);
});
</script>
Make sure you are initializing the popover script within a document ready event.
$(function(){
$("a[rel=popover]").popover({html:true,trigger:'hover'});
$("#stats")
.tablesorter()
.tablesorterPager({
container: $(".pager")
})
});
If that doesn't work, I can only guess that the popover links are inside the table? If so, they are added and removed dynamically, when sorting the table, so they might need to be added through a delegated event, the code above may not work in that case.
Update: As stated, the popup links are within the th, which I assume are in the thead? If so, try this code:
$(function(){
$("#stats")
.tablesorter({
initialized: function(table){
$("a[rel=popover]").popover({html:true,trigger:'hover'});
}
})
.tablesorterPager({
container: $(".pager")
})
});
The Firebase key-value store looks intriguing, and would be fun to use with Dart's HTML framework.
They offer a JavaScript library for reading/writing to their model. Has anyone tried using it with Dart?
My plan (based on very little Dart knowledge) is to:
Include their library in my html
Load the js.dart package
instantiate a model through js.dart
read and write through model.
Does that seem like the right approach? Or, is there a much better way of doing it?
Thanks
You can use any Javascript library through the js package.
For Firebase you have to :
add the js package to your pubspec.yaml
dependencies:
js: any
add the the following <script> to your html page :
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script type="application/dart" src="youDartCode.dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
use Firebase Javascript SDK through js package. Something like :
import 'package:js/js.dart' as js;
void main() {
final myDataRef = new js.Proxy(js.context.Firebase,
'https://xxx.firebaseio-demo.com/');
myDataRef.on('child_added', (snapshot, String previousChildName) {
final message = snapshot.val();
print("${message.name} : ${message.text}");
});
myDataRef.push(js.map({"name": 'myName', "text": 'js interop rocks'}));
}
The above Dart code is the equivalent of the following JavaScript code :
var myDataRef = new Firebase('https://xxx.firebaseio-demo.com/');
myDataRef.on('child_added', function(snapshot, previousChildName) {
var message = snapshot.val();
console.log(message.name + " : " + message.text);
}));
myDataRef.push({name: 'myName', text: 'js interop rocks'});
Basically :
when you have to instantiate a Javascript object, use new js.Proxy(js.context.MyJavascriptObjectName, arg1, arg2, arg3)),
when you have to provide a Javascript anonymous object, use js.map({'attr1', value1}, {'attr2', value2}).
There's now a wrapper for the firebase.js library in Dart here: https://github.com/firebase/firebase-dart/ (also available on pub). It uses dart:js as discussed in this thread, so inclusion of firebase.js is still required!
I got the error message "Breaking on exception: ReferenceError: ReceivePortSync is not defined" when Dart got to here.
js.scoped (() {
});
An additional line of code is needed to use Firebase with Dart. Add the line "packages/browser/interop.js"
<script type="application/dart" src="ScrollViewDemo.dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
----------------- Edit Aug 15 ----------
js.scoped is no longer needed in the newer version of interopt.js
There seems to be some issues when combining MathJax and jQuery Mobile on the same page. Sometimes the MathJax renders correctly and other times it does not - and this can happen to the same page.
The HTML that loads both of them looks like this:
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'>
</script>
<script type='text/javascript'
src='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js'>
</script>
<link rel='stylesheet' type='text/css'
href='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css' />
<script src='/beta/mathjax/MathJax.js'>
</script>
You can see an example page here: http://stackmobile.com/beta/math.stackexchange.com/questions/view/?id=47772
Edit: It seems to be a problem with MathJax not recognizing a new page being loaded via AJAX - here is an example that doesn't seem to work: http://stackmobile.com/beta/#/beta/physics.stackexchange.com/questions/view/?id=11678
Well I found a solution... and it goes something like this:
First assign unique numbers to the pages. Since these pages are generated in PHP, this can be accomplished by using uniqid().
Assign the following function the the pageshow event:
$('#page_id').live('pageshow', function(event, ui) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'path_to_mathjax/MathJax.js';
script.onload = callback;
document.getElementsByTagName('head')[0].appendChild(script);
});
This loads MathJax and inserts it into the DOM - this script should be included within the page element. Also note that we mention a 'callback'. This will be called when the script loads.
This function (the callback) needs to go outside of any pages. This will prevent it from being included twice after a new page is loaded.
var mathjax_loaded = false;
function callback()
{
if(mathjax_loaded)
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
else
{
MathJax.Hub.Startup.onload();
mathjax_loaded = true;
}
}
There's a lot here. First of all, we keep track of whether this callback has been called once before. If not, we tell MathJax to parse the page as if it were invoked from the window.onload event. If this has already happened (and we're on a new page) then we simply need to have MathJax run through the new page.
I'm probably missing something and there may be a better way of doing this. But I haven't found any other way that works.
Not sure if this is easier/better way to add a script but here is what I found:
http://api.jquery.com/jQuery.getScript/
Can't append <script> element
(Untested) Maybe (using your post: Combining jQuery Mobile and MathJax on a mobile site?)
$('#page_id').live('pageshow', function(event, ui) {
$.getScript('http://path_to_mathjax/MathJax.js', function() {
callback();
});
});
var mathjax_loaded = false;
function callback()
{
if(mathjax_loaded)
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
else
{
MathJax.Hub.Startup.onload();
mathjax_loaded = true;
}
}