JQuery Mobile 1.5.0 loading message - javascript

I was using Jquery Mobile 1.3.0. I decided to change and use the new version (1.5.0) due to a bug of the previous version.
When loading the page, a loading text appears on the botttom of the page. In the previous version I used this code, and it worked:
$.mobile.loadingMessage = false;
But, with the new version it doesn't work.
Thanks for your help.

Yes, this has been changed.
You can override the global default setting as below:
<!-- JQM theme shall be loaded before structure -->
<link rel="stylesheet" href="css/jquery.mobile-1.5.0.alpha.theme.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.5.0.alpha.structure.css" />
<script type="application/javascript" src="js/jquery-3.2.1.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.loader.prototype.options.text = "";
$.mobile.loader.prototype.options.textVisible = false;
});
</script>
<script type="application/javascript" src="js/jquery.mobile-1.5.0.alpha.js"></script>
...but later on You still will have the option to show the loader along with a message text as needed:
$.mobile.loading("show", {
text: "foo",
textVisible: true
});
Reference: http://api.jquerymobile.com/loader/

Related

Select 2 and Jquery

I'm trying to use the basic example of select2 but it does not work.
I included this on the head of my page:
<!-- select -->
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script>
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
I set class name of my select to class = 'js-example-basic-single'
but nothing happend in the console it showed me Uncaught ReferenceError: jQuery is not defined
at select2.min.js:2
Is the JQuery library included within the website?
If not, you can find latest libraries here: http://code.jquery.com/jquery/
I prefer to use jquery-3.2.1.min.js, as shown in this example:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

How to set up some JavaScript into WordPress (API)

I have this code, and I cant get it to work in my WordPress, I have used the addons Insert Headers & Footers and also WP Coder... but I am not sure why it will not work, the page is just blank.
How can I get this to work? What should I place where in the WordPress site - plugins etc.?
I have tried to place this in the "WP CODER" under "HTML code":
But it does not work, the page is blank.
1) Add the following code to the <head> section of your website:
<link rel="stylesheet" type="text/css"href=”https://zellr.com/integration/kirpparikalle.css” />
2) Add the following code to the section of your page. Place it inside the element where you wish to see the login and registration forms.
<h1 id="kirpparikalle_title"></h1>
<br/>
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" ```src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" ```src=”https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
});
</script>
It should show some booking module on the page.
Try to copy this exact code and paste it where you want it to appear, you have odd characters in the code you've applied on your website. Also the js code might produce an error to made a little change to the wrapper
<link rel="stylesheet" type="text/css" href="https://zellr.com/integration/kirpparikalle.css" />
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" src="https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
})( jQuery );
</script>
Are you using block editor (gutenberg) or the classic editor?
In classic editor. Paste your codes inside text editor
Same concept in gutenberg tho.

JQuery Autocomplete Function Not Found

I am trying to implement JQuery's autocomplete function into an input field on a website. The inspector is giving me an error that says:
Uncaught TypeError: $(...).autocomplete is not a function.
I believe the problem might have to do with the order of my script tags but so far everything I have tried has not worked. Here is my content:
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
var schools = new Array();
$(document).ready(function () {
$("#school").autocomplete ({
minLength: 2,
source: schools,
select: function (e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
});
</script>
On problem might be your jquery library, just for fun try changing it to
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
The order otherwise is right, example
That error usually means that jquery or jquery-ui hasn't yet been loaded. Check that your function call isn't getting hit before the document is loaded.
looks like you are using C#.
Just remove the ~ from the link and just the link from the root /scripts/jquery-1.10.2.min.js and Scripts/ it does not need to be uppercase. Usually in IIS, link URLs are not case sensitive.

Syntax error in JavaScript using Dreamweaver

I have a JavaScript code in Dreamweaver, but it tells me there's a syntax error on line 2. Where's the problem?
<link rel="stylesheet" type="text/css" href="scripts/rates/rates.css" />
<script src="scripts/rates/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("scripts/rates/ratesresult_alb.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('scripts/rates/ratesresult_alb.php?randval='+ Math.random());
}, 1800000);
});
</script>
<div id="responsecontainer">
</div>
the same script works on a site ak-invest.com and in the new website does not work http://69.73.130.182/~akinvest/index.php/en/kembimi-valutor
I am not seeing any syntax errors in the code presented. Are you sure that jquery is loading? Try adding a simple script to replace your current one:
alert($);
This should alert something if jquery is loaded.
You could also check in the html panel of firebug to make sure the libary is being loaded.
Another solution would be to load jquery from a known source such as the Google CDN so that you know you have it.
Example:
<link rel="stylesheet" type="text/css" href="scripts/rates/rates.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("scripts/rates/ratesresult_alb.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('scripts/rates/ratesresult_alb.php?randval='+ Math.random());
}, 1800000);
});
</script>
<div id="responsecontainer">
</div>
Change
<script src="scripts/rates/jquery-latest.js"></script>
to :
<script src="scripts/rates/jquery-latest.js" type="text/javascript" />
Older versions may not detect the jquery way of accessing variables and elements. You can ignore those errors and see if your script actually works. Did your script works well, despite of those errors?
Alternatively try changing adding type attribute as posted by Mateusz.
<script src="../scripts/rates/jquery-latest.js" type="text/javascript" />
or
<script src="./scripts/rates/jquery-latest.js" type="text/javascript" />
Your syntax error is almost certainly going to be in the included js file. And it looks like you didn't write it (it's a jquery library, right?) so the likelihood of there really being a syntax error in the file is rather low.
Therefore, what is actually happening is the file isn't at the path you're looking for it (it's a relative URI), and a HTML 404 page of some sort is being parsed as JavaScript instead of the JavaScript file itself.
Most probably.

Jasmine compatibility with jQuery Mobile

I'm just in the middle of implementing some Jasmine tests for a jQuery mobile application I'm working on, I've run into an error that I managed to track down to adding the jQuery mobile library, the error is as follows:
Jasmine.js:1769 TypeError: Cannot read property 'abort' of undefined.
As soon as I remove the jQM dependency, the error goes away.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5/Common/Tests</title>
<!-- LOAD STYLES FIRST -->
<link type="text/css" rel="stylesheet" href="libs/jasmine.css" media="screen">
<link type="text/css" rel="stylesheet" href="../../Common/libs/jquery.mobile-1.0.1.css" />
<!-- LOAD JASMINE LIBRARIES -->
<script type="text/javascript" src="libs/jasmine.js"></script>
<script type="text/javascript" src="libs/jasmine-html.js"></script>
<!-- LOAD DEPENDENCIES -->
<script type="text/javascript" src="../../Common/libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../Common/libs/jquery.mobile-1.0.1.min.js"></script>
<!-- LOAD CODE TO TEST -->
<script type="text/javascript" src="../../Common/libs/myLib.js"></script>
<!-- LOAD ACTUAL TESTS -->
<script type="text/javascript">
describe("Suite 1", function() {
it("Should be that 1 equals 0", function() {
expect(0).toEqual(1);
});
});
</script>
</head>
<body>
<script type="text/javascript">
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().execute();
</script>
</body>
</html>
I'd prefer to use Jasmine for this application instead of qUnit as I think its more flexible and easier to implement in CI and explain to the BA's and PM's.. however after tinkering with this problem for a couple of hours and some futile searches on google I still havent been able to solve it so I'm starting to consider moving on.
Before I do though, has anyone experienced this same problem and found a solution for it?
Thanks and Regards.
UPDATE 20 March:
Ticket is in github Jasmine project:
https://github.com/pivotal/jasmine/issues/204
I was able to have jasmine test of jquery mobile scripts using jasmine-jquery.
The trick is that you need to disable the jquery mobile enhancement on DOMready because it will try to enhance the html of jasmine runner.
You can do it with this script inserted in the head of the html runner file:
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
});
</script>
Then you need to trigger the enhancement of jquery mobile on the html inserted from your fixture (the jasmine-jquery functionnality):
describe('my test', function(){
beforeEach(function() {
loadFixtures("fixtures/MYFixture.html");
$("#jasmine-fixtures").attr("data-role","page").trigger("create");
}
it( ...
});
Try disabling both auto-initialization and hash-listening:
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.hashListeningEnabled = false;
});
</script>
Then add the jqm page to the jasmine-jquery fixture, and initialize the page:
beforeEach(function() {
jasmine.getFixtures().set('<div data-role="page"></div>');
$.mobile.initializePage();
});

Categories

Resources