I have a Android app built with JQuery Mobile 1.4.2 and PhoneGap 3.3
In about 1 in 3 loads, when I click a button it pops out of place and looks terrible. Is there some type of onDeviceReady function I should be using to avoid this issue? Thanks!Here is a screenshot:
My scripts in header in case this is helpful:
<link href="js/jquery.mobile-1.4.2.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/index.js"></script>
<link rel="apple-touch-icon" href="img/HomeScreenIcon.png" />
<link rel="apple-touch-startup-image" href="img/SplashSceen.jpg"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"type="text/javascript"></script>
<script src="js/jquerymobile10.3.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/categories.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:700' rel='stylesheet' type='text/css'>
<link href="css/overwrite.css" rel="stylesheet" type="text/css">
Related
I am getting this error even when all the jquery has been loaded before bootstrap and also have used the version 1.9.1
tried using jquery version 1.9.1 and it still dint solve
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" />
<script src="https://www.bootstrap-year-calendar.com/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/respond.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-year-calendar.min.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/bootstrap-popover.js" type="text/javascript"></script>
<script src="https://www.bootstrap-year-calendar.com/js/scripts.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/cal/bootstrap-year-calendar.min.css">
I have had this issue previously when I have referenced two different versions of jquery or Bootstrap, you have done both here. You have three versions of JQuery in this code:
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script src="https://www.bootstrap-year-calendar.com/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
You are also loading bootstrap and the bootstrap min js files which will interfere with each other.
Try simplifying your code and only use 1 version of each library/framework.
So one version of JQuery loaded before Bootstrap stuff. One version of bootstrap. So make sure you have your JQuery script src THEN your Bootstrap one.
If you try to add more than one version of bootstrap this error comes. Order of bootstrap and jquery also matters. Try including this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
try including this
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
I'm trying to use a ready template that uses revolution slider in my vue-cli app, how can i use the external script of this template?
I've tried to import the scripts that the template used in the tag in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Balad | Govt HTML Template</title>
<!-- CSS Files -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/color.css" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
<link href="css/owl.carousel.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/slick.css" rel="stylesheet">
<link rel="icon" href="images/fav.png" type="image/png">
<!--Rev Slider Start-->
<link rel="stylesheet" href="js/rev-slider/css/settings.css" type='text/css' media='all' />
<link rel="stylesheet" href="js/rev-slider/css/layers.css" type='text/css' media='all' />
<link rel="stylesheet" href="js/rev-slider/css/navigation.css" type='text/css' media='all' />
<!--Rev Slider End-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<noscript>
<strong>We're sorry but brikma-website doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/custom.js"></script>
<!--Rev Slider Start-->
<script type="text/javascript" src="js/rev-slider/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/rev-slider.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.carousel.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.video.min.js"></script>
</body>
</html>
and i past the body of the template in the vue js component that renderd by #app
the jquery work on the site, but there are other problems, the revolution slider Not displayed,
I also tried to use this packages with node modules but i have seen the work is hard with this way
and here is my project structure :
this folders in the public i put them there that index.html can reach them directly, this folders were in the template (all js and css ...)
I don't have any problems in console and with the build
I am trying to add bootstrap popover on my page.
I have following code
$("#s1").popover({ placement: 'top' }).popover("show");
I have added following files to my page
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap.css.map
<link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="vendor/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap-theme.css.map
<link href="vendor/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.js" type="text/javascript"></script>
It was working fine some time ago. But I am not sure maybe some files I added or removed but now it's not working. Any help will be appreciated. Thanks
You are loading jQuery twice and v1.4.1 is ancient and not supported by bootstrap.js. You need to use at least v 1.11.1
i use Yii 1.1.13 and Yii Booster 1.0.6
On one page i need to use TbButtonGroup with checkbox toggle and jQRangeSlider (http://ghusse.github.io/jQRangeSlider/)
To use slider, i need to include jQuery UI lib, BUT when i include it, the checkbox mode of buttonGroup does not works.
With some versions of UI it just does not work, with with the latest it writes in console on TbButtonGroup click:
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle'
The full list of sources is
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-yii.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/jquery-ui-bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/baec16ac/css/bootstrap-notify.css" />
<link rel="stylesheet" type="text/css" href="/jqslider/iThing-min.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/assets/b1075121/jquery.yiiactiveform.js"></script>
<script type="text/javascript" src="/assets/b1075121/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.bootbox.min.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.notify.js"></script>
<script type="text/javascript" src="/assets/baec16ac/js/bootstrap.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=places&language=en"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript" src="/jqslider/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/jqslider/jQAllRangeSliders-min.js"></script>
<script type="text/javascript" src="/js/search.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
If i delete the jquery ui, where is no slider, but all works fine. Help me please, where is the bug?
maybe you need to manually include your whatever scripts you need, using Yii::app()->clientScript
its safe becuz Yii wont load duplicate scipts
This should be a simple one but I cant get the syntax quite right.
I also cant find any examples of externally linked files, All search results I've found seem to solve their problems by storing a local copy of the file.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
This is a simple external script tag in my .erb file but rails is not picking up anything that isnt using
<%= javascript_include_tag 'whatever.js' %>
How do I externally link up a JS to my rails app.
I cannot store the Jquery.js locally due to technical requirements (I don't understand it either)
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' %>
Perhaps the problem wasnt me not referencing the file correctly. It seems to be generated in the html.erb file fine but in the firebug console, I'm getting Jquery not defined.
jQuery is not defined
[Break On This Error] remText=remText.replace(/\%n/g,charsRe...al:true,allowExceed:false};})(jQuery);
jquery...9702940 (line 17)
jQuery is not defined
[Break On This Error] })(jQuery);
protot...0469242 (line 5653)
The generated HTML links.
I have no idea why the standard src = tag wont find it.
<link href="/stylesheets/globalStyleSheet.css?1312383253" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.inputlimiter.1.0.css?1312464674" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/style.css?1312469715" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/effects.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/controls.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/rails.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/application.js?1310469242" type="text/javascript"></script>
<link href="/stylesheets/globalStyleSheet.css?1312383253" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/style.css?1312469715" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.inputlimiter.1.0.css?1312464674" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/globalStyleSheet.css?1312383253" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.inputlimiter.1.0.css?1312464674" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/style.css?1312469715" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery.inputlimiter.1.2.2.min.js?1299702940" type="text/javascript"></script>
<script src="/javascripts/globalviewFunctions.js?1312381897" type="text/javascript"></script>
<script src="/javascripts/editInPlace.js?1312468960" type="text/javascript"></script>
<script src="/javascripts/errorDisplay.js?1312381897" type="text/javascript"></script>
<script src="/javascripts/journeyViewFunctions.js?1312541017" type="text/javascript"></script>
<script src="/javascripts/pageviewFunctions.js?1312449379" type="text/javascript"></script>
<script src="/javascripts/shaneShowHide.js?1312387899" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="/javascripts/prototype.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/effects.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/controls.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/rails.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/application.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/prototype.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/effects.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/controls.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/rails.js?1310469242" type="text/javascript"></script>
<script src="/javascripts/Legacy.js?1312381897" type="text/javascript"></script>
<script src="/javascripts/editInPlace.js?1312468960" type="text/javascript"></script>
<script src="/javascripts/errorDisplay.js?1312381897" type="text/javascript"></script>
<script src="/javascripts/globalviewFunctions.js?1312381897" type="text/javascript"></script>
<script src="/javascripts/journeyViewFunctions.js?1312541017" type="text/javascript"></script>
<script src="/javascripts/jquery.inputlimiter.1.2.2.min.js?1299702940" type="text/javascript"></script>
<script src="/javascripts/jquery.min.js?1312544046" type="text/javascript"></script>
<script src="/javascripts/pageviewFunctions.js?1312449379" type="text/javascript"></script>
<script src="/javascripts/shaneShowHide.js?1312387899" type="text/javascript"></script>
<script src="/javascripts/application.js?1310469242" type="text/javascript"></script>
In one of my applications I also use the javascript_include_tag to include javascripts. Only difference is that I feed it an array (which gets dynamically filled). It works somethin like this:
def add_javascript(url)
#javascript_urls ||= []
#javascript_urls << url unless #javascript_urls.include?(url)
end
def create_javascript_urls()
javascript_include_tag(#javascript_urls) + "\n" unless #javascript_urls.blank?
end
To add the jQuery javascript I use:
add_javascript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js')
It all seems similar to me compared to your question examples, but maybe it helps you in finding the answer...