is any i18n localization plugin for Jquery Mobile? I searched a lot of time, but i18n translations plugins for Jquery not working correctly on JQM. For example in a href..many thanks.
Nobody knows?
I have had the same problem, and I resolved the problem simply by using the Jquery Extend function.
Say you define your language resources as follows:
1) Create a resource file with the default localization, presumably defined in English. Let's call it resources.default.js
var MyApp = MyApp || {};
MyApp.resources = {
One: "One",
Two: "Two",
Three:"Three"
}
2) Define your localized resources in independent files, let's say Spanish. Call it resources.es.js
var localizedResources = {
One: "Uno",
Two: "Dos",
Three:"Tres"
}
3) On your server logic, decide that you need to include only the default translations in case of English, or if you need any other language do an include.
<script src="resources.es.js"> </script>
4) Create your web page, and add scripts to handle your inclusion of the resources, per step 3.
<html>
<head>
</head>
<body>
<h1>Welcome to my App</h1>
<p>Welcome to this test app</p>
<button>Click me</button>
<script src="resources.default.js"> </script>
// The server decided we needed Spanish translations.
<script src="resources.es.js"> </script>
<script type="text/javascript">
//Extend the translations into the resources object.
$.extend(MyApp.resources, localizedResources);
$(window).ready(function(){
$('button').click(function(){
alert(MyApp.resources.One);
});
});
</script>
</body>
This should work for you.
EDIT:
See it in action here: http://jsfiddle.net/agarcian/rrDv3/1/
I'm using the following script for my projects. It allows you to change the language "at runtime", without reloading the page. The script is "autorun", just add it at the end of the html page.
It could have some bugs ;)
// AutoStar!
// Grab the parameters from my url, and initialize myself! FUGOOOOO
(function __lang_init_wrapper()
{
var scriptSrc = $('script[src*=Lang]').attr('src');
var myParams = parseParams(scriptSrc);
new Lang(myParams.language.toUpperCase(), true);
})();
/**
* Thanks to: http://wowmotty.blogspot.com/2010/04/get-parameters-from-your-script-tag.html
* #param n
* #param s
*/
function gup(n,s){
n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var p = (new RegExp("[\\?&]"+n+"=([^&#]*)")).exec(s);
return (p===null) ? "" : p[1];
}
/**
*
* #param language The language to use
* #param replaceText If true, replace all the occurency marked with placemark {lang=<key>}
*/
function Lang(language, replaceText)
{
var Languages =
{
ENG:
{
ok: 'ok'
,yes: 'yes'
,no: 'no'
,unknown_user: 'Unknown user'
,too_soon: "It's not time, yet..!"
}
,ITA:
{
yes: 'si'
,unknown_user: 'Utente sconosciuto'
,too_soon: "Pazienta ancora un po'..!"
}
}
// GENERAL SETTINGS
var LANG_CURRENT = language;
var LANG_DEFAULT = 'ENG';
/**
* All the html elements with this attributes are translated on the fly
*/
var LANG_ATTRIBUTE_NAME = "uilang"
/**
* key è la chiave da usare nell'oggetto LANG
* #param key
*/
this.get = function(key)
{
return Languages[LANG_CURRENT][key] || Languages[LANG_DEFAULT][key];
}
/**
* Cerco tutti gli elementi che hanno una certa classe
*/
this.searchAndReplace = function()
{
var me = this;
var divs = $('*[' + LANG_ATTRIBUTE_NAME + ']');
$.each(divs,function(indx,item)
{
item = $(item);
item.text(me.get(item.attr(LANG_ATTRIBUTE_NAME)));
});
}
this.setLanguage = function(language, replaceText)
{
LANG_CURRENT = language;
if(replaceText){
this.searchAndReplace();
}
}
if(replaceText){
this.searchAndReplace();
}
// Returns a localized instance of language
Lang = {
get: this.get
,searchAndReplace: this.searchAndReplace
,setLanguage: this.setLanguage
};
}
TO use it, just "mark" an html element
<h1 uilang="unknown_user"></h1>
or call
Lang.get('unknown_user')
to get the localized string
To initialize, call the "constructor"
new Lang("ITA", true);
To use it specifyng a language,
<script type="text/javascript" src="js/Lang.js?language=ita"></script>
You might also try a PhoneGap plug-in in case you are writing a Hybrid Mobile app. Here's the link:
https://github.com/ljbotero/phonegap-plugins/tree/master/Android/Localization
I'm trying with i18next, which works ok for most widgets after the lateste release (which allows to set a target of where the text should go).
However I'm still at a loss how to translate dynamically generated things like the table popup.
Other than that it's working really well.
Here is how to set it up:
lang : function (page) {
var update_language,
translate = function (page) {
page.find('.t').i18n();
},
set_lang = function (language) {
var set_icon;
switch (language) {
case "de-DE":
set_icon = "DE";
break;
case "fr-FR":
set_icon = "FR";
break;
default:
set_icon = "EN";
break;
}
$(".setIcon").parent(".ui-btn").find(".ui-icon")
.removeClass().addClass('ui-icon ui-shadow ui-icon-lang '+set_icon);
}
if (fauna.i18set === undefined) {
i18n.init({
lng: 'en-EN',
load: 'current',
detectLngQS: 'lang',
fallbackLng: false,
resGetPath: '../lang/__lng__/__ns__.json',
ns: 'gen',
debug: true,
// , useLocalStorage: true
// , localStorageExpirationTime: 86400000 // in ms, default 1 week
}, function () {
translate(page);
set_lang(i18n.lng());
});
fauna.i18set = true;
} else {
update_language = $.mobile.path.parseUrl( window.location.href )
.hash.replace( /.*lang=/, "" );
if (update_language !== "") {
i18n.setLng(update_language, function() {
translate(page);
set_lang(i18n.lng());
});
} else {
translate(page);
}
}
}
So I'm using a .t class to label elements for translation (lookup class is faster than data-attributes).
I'm calling the above on pagebeforeshow which also seems to handle everything nicely.
Sidenote: Just noticed the update_language will fail if pushstate is disabled. Need a better regex for this.
You can try the framework HTMLed.js.
Its pretty much easier. Checkout the framework.
here is the link
Related
I am just learning Apps Scripts, I don't have a lot of experience writing code. Google Sheets in-built data validation feature allows one to choose a "single" option from a dropdown list, however I need my Google Sheet to allow for choosing multiple options for a cell from a list of options.
After browsing the Internet, I found an Apps Script for the job and it works, yay! However, when multiple items are selected, an error message appears in the cell:
Invalid:
Input must be an item on the specified list
Below is the script I have been using.
function onEdit(e) {
var oldValue;
var newValue;
var ss = SpreadsheetApp.getActiveSpreadsheet();
var activeCell = ss.getActiveCell();
if (activeCell.getColumn() == 6 && activeCell.getLastRow && ss.getActiveSheet().getName() == "Template") {
newValue = e.value;
oldValue = e.oldValue;
if (!e.value) {
activeCell.setValue("");
}
else {
if (!e.oldValue) {
activeCell.setValue(newValue);
}
else {
activeCell.setValue(oldValue + ', ' + newValue);
}
}
}
}
Tried your code I think there's a slight issue with this code, you can select the same item multiple times. And also you won't be able to remove the warning.
SUGGESTION / Alternate solution
Here's another way to do it using apps script and custom menu, without an error or warning:
1.) Go to Extensions > Apps Script...
You should have this
2.) Rename the Code.gs to SERVER.gs and delete current content. Now paste here the codes from below
/**
* Changes the variable validation if needed
*/
var validation = {
sheet: 'VALIDATION',
range: 'A2:A'
}
/**
* Creates a menu entry in the Google Docs UI when the document is opened.
*
* #param {object} e The event parameter for a simple onOpen trigger. To
* determine which authorization mode (ScriptApp.AuthMode) the trigger is
* running in, inspect e.authMode.
*/
function onOpen(e) {
SpreadsheetApp.getUi().createMenu('Sidebar')
.addItem('Show Sidebar', 'showSidebar')
.addToUi();
showSidebar();
}
/**
* Opens a sidebar in the document containing the add-on's user interface.
*/
function showSidebar() {
SpreadsheetApp.getUi()
.showSidebar(HtmlService.createTemplateFromFile('SIDEBAR')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('Multiple selector'));
}
function getOptions() {
return SpreadsheetApp.getActive().getSheetByName(validation.sheet).getRange(validation.range).getDisplayValues()
.filter(String)
.reduce(function(a, b) {
return a.concat(b)
})
}
function process(arr) {
arr.length > 0 ? SpreadsheetApp.getActiveRange().clearContent().setValue(arr.join(", ")) :
SpreadsheetApp.getUi().alert('No options selected')
}
3.) Create a new file in the script editor by clicking the Plus(+) sign then click HTML.
4.) Delete the content and paste here the codes from below:
<!DOCTYPE html>
<html>
<style>
.container,
.buttons {
margin: 5px;
width: 95%;
padding: 2px;
font-size: 13px;
}
</style>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<div class="container"></div>
<div class="buttons">
<p>
<button class="action" id="action">Fill active cell</button>
<button id="btn">Rebuild options</button>
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<script>
$(document).ready(function() {
createList();
var selected = [];
$('.ui.checkbox').checkbox();
$("#action").click(function() {
$("input:checkbox[name=sel]:checked").each(function() {
selected.push($(this).val());
$(this).prop( "checked", false );
});
google.script.run.process(selected)
selected.length = 0;
});
$("#btn").click(function() {
createList();
});
});
function options(arr) {
$(".container").empty();
$(arr).each(function(i, el) {
$(".container").append('<div class="field"><div class="ui checkbox"><input type="checkbox" name="sel" value="' + el + '"><label>' + el + '</label></div></div>')
});
}
function createList() {
google.script.run.withSuccessHandler(options).getOptions()
}
</script>
</body>
</html>
5.) Refresh your spreadsheet you should now have the custom menu Sidebar.
6.) Add a sheet named "Validation" here is where you will put the options available to select. Start from the row 2.
7.) Go back to your main sheet, select the cell where you want to input the options. Click Sidebar > Show Sidebar. A side bar should open on the right with the list of options that you have added in the validation sheet.
8.) You can now select multiple items from the options.
Let me know if this works!
Reference: https://www.youtube.com/watch?v=Gsnzgvvx2y8 , option 1
I’m building a connector for Teams and I can get my custom configuration page to load by calling the necessary functions. I have a few <span> tags in my page just to debug and I'm populating the tags with properties from my call to "getSettings()".
<script>
microsoftTeams.initialize();
var teamsSettings = microsoftTeams.settings.getSettings(); //should this not return at least something?
if (teamsSettings == null) {
$(document).ready(function () {
document.getElementById('status').textContent = "Get settings
returned null!"; //i always get null
});
} else {
document.getElementById('entityId').textContent = teamsSettings.entityId;
document.getElementById('configName').textContent = teamsSettings.configName;
document.getElementById('contentUrl').textContent = teamsSettings.contentUrl;
document.getElementById('webhookUrl').textContent = teamsSettings.webhookUrl;
document.getElementById('appType').textContent = teamsSettings.appType;
document.getElementById('userObjectId').textContent = teamsSettings.userObjectId;
}
microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
saveEvent.notifySuccess();
});
function onClick() {
microsoftTeams.settings.setValidityState(true);
}
</script>
So I’m wondering if the getSettings() method is even running as my label element is blank. How can I troubleshoot the JavaScript interactions while configuring my connector in Teams? Is there a better way to view settings obtained from the method?
Here is the code snippet to get the webhookUrl using getSettings().
microsoftTeams.initialize();
microsoftTeams.settings.getSettings(function (settings) {
document.getElementById('webhookUrl').textContent = settings.webhookUrl;
});
In my previous project , i use Backbone.js of version 1.1.2 , and the Backbone.View is defined as
var View = Backbone.View = function(options) {
this.cid = _.uniqueId('view');
options || (options = {});
_.extend(this, _.pick(options, viewOptions));
this._ensureElement();
this.initialize.apply(this, arguments);
this.delegateEvents();
};
As i update my Backbone to the latest version(1.2.3) , now the Backbone.View is defined as
var View = Backbone.View = function(options) {
this.cid = _.uniqueId('view');
_.extend(this, _.pick(options, viewOptions));
this._ensureElement();
this.initialize.apply(this, arguments);
};
The difference is the delegateEvents now is moved to the setElement method , thus i can't dynamically change the
events property of Backbone.View. But in some situation , i think dynamically change events is needed , for example,
i have a FileRowView which extends Backbone.View to represent file information , its template html string is :
<li>
<h3 class="title">File name</h3>
<p>File description </p>
</li
The problem the title dom can be clicked and do something , but in other situation it can't be clicked , so in the events hash , i can
control this behavior in the initialize method just like :
var FileRowView = Backbone.View.extend({
tagName:'li',
tmpl:
'<h3 class="title">File name</h3>'+
'<p>File description </p>',
events:function(){
var events = {};
if(this.options.canClickTitle){
events['clcik .title'] = this._titleClickHandler
}
return events ;
},
//
// options = {
// canClickTitle:false
// ...
// ...
// }
//
initialize:function(options){
options = _.extend({}, {
canClickTitle:true
} , options);
this.options = options ;
this.render();
},
_titleClickHandler:function(){
console.log('some action');
},
render:function(){
var html = _.template(this.tmpl)();
this.$el.append(html);
}
});
But in the new version Backbone.View , as the delegateEvents has been added to the setElement method , how can i dynamically add event handler in the events property ?
In the version 1.2.0 the change document say:
Views now always delegate their events in setElement. You can no longer modify the events hash or your view's el property in initialize.
I don't know why ?
I'd turn the problem around a bit and use the tools you already have rather than trying to force them to work the way you think they should.
For example, you could make your template look like this:
<h3 class="title <%= is_clickable ? 'clickable' : '' %>">File name</h3>
<p>File description</p>
Then include an is_clickable flag in the data you feed the template and your events would be simple and static:
events: {
'click .clickable': '_titleClickHandler'
}
Or if you need more specificity:
events: {
'click .title.clickable': '_titleClickHandler'
}
Now you don't have to do anything weird or version dependent and you don't have to fight the framework.
I am lost between the possibilities offered to handle this case: let's say we have the following constraints:
Knockout
SPA with Sammy.js - Html loaded via Ajax
My page:
+-------------------------------+
| #navigation |
+---------+---------------------+
| #sidebar| #content |
| | |
| | |
| | |
+---------+---------------------+
Currently, I have one appViewModel which handle the data-bind for all the shared elements of my website: #navigation and #sidebar. This appViewModel has observable used on every pages of my website.
appViewModel = function () {
var self = this;
self.sidebarItemArray = ko.observableArray([x, y, z]);
self.currentRoute = ko.observable();
...
self.updateView = function(path, currentRoute) {
return $.get(path, function( data ) {
var $data = $(data);
// Updates #content, TITLE and update the currentRoute observable.
$( '#content' ).replaceWith($data.find('#content'));
document.title = $data.filter('title').text();
self.currentRoute(currentRoute);
}, 'html');
}
Sammy(function() {
this.get(':link'', function() {
self.updateView(this.path, this.params.link);
});
}).run();
}
ko.applyBindings(new appViewModel());
Now, let's say that #content is a piece of DOM loaded through an Ajax Call. Each time a user click a link inside #navigation or #sidebar, Sammy.js intercept it and then update #content. The problem is that the new DOM inside #content has data-bindings itself.
1) First, should I use the html data-bind on #content, replaceWith(as above) or the template binding with custom function to get the template?
(http://knockoutjs.com/documentation/template-binding.html#note-5-dynamically-choosing-which-template-is-used)? What is the best practice here?
2) Should Sammy necessary lives inside the appViewModel as in the documentation or elsewhere is just fine?
3) Once the updateView method is completed, how would you bind the new DOM? Like below? Isn't there a risk of rebinding some DOM because ko.applyBindings has already been called without second argument?
ko.applyBindings(new routeSpecificViewModel() , document.getElementById("content"));
I am thankful for your help.
One simple solution is to make the page's viewmodel an observable, and load it ondemand. Use a variable to record if ko.applyBindings has been called. Example from the knockout-spa framework:
/*! knockout-spa (https://github.com/onlyurei/knockout-spa) * Copyright 2015-2016 Cheng Fan * MIT Licensed (https://raw.githubusercontent.com/onlyurei/knockout-spa/master/LICENSE) */
define(['app/shared/root-bindings', 'framework/page-disposer', 'ko', 'sugar'], function (
RootBindings, PageDisposer, ko) {
var initialRun = true;
var Page = {
init: function (name, data, controller, path) {
Page.loading(false);
name = name.toLowerCase();
if ((Page.page().name == name) && (Page.page().data == data)) { // if the requested page is the same page, immediately call controller without going further
if (controller) {
controller(data);
}
document.title = Page.title();
if (Page.initExtra) {
Page.initExtra(name, data, controller);
}
return data;
}
var autoDispose = (Page.page().data.dispose && Page.page().data.dispose(Page)) || true; // if the requested page is not the same page, dispose current page first before swap to the new page
if (autoDispose !== false) {
// auto-dispose page's exposed observables and primitive properties to initial values. if not desired, return
// false in dispose function to suppress auto-disposal for all public properties of the page, or make the
// particular properties private
PageDisposer.dispose(Page.page().data);
}
PageDisposer.init(data); //store initial observable and primitive properties values of the page
var initialized = (data.init && data.init(Page)) || true; // init view model and call controller (optional) before template is swapped-in
if (initialized === false) {
return false; // stop initialization if page's init function return false (access control, etc.)
}
if (controller) {
controller(data);
}
Page.pageClass([name, ('ontouchstart' in document.documentElement) ? 'touch' : 'no-touch'].join(' '));
Page.page({
name: name,
data: data,
path: path
}); // to test if template finished rendering, use afterRender binding in the template binding
document.title = Page.title();
if (Page.initExtra) {
Page.initExtra(name, data, controller); // useful for common init tasks for all pages such as anaylitics page view tracking, can be set in RootBindings
}
if (initialRun) {
ko.applyBindings(Page, document.getElementsByTagName('html')[0]); // apply binding at root node to be able to bind to anywhere
initialRun = false;
}
return data;
},
page: ko.observable({
name: '', // name of the page - auto-set by the framework, no need to worry
data: {
init: function () {}, // preparation before the page's template is rendered, such as checking access control, init/instantiate modules used by the page, etc.
dispose: function () {} // properly dispose the page to prevent memory leaks and UI leftovers (important for SPA since page doesn't refresh between page views) - remove DOM element event listeners, dispose knockout manual subscriptions, etc.
}
}),
pageClass: ko.observable(''),
loading: ko.observable(false),
title: function () {
return Page.page().name.titleize(); // override in RootBindings as needed
}
};
Object.merge(Page, RootBindings); // additional root bindings as needed by the app
return Page;
});
A mini but full-fledged SPA framework built on top of Knockout, Require, Director, jQuery, Sugar.
https://github.com/onlyurei/knockout-spa
Live Demo: https://knockout-spa.mybluemix.net
I have an issue when using bootstrap 3 & prototype.js together on a magento website.
Basically if you click on the dropdown menu (Our Products) & then click on the background, the dropdown menu (Our Products) disappears (prototype.js adds "display: none;" to the li).
Here is a demo of the issue:
http://ridge.mydevelopmentserver.com/contact.html
You can see that the dropdown menu works like it should without including prototype.js on the page at the link below:
http://ridge.mydevelopmentserver.com/
Has anyone else ran into this issue before or have a possible solution for the conflict?
EASY FIX:
Just replace Magento's prototype.js file with this bootstrap friendly one:
https://raw.github.com/zikula/core/079df47e7c1f536a0d9eea2993ae19768e1f0554/src/javascript/ajax/original_uncompressed/prototype.js
You can see the changes made in the prototype.js file to fix the bootstrap issue here:
https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554
NOTE: JQuery must be include in your magento skin before prototype.js.. Example:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/prototype/prototype.js"></script>
<script type="text/javascript" src="/js/lib/ccard.js"></script>
<script type="text/javascript" src="/js/prototype/validation.js"></script>
<script type="text/javascript" src="/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="/js/varien/js.js"></script>
<script type="text/javascript" src="/js/varien/form.js"></script>
<script type="text/javascript" src="/js/varien/menu.js"></script>
<script type="text/javascript" src="/js/mage/translate.js"></script>
<script type="text/javascript" src="/js/mage/cookies.js"></script>
<script type="text/javascript" src="/js/mage/captcha.js"></script>
I've also used code from here: http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework but without a need to modify any source. Just put code below somewhere after prototype and jquery includes:
(function() {
var isBootstrapEvent = false;
if (window.jQuery) {
var all = jQuery('*');
jQuery.each(['hide.bs.dropdown',
'hide.bs.collapse',
'hide.bs.modal',
'hide.bs.tooltip',
'hide.bs.popover',
'hide.bs.tab'], function(index, eventName) {
all.on(eventName, function( event ) {
isBootstrapEvent = true;
});
});
}
var originalHide = Element.hide;
Element.addMethods({
hide: function(element) {
if(isBootstrapEvent) {
isBootstrapEvent = false;
return element;
}
return originalHide(element);
}
});
})();
Late to the party, but found this github issue which links to this informational page which links to this jsfiddle which works really nicely. It doesn't patch on every jQuery selector and is, I think, the nicest fix by far. Copying the code here to help future peoples:
jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
var pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
var disablePrototypeJS = function (method, pluginsToDisable) {
var handler = function (event) {
event.target[method] = undefined;
setTimeout(function () {
delete event.target[method];
}, 0);
};
pluginsToDisable.each(function (plugin) {
jQuery(window).on(method + '.bs.' + plugin, handler);
});
};
disablePrototypeJS('show', pluginsToDisable);
disablePrototypeJS('hide', pluginsToDisable);
}
Using the * selector with jQuery is not advised. This takes every DOM object on the page and puts it in the variable.
I would advice to select the elements that use a Bootstrap component specific. Solution below only uses the dropdown component:
(function() {
var isBootstrapEvent = false;
if (window.jQuery) {
var all = jQuery('.dropdown');
jQuery.each(['hide.bs.dropdown'], function(index, eventName) {
all.on(eventName, function( event ) {
isBootstrapEvent = true;
});
});
}
var originalHide = Element.hide;
Element.addMethods({
hide: function(element) {
if(isBootstrapEvent) {
isBootstrapEvent = false;
return element;
}
return originalHide(element);
}
});
})();
Very late to the party: if you don't feel like having extra scripts running, you can add a simple CSS override to prevent it from getting hidden.
.dropdown {
display: inherit !important;
}
Generally the use of !important in CSS is advised against, but I think this counts as an acceptable use in my opinion.
see http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework/.
It's quite an easy fix to validate the namespace of the element clicked.
Add a validation function to prototype.js:
and after that, validate the namespace before the element will be hidden:
hide: function(element) {
element = $(element);
if(!isBootstrapEvent)
{
element.style.display = 'none';
}
return element;
},
Replacing Magento's prototype.js file with the bootstrap friendly version suggested by MWD is throwing an error that prevents saving configurable products:
Uncaught TypeError: Object [object Array] has no method 'gsub' prototype.js:5826
(Running Magento Magento 1.7.0.2)
evgeny.myasishchev solution worked great.
(function() {
var isBootstrapEvent = false;
if (window.jQuery) {
var all = jQuery('*');
jQuery.each(['hide.bs.dropdown',
'hide.bs.collapse',
'hide.bs.modal',
'hide.bs.tooltip'], function(index, eventName) {
all.on(eventName, function( event ) {
isBootstrapEvent = true;
});
});
}
var originalHide = Element.hide;
Element.addMethods({
hide: function(element) {
if(isBootstrapEvent) {
isBootstrapEvent = false;
return element;
}
return originalHide(element);
}
});
})();
This answer helped me to get rid of bootstrap and prototype conflict issue.
As #GeekNum88 describe the matter,
PrototypeJS adds methods to the Element prototype so when jQuery tries
to trigger the hide() method on an element it is actually firing the
PrototypeJS hide() method, which is equivalent to the jQuery
hide() method and sets the style of the element to display:none;
As you suggest in the question itself either you can use bootstrap friendly prototype or else you can simply comment out few lines in bootstrap as bellow,
inside the Tooltip.prototype.hide function
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
I realise that this is a pretty old post by now, but an answer that no-one else seems to have mentioned is simply "modify jQuery". You just need a couple of extra checks in jQuery's trigger function which can be found around line 332.
Extend this if statement:
// Call a native DOM method on the target with the same name name as the event.
// Don't do default actions on window, that's where global variables be (#6170)
if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) ) {
... to say this:
// Call a native DOM method on the target with the same name name as the event.
// Don't do default actions on window, that's where global variables be (#6170)
// Check for global Element variable (PrototypeJS) and ensure we're not triggering one of its methods.
if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) &&
( !window.Element || !jQuery.isFunction( window.Element[ type ] ) ) ) {
"#6170" only seems to be mentioned in jQuery once so you can do a quick check for that string if you're working with a compiled (complete) jQuery library.