How to have a custom HTML for Page Loading Widget for JQuery Mobile web app?
I tried the following:
$(document).on('mobileinit', function(){
$.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='/image/logo.png' /><h2>loading...</h2></span>";
});
But it still displays the default image. I want to have a global configuration.
In single page
Documentation for the loader available here. Also check out this documentation much relevant to you.
You should do something as below
$(document).ready(function() {
$.mobile.loading('show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='http://www.shougun.it/images/loading.gif' /><h2>loading...</h2></span>"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>header</h1>
</div>
</div>
To setup as global
It needs to go belog <script src=jquery.js> but before <script src=jquerymobile.js> and must be called onmobileinit event. Did you import the js before loading the jQuery Mobile js?
Related
I'm trying to use the ckeditor in my app via WebView on android.
On iOS the ckeditor appear prefectly, but on android I have this error:
I/TiWebChromeClient.console: (main) [49519,49519] Uncaught TypeError: Cannot set property 'dir' of undefined (4466:file:///android_asset/Resources/lib/ckeditor/ckeditor.js)
In the ckeditor documentation appear this but it doesn't work anyway.
I'm thinking if it can be an error of Titanium, because on iOS all works perfectly.
This is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var CKEDITOR_BASEPATH = '/lib/ckeditor/';
window.CKEDITOR_BASEPATH='/lib/ckeditor/';
</script>
<script src="../ckeditor.js"></script>
<script src="js/sample.js"></script>
<style>
body{
margin: 0px;
}
</style>
</head>
<body id="main">
<div class="adjoined-bottom">
<div class="grid-container">
<div class="grid-width-100">
<div id="editor">
<h1>Hello world!</h1>
<p>I'm an instance of CKEditor.</p>
</div>
</div>
</div>
</div>
<script>
initSample();
</script>
</body>
</html>
Titanium supports CKEDITOR.
ckeditor.js calls config.js, styles.js and so on. In the html file, provide path to those missing dependency files.
1] Include the dependency files for ckeditor
<script src="lib/javascript/ckeditor/ckeditor.js"></script>
<script src="lib/javascript/ckeditor/config.js"></script>
<script src="lib/javascript/ckeditor/styles.js"></script>
<script src="lib/javascript/ckeditor/lang/en-gb.js"></script>
<script src="lib/javascript/ckeditor/plugins/panelbutton/plugin.js"></script>
<script src="lib/javascript/ckeditor/plugins/colorbutton/plugin.js"></script>
<script src="lib/javascript/ckeditor/plugins/colorbutton/lang/en.js"></script>
<script src="lib/javascript/ckeditor/plugins/colorbutton/lang/en-gb.js"></script>
2] For mobile application ckeditor isCompatible has to be set.
<script type="text/javascript">
CKEDITOR.env.isCompatible = true;
</script>
CKEDITOR.basepath setting is not required for the mobile application.
I am trying to manually integrate the jQuery select2 library into my Symfony form as a replacement for my select boxes.
Following the manual I have added to the page header:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
In addition I have modified my form class, adding attr to each select:
->add('kontoWinien', EntityType::class, array(
'class' => 'AppBundle\Entity\konto',
'attr' => array('class'=>'select2')
))
My modified Twig template:
{{ form_start(form) }}
<SCRIPT type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</SCRIPT>
{{ form_widget(form) }}
{{ form_end(form) }}
However the select2 is still not loaded.
HTML code generated by symfony3 looks like this:
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>
<form name="dziennik" method="post">
<script type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</script>
<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
Could you please advise what am i doing wrong?
Like fcpauldiaz said you'll need to load up jquery before hand. I took your code loaded jquery (and some options so we can see it work) and it worked fine.
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<!-- Loading jquery here--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>
<form name="dziennik" method="post">
<script type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</script>
<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
Try this
<script type="text/javascript">
$('select').select2();
</script>
I'm having a few issues initializing events on my JQuery Mobile site and I just want to see if I'm going about it the right way. Here is what my code kinda looks like:
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
<link rel="stylesheet" href="jquery.mobile-1.3.0-beta.1.css" />
<script src="jquery-1.9.0.js"></script>
<script src="jquery.mobile-1.3.0-beta.1.js"></script>
<script text/javascript>
function myFunction()
{
//do some code
}
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content" data-theme="f">
<p>2nd page</p>
</div>
</div>
<div data-role="page" id="next-page">
<div data-role="header">
<h1>2nd page</h1>
</div>
<div data-role="content" data-theme="f">
<script text/javascript>
$("#next-page").on("pageinit", function() {
myFunction();
});
</script>
</div>
</div>
</body>
</html>
For some reason, when I load the 2nd page, I just get the AJAX loading icon and it does not stop loading.
The other thing is, I don't want myFunction() to be called until the 2nd page is loaded which is why I have the script inside the 2nd page.
Any help is much appreciated :)
Javascript is key sensitive, if you are calling function myfuncion() then same function must exist.
In your case your function has a large F in its name: myFunction(), because called function myfuncion() don't exist browser will report an error and jQuery Mobile will stop the execution.
On the other hand this code:
$("#next-page").on("pageinit", function() {
});
is ok if you want to execute this function during the second page initialization. Jzst a little advice, change it to this:
$(document).on("pageinit", "#next-page",function() {
});
EDIT :
To solve your problem replace your pageinit event with pageshow event. jQuery Mobile has a problem with dealing with other "graphic" frameworks (maps, carousels)
they will usually work only in pageshow event.
$(document).on("pageshow", "#next-page",function() {
});
I have searched high and low but I cannot get this simple thing to work.
All I want to do is have a dialogue popup open when the homepage loads.
Can someone please point me in the right direction?
Check this out Dialog and this
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body style="font-size:62.5%;">
<!--<div id="dialog" title="Dialog Title">Test Dialog Box</div>-->
<div id="dialog" title="Google">
<IFRAME id="frame" style="border: 0px;" SRC="www.google.com" width="100%" height = "100%" >
</div>
</body>
Different solution
try this..if this ok..
Different solution
Try the Modal Dialog..Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link.
$(document).delegate('div[data-role=dialog]', 'pageinit', function() {})
What am I doing wrong here? I'm trying to get started with jQuery UI tabs.
Right now it's not working.
I thought I'd use the Google version so that it would be cached.
I'd like to find where Google has ui.tabs.js as well.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css">
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(function() {
$("#myTabs").tabs();
});
</script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
</head>
<body>
<ul id="myTabs">
<li><span>Tab 1</span></li>
<li><span>Tab 2</span></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it is shown by default.</div>
<div id="1">This content is linked to the second tab and will be shown when its tab is clicked.</div>
</body>
</html>
You need to enclose all the tabs in the same continer:
<div id="myTabs">
<ul>
<li><span>Tab 1</span></li>
<li><span>Tab 2</span></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it is shown by default.</div>
<div id="1">This content is linked to the second tab and will be shown when its tab is clicked.</div>
</div>