I've compiled this program with Purescript 0.12.5 but when I look at the index.html in Firefox 67.0.2 I get the following error in the web console:
Error: Target container is not a DOM element. app.js:5160:15
Here is the index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>PS3</title>
<script src="https://unpkg.com/react#16/umd/react.production.min.js"
crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-
dom.production.min.js" crossorigin></script>
<script src='app.js'></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Any help would be appreciated!
This is because you're loading the program before the <div id="app"> element, so the element doesn't yet exist at the time the program is running and trying to find it.
Try moving the <script> tag after the <div>:
<html>
<head>
...
</head>
<body>
<div id="app"></div>
<script src='app.js'></script>
</body>
</html>
I tried this :
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />
but the css won't apply. :(
Am i missing something obvious ?
EDIT :
Here is my jsp :
<%# page pageEncoding="utf-8"%>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Log-in</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />
</head>
<body>
<div class="login-card">
<h1>Log-in</h1><br>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login login-submit" value="login">
</form>
<div class="login-help">
Register • Forgot Password
</div>
</div>
</body>
</html>
Try this:- <jsp:include page="style.css"/>
Using the include directive should do the trick.
<link type="text/css" rel="stylesheet" href="css/style.css"/>
try this, will work. In java it ma
I am working on a project in yii, in which i am using jquery select2 extension, I have created a searchable dropdown list using select2 extension in localhost/business/package/create page, now when i want to create a package the drop down list just becomes drop down, not searchable, unless i remove this line from my layout <script src="<?php echo Yii::app()->request->baseUrl;?>/js/jquery.js"></script>. After that i can create the package,with my seachable drop down list, but my rest of the pages are not scrolling. If i open the view source of package/create these files are already added
<script type="text/javascript" src="/businessadvisor/assets/f81f8ab/jquery.js"></script>
<script type="text/javascript" src="/businessadvisor/assets/1075462/select2.js"></script>
so the crux is a because of a single file, my rest of the pages are not scrolling, nor clicking etc. so what is the solution to deal with this conflict.
You are including jQuery multiple times, so the second inclusion will overwrite all the already included plugins.
You can use the scriptMap option to specify the location of jQuery for the whole site.
'components'=>array(
...
'clientScript'=>array (
'scriptMap'=>array(
'jquery.js'=>'//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
),
...
),
...
),
Ok here is the answer. The problem was, when i commented out <script src="<?php echo Yii::app()->request->baseUrl;?>/js/jquery.js"></script> from my admin.php (my layout), drop down in package/createstart working, while the rest of the pages becomes stuck, not scrolling nor clicking. so one file was creating a whole problem, to solve this, you need to go into your custom.jsand replace $ with jQuery and save it. Now I had below files under my footer widget.
<!-- <script src="<?php echo Yii::app()->request->baseUrl;?>/js/jquery.js"></script>-->
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/bootstrap.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/slimmenu.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/bootstrap-datepicker.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/bootstrap-timepicker.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/nicescroll.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/dropit.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/ionrangeslider.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/icheck.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/fotorama.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/typeahead.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/card-payment.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/magnific.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/owl-carousel.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/fitvids.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/tweet.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/countdown.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/gridrotator.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/custom.js"></script>
I commented out <!-- <script src="<?php echo Yii::app()->request->baseUrl;?>/js/jquery.js"></script>-->jquery and in header of my layout having these files
<head>
<title>Business Advisor,Where you give ratings and reviews</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="Template, html, premium, themeforest" />
<meta name="description" content="Traveler - Premium template for travel companies">
<meta name="author" content="Tsoy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600' rel='stylesheet' type='text/css'>
<!-- /GOOGLE FONTS -->
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl;?>/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl;?>/css/font-awesome.css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl;?>/css/icomoon.css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl;?>/css/styles.css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl;?>/css/mystyles.css">
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/modernizr.js"></script>
</head>
so what i did, i copied this code
<?php
$cs = Yii::app()->getClientScript();
$cs->registerCoreScript('jquery');?> <!-- put these files in admin.php so that conflcit will resolve from select2 extension select2.php-->
from my select2.php and paste in my header like this.
<head>
<title>Business Advisor,Where you give ratings and reviews</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="Template, html, premium, themeforest" />
<meta name="description" content="Traveler - Premium template for travel companies">
<meta name="author" content="Tsoy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600' rel='stylesheet' type='text/css'>
<!-- /GOOGLE FONTS -->
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl;?>/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl;?>/css/font-awesome.css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl;?>/css/icomoon.css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl;?>/css/styles.css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl;?>/css/mystyles.css">
<script src="<?php echo Yii::app()->request->baseUrl;?>/js/modernizr.js"></script>
<?php
$cs = Yii::app()->getClientScript();
$cs->registerCoreScript('jquery');?> <!-- put these files in admin.php so that conflcit will resolve from select2 extension select2.php-->
</head>
Now the jquery has been registered. and now my every page, even package/create
is working, every thing is scrolling, no conflict at all. Cheers :)
I am trying to create a playlist in phonegap application for iPhone. I don't have any idea regarding this, I am totally new to this issue, I am not getting any thing, can any one help me out to solve this issue?
This may help you
Use PhoneGap Media API & jQuery Mobile UI Framework
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=screen.width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Audio Player</title>
<!-- NOTE: The following 4 lines are inserted by the project wizard -->
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.css" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.6.4.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="page-home">
<div data-role="header" data-nobackbtn="true" data-theme="e">
<h1>Audio Player</h1>
</div> <!-- /header -->
<div data-role="content" id="content-manual" data-theme="a">
<div data-role="button" id="playaudio" data-theme="e">Play</div>
<div data-role="button" id="pauseaudio" data-theme="e">Pause</div>
<div data-role="button" id="stopaudio" data-theme="e">Stop</div>
<div class="ui-grid-a">
<div class="ui-block-a"> Current: <span id="audio_position">0 sec</span></div>
<div class="ui-block-b">Total: <span id=media_dur>0</span> sec</div>
</div><!-- /grid-a -->
</div> <!-- /content-manual -->
</div> <!-- /page -->
</body>
</html>
Ok so I'm fairly new to dojo and I'm trying to make a really simple sample mobile app. I'm using eclipse to run the code which uses an android emulator to install/run the app. The problem I'm having is that I keep getting Uncaught Reference Errors for either "require is not defined" or "dojo is not defined", causing my app to appear as plain text instead of formatted like an android app using dojox.mobile widgets.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
minimum-scale=1,user-scalable=no"/>
<title>PhoneGap</title>
<!-- DOJO -->
<script src="/assets/www/lib/dojo/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad:true">
</script>
<link rel="stylesheet" href="/assets/www/lib/dojo/dojox/mobile/themes/android/android.css"
type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="/assets/www/cordova-1.6.0.js"></script>
<script>
require(["dojo"], function(dojo) {
dojo.require("dojox/mobile")
dojo.require("dojox/mobile/parser")
});
</script>
</head>
<!-- END DOJO -->
<body>
<!-- ACCIDENT TOOLKIT PAGE -->
<div data-dojo-type="dojox.mobile.View" id="accHelp" selected="true">
<h1 data-dojo-type="dojox.mobile.Heading">Accident</h1>
<div class="text">If you are in an accident, you should first move to a safe
location. Below are some additional actions you can take:</div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem"
onclick="window.location='geo:0,0?q=police';">Call the Police</li>
<li data-dojo-type="dojox.mobile.ListItem"
onclick="window.location='geo:0,0?q=towing';">Call for a Tow Truck</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Exchange Driver Info</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Record Accident Location</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Take Photos of Accident</li>
</ul>
</div>
<!-- EXCHANGE DRIVER INFO PAGE -->
<div data-dojo-type="dojox.mobile.View" id="accInfo">
<h1 data-dojo-type="dojox.mobile.Heading" back="Accident" moveTo="accHelp"
onClick="console.log('Going back');">Driver</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Other Driver Info</h2>
</div>
<script>
function itemClicked() {
console.log("itemClicked()");
}
</script>
</body>
</html>
Does anything appear wrong with the code itself? Especially where I'm using the script scr... to point to the dojo.js and where I'm using require to call the dojo.mobile functions. I was under the impression that as long as the src pointed to the right location in the package tree, it didn't much matter where I copied the file in.
I have tried using the Google CDN to call dojo.js, but the emulator throws errors when I do so, possibly because it doesn't utilize an internet connection?
Any help would be great!
Try removing /assets/www/ from your local URLs
Your require statement looks like this:
require(["dojo"], function(dojo) {
dojo.require("dojox/mobile")
dojo.require("dojox/mobile/parser")
});
And it should look something like this:
require([
"dojo/mobile",
"dojo/mobile/parser"
],
function(mobile, parser) {
// your code here;
});