.I want to use jquery bubble popup to create a bubble.
I read that the folder “jquerybubblepopup-themes” should be copied in the root of my website.
Also, I have a jsp that isn't directly under the root of my website, but under "mywebsite/WEB-INF/jsp/admin/myfile.jsp". It contains this javascript code :
<script type="text/javascript">
$(document).ready(function(){
$('.infoTip').CreateBubblePopup({
themeName: 'black',
themePath: 'jquerybubblepopup-themes'
});
});
</script>
I read that in "themePath", the relative path of "jquerybubblepopup-themes" should be set.
In my case, "jquerybubblepopup-themes" can't be loaded, how could I modify themePath value so that the file "jquerybubblepopup-themes" will be loaded ?
Thanks in advance
You should see errors in the browser console, ther you can see where it is trying to search for the themes (path), and adjust the path accordingly
Related
I am trying to create an editable SlickGrid (which uses jquery-ui) and also use Dojo.
When my page contains
<script src="../../bower_components/dojo/dojo.js"></script>
<script src="../../bower_components/SlickGrid/lib/jquery-ui-1.11.3.js"></script>
<script src="../../mlads/fillDemo/FillDemo.js"></script>
the console shows
Error: multipleDefine
return mix(new Error(error), {src:"dojoLoader", info:info}); dojo.js (line 106)
src: dojoLoader dojo.js (line 1896)
info: Object { pid="dijit", mid="dijit/_WidgetsInTemplateMixin", pack={...}, more...}
If I comment out the jquery-ui line, the error goes away.
FillDemo.js is my source code, which starts with
require(
[ "dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/registry",
"dijit/form/Button",
"dijit/form/DropDownButton",
It looks like this is an error with the order in which jQuery UI is loaded vs when the dojo loader is intialized.
See the discussion here for more context: https://geonet.esri.com/message/448542#comment-448449
The solution is to make sure dojo loader is called after jQuery UI and jQuery have loaded. For this, you can move the loading of dojo to the bottom of the HTML page, and leave jQuery and jQueryUI in the header.
I was trying to add JQuery UI functionality and styling but I'm having problems with the CSS file. I use to attach a lot of libraries to XSLTForms files, but I really can't make it load. I already put the and tags inside the CSS file, as I use to do with other CSS files, but with no success.
Any idea what could be wrong? Functionality is OK, because Y can make it appear a dialog, but with no style. I copied the source code in a new file and change it to html (replacing the XForms tahgs with HTML ones) and everything worked ok. So I think there is something with XSLTForms.
<xf:trigger id="showDialog">
<xf:label>Show dialog!</xf:label>
<xf:load ev:event="DOMActivate" resource="javascript:
var dialog = document.createElement('div');
dialog.innerHTML = 'Your modal dialog';
$(dialog).dialog({
autoOpen: true,
modal: true,
title: 'Attention',
open: function(){
$('.ui-widget-overlay').bind('click',function(){
$(dialog).dialog('close');
})
}
});
"/>
</xf:trigger>
I also unsuccessfully tryed to load this way:
<style type="text/css">
#import url('res/jquery-ui.css');
</style>
XSLTForms requires CSS files to be XML Well-formed.
This option can be disabled including this processing instruction in your XForms:
<?css-conversion no?>
Take a look to this XSLTForms Wikibook article
This particular file had something than others don't: CSS comments. Just remove comments or make it as in the XML way (<!-- A comment! -->).
But for some reason, any image referenced is not loaded...
We are using ckeditor inline edit in our asp.net mvc application. It removes the script tag when rendering the content. Following is the script we are trying to add in the source mode and save it to the database:
<script type="text/javascript" language="javascript">
$(function() {
document.oncontextmenu = function() { alert('Right click disabled for security reasons!!') ;return false;}
});
</script>
It adds fine to the database and when rendering the content back to the webpage, it removes the script tag.
Below is the image where I was able to add the script and save:
Below is the image where it removed the script when rendering back the page after save:
Following is the code i am using in my page to render the saved content:
<div id="content_editable" contenteditable="true">#Html.Raw(Model.PageContent.ToString())</div>
When i remove Html.Raw, it displays the script as the text in the page, but I need to have the script only in the source mode. I also have allowedContent = true in my config.js of ckeditor.
Please suggest how to handle this?
I am developing an app which uses both Phonegap and JQuery Mobile.
The app connects to an external server to check for new content/content updates (html and pdf files).
If needed, in iOS those files are successfully downloaded into the app /Documents folder.
The app then retrieves each content file's absolute path (file://localhost/var/mobile/Applications/APPID/Documents/subfolder) and creates listviews that link to each file's absolute path.
The problem I am having is the following: tapping a listview opens the linked page BUT not as an ajax call. The page loads but then no javascript (cordova.js, jquery.js app.js etc) is referenced in the page and hence I can't navigate back to the main menu. It seems like the jQueryMobile ajax navigation stops working when I open html files in the /Documents folder.
This happens only for the downloaded content in the /Documents folder (and hence outside Phonegap's www folder).
From the remote debugger, if I try to call the $.mobile.changePage('previousPage.html')* function, the console returns that $ is not defined, as if the page couldn't reference jQuery. But in none of the pages in the /www folder I need to re-reference the js files.
The app uses a multipage layout and each page has its own javascript after the <div data-role="page" id="pageid"> container.
Each .html in the /Documents folder is structured as a jQueryMobile page (with data-role attributes).
This is the code that creates the listviews:
<script type="text/javascript">
$('#content').live('pagebeforeshow', function(e) {
var curCat = parseInt(window.localStorage.getItem('currentCat'));
console.log('PAGE BEFORE SHOW: CONTENT');
db.db.transaction(function(tx) {
tx.executeSql('SELECT * FROM `content` WHERE `content`.`catID` = ?', [curCat],
function(tx, result) {
var path = window.localStorage.getItem('contentPath') + '/';
if (result.rows && result.rows.length) {
var html = '<ul data-role="listview" id="linkUl">';
for (var i = 0; i < result.rows.length; i++) {
var filename = result.rows.item(i).index_file.substr(result.rows.item(i).index_file.lastIndexOf('/'));
console.log(result.rows.item(i).id);
html += '<li id="' + result.rows.item(i).id + '">';
html += '<a href="' + path + filename +'">';
html += result.rows.item(i).title;
html += '</a></li>';
}
html += '</ul>';
console.log(html);
$('#contCnt').html(html);
$('ul#linkUl').listview();
}
},
function(tx, error) {
console.log(error.code);
var html = '<div id="errorDB">';
html += 'ERROR RETRIEVING FILES';
html += '</div>';
$('#contCnt').html(html);
}
);
});
});
$('div#content').live('pageshow', function(e) {
$('ul#linkUl').listview('refresh');
});
</script>
where the ContentPath variable is stored as a fileSystem object's directory.toUrl();
My fear is that jQueryMobile can't ajax-pull html from an external directory (the /Documents folder in iOS), or that I am missing some attribute or setting in order to do so.
Perhaps because I am using an absolute url? If so, how can I get the relative url from Phonegap's /www folder?
Do I have to declare something on the cordova.plist file?
Also, the downloaded content won't have to contain any js, they should be only plain html, but I need to keep jQuery Mobile header/footer and navigation system in all the pages.
I am using Cordova 2.2.0 and the latest releases of both jQuery and jQuery mobile.
Thanks in advance and sorry if something in the formatting goes wrong, I am new to SO (in case I'll edit asap).
You can open files from the documents folder (or any other folder the app has read access to).
There are two reasons that a link may not load as an ajax page
jQuery Mobile thinks that it isn't part of the app
There is a javascript error loading the page, which causes the default link click action to run instead of the ajax loader.
You could try using a call to $.mobile.changePage instead of just setting up the links - that gives you a little bit more visibility into what is going on.
I don't think a file url in a different folder should be treated as a different domain by jQuery Mobile, but to eliminate that possibility it should be reasonably easy to construct a relative url to the documents folder.
Solved, and thanks to Tom who led me through the right direction.
I guess the problem was that jQueryMobile was interpreting the absolute path as a an external link and thus the WebView was opening the html files as a new file, detaching it from the rest of the application.
What I did was substituting the absolute path file://localhost/var/mobile/Applications/APPID/Documents/subfolder
with a relative one, which in my case is './../../Documents/subfolder/filename.html
and now it works like a charm.
I have followed all the instructions to get the back button to appear but it's not working.
Here is what I'm following:
*The auto-generated Back button feature is off by default.
To activate auto generated back buttons on specific pages, simply add the data-add-back-btn="true" attribute on the page container and the magic will be back. To activate this globally, set the addBackBtn option in the page plugin to true. Here is an example of how to set this:
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
Note: You must include this script before the jQuery Mobile library is referenced in the head of your page for this to work. The mobileinit event is triggered immediately upon execution, so you need to bind event handlers before jQuery Mobile is loaded. Learn more about setting global config options.*
I've also cleared the cache and I still don't get the back button...
I'm I missing something new?
OK I found the solution.
I've decided to post it here for anyone who might have the same problem.
The code must be instead in a specific order.
After the jquery library but before the jqm library...
Make sure that this snippet is AFTER jQuery library loads but BEFORE jQueryMobile library is loaded... so:
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script type="text/javascript" src="jquery.mobile-1.0b1.js"></script>
Solution found here:
http://forum.jquery.com/topic/i-need-back-button-back