I have this view in Play:
#(message: String)
#main("Welcome to Play") {
<script src='#routes.Assets.versioned("js/index.js")' type='text/javascript'></script>
<div id="hello"></div>
<script type='text/javascript' src='#routes.WebJarAssets.at(WebJarAssets.fullPath("react", "react.js"))'></script>
<script type='text/javascript' src='#routes.WebJarAssets.at(WebJarAssets.locate("jquery.js"))'></script>
<script type='text/javascript' src='#routes.Assets.versioned("js/Dummy.js")'></script>
}
Within it, I am trying to use the fileassets/js/Dummy.jsx which has this content:
React.render(<h1>Hello</h1>, document.getElementById('hello'));
For compiling JSX, I am placing this in plugins.sbt:
addSbtPlugin("com.github.ddispaltro" % "sbt-reactjs" % "0.5.2")
However, the React code has no effect and page remains as it was previously.
Why is this happening?
Related
I have some sjs code:
#JSExportTopLevel("CCRS")
object JsApi {
#JSExport
def makeJobId: JobId = JobId()
// ...
}
I have the following <body> element, which I'll note is properly finding the sjs-generated .js files since I was using a 3rd party SPA framework previously - though the launcher for that is now commented out:
<body>
<script type="application/javascript" src="ace/ace.js" charset="utf-8"></script>
<script type="application/javascript" src="target/web-client-jsdeps.js"></script>
<script type="application/javascript" src="target/web-client-opt.js"></script>
<!-- <script src="target/web-client-launcher.js"></script> -->
<input type="text"
placeholder="Enter a command:"
value="pwd"
onkeydown="oneShotHandler()" />
<div id="one-shot-demo"></div>
<script type="application/javascript">
var oneShotId = CCRS.makeJobId();
</script>
</body>
Upon page load, I get the following error: TypeError: CCRS.makeJobId is not a function.
Not really sure what I should be looking for in the generated web-client-opt.js file (using sjs 0.6.22 currently, with -P:scalajs:sjsDefinedByDefault). But, I do see this line, which I believe should be doing the export:
$e.CCRS = $m_Lorg_xsede_jobrunner_client_JsApi$();
I realized this just as I was finishing typing my question. The beauty of talking it out.
In Scala.js, I needed to add the () to my method:
#JSExport
def makeJobId(): JobId = JobId()
I'm working with XSLTForms and I need to add a Leaflet map. But something with that library doesn't work. I have the following code in a .xml file (as each xform I have) but when I zoom the map (by double click or click in the zoom button) it freezes.
The _zoomIn: function is still triggered when freezed but it doesn't make the expected visual changes.
This is the simple xforms example:
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no" lang="en"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<link type="text/css" rel="stylesheet" href="res/leaflet-0.8-dev/leaflet.css"/>
<link type="text/css" rel="stylesheet" href="res/style.css"/>
<script type="text/javascript" src="res/jquery-ui/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="res/leaflet-0.8-dev/leaflet.js"></script>
<script type="text/javascript">
function showOutdoorMap(id){
var map = L.map(id);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
id: 'examples.map-i875mjb7'
}).addTo(map);
map.locate({setView: true});
}
</script>
</head>
<body onload="showOutdoorMap('map')">
<fieldset>
<label class="header">Demo:</label>
<div id="map" style='width:100%; height:250px;'/>
</fieldset>
</body>
</html>
The solution was comment a line in the setView: function (center, zoom, options), allowing the _resetView method to refresh:
if (animated) {
clearTimeout(this._sizeTimer);
/*return this;*/
}
I also had to comment this line in order to drag and drop with no problems:
/*if (L.DomUtil.hasClass(this._element, 'leaflet-zoom-anim')) { return; }*/
Help!
I'm working on a meaty emberjs/yeoman project that uses multiple hbs templates that can all be routed to from one application.hbs's sidebar.
The problem is when I load the page, sometimes the Jquery to make that sidebar collapse will not work while other jquery in that same file does. Sometimes nothing works at all.
I'm calling my javascript/jquery from one file called magic.js
<body>
<!-- build:js scripts/components.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.js"></script>
<script src="bower_components/ember/ember.js"></script>
<script src="bower_components/ember-data-shim/ember-data.js"></script>
<!-- endbuild -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-c0QvqnFcYbP4r6t7sBiKPu9GPqRLRug&sensor=true">
</script>
<!-- build:js(.tmp) scripts/templates.js -->
<script src="scripts/compiled-templates.js"></script>
<!-- endbuild -->
<!-- build:js(.tmp) scripts/main.js -->
<script src="scripts/combined-scripts.js"></script>
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/affix.js"></script>
<script src="bower_components/bootstrap-sass/js/alert.js"></script>
<script src="bower_components/bootstrap-sass/js/dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/modal.js"></script>
<script src="bower_components/bootstrap-sass/js/transition.js"></script>
<script src="bower_components/bootstrap-sass/js/button.js"></script>
<script src="bower_components/bootstrap-sass/js/popover.js"></script>
<script src="bower_components/bootstrap-sass/js/carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/tab.js"></script>
<!-- endbuild -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script src="scripts/models/permit_model.js"></script>
<!-- // <script src="scripts/arcgislink_compiled.js" type="text/javascript"></script> -->
<script src="scripts/magic.js"></script> <!-- Controls UI based javascript. Buttons, pretty effects, animations, etc. -->
magic.js is the last thing called before the body closes.
This is the magic.js file
$( document ).ready(function() {
var close=true
$(".collapsibleHeader").click(function(){
$(this).siblings().slideToggle("fast");
});
// Sidebar START
$(".arrow").click(function() {
if($('.float-left-col').css('width')=='200px') {
$('.float-left-col').removeClass('open');
$('.float-left-col').addClass('closed');
$('.sidebar-button-text').addClass('vanish');
$('.arrow').removeClass('reverse-rotate');
$('.arrow').addClass('rotate');
$('.full-logo').addClass('vanish');
$('.logo-only-container').removeClass('vanish');
$('.content-container').css('margin-left','80px')
}
else {
$('.float-left-col').removeClass('closed');
$('.float-left-col').addClass('open');
$('.arrow').addClass('reverse-rotate');
$('.logo-only-container').addClass('vanish');
$('.full-logo').removeClass('vanish');
var delay = setTimeout(function(){
$('.sidebar-button-text').removeClass('vanish');},250)
$('.arrow').removeClass('rotate');
$('.content-container').css('margin-left','200px');
}
});
The sidebar that isn't working is in the application.hbs file so I'm not sure why it would stop loading.
<div class="super-col">
<div id="sidebar-wrapper" class="float-left-col open">
<ul class="nav nav-pills nav-stacked text-center">
//..stuff inside the sidebar..
Why is my javascript not loading properly? Should I be calling it in a different file/s?
You're probably trying to attach the jquery before the elements have been created. Document ready isn't necessarily the same time Ember's views are ready.
In your case you insert the sidebar in the application template, so in your application view you could add the jquery in the didInsertElement hook
App.ApplicationView = Em.View.extend({
doStuff: function(){
//do your jquery here, the element is in the page now
}.on('didInsertElement')
});
This pattern can be applied for other views as well throughout your app
App.FooView = Em.View.extend({
doStuff: function(){
// do some crazy stuff cause the foo template has been inserted!
}.on('didInsertElement')
});
I am working with Jquery simpleDialog. I am watching fidler and it is telling me that it is loading the js files successfully. I reference the files correctly in my view and I make correct calls. I am at my wits end and I can't quite figure out what to do. I have been looking at this code for the last couple of hours and I haven't been able to budge it.
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
<link href="<%=ResolveClientUrl("~/Content/simpleDialog/jquery.simpledialog.0.1.css")%>" rel="stylesheet" type="text/css" />
<script src="<%=ResolveClientUrl("~/Scripts/simpleDialog/jquery.simpledialog.0.1.js")%>" type="text/javascript"></script>
<script src="<%=ResolveClientUrl("~/Scripts/simpleDialog/jquery.form.js")%>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a.tempDlg1').simpleDialog({
opacity: 0.3,
duration: 200,
width: 950,
useTitleAttr: true,
closeLabel: '<img src="../../Content/simpleDialog/CloseButton2.gif" border="1"/>',
showCloseLabel: true
});
</script>
The simpleDialog window just won't open. Does UIDialog work better? I do have datePicker inside of this dialog. Could that be affecting it? I don't know, I have been working for 16 hours straight. I need some sleep.
You're missing a closing
});
for the $(document).ready(function() { block.
How can I do Tinymce toolbar draggable with jQuery?
Try this in your tinyMCE init method
tinyMCE.init({
// ...
handle_event_callback : function(e) {
if(e.type == 'click') {
$('.mceExternalToolbar').draggable();
}
return true;
}
});
Include the following jQuery UI files :
<script type="text/javascript" src="tiny_mce.js"></script>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui.draggable.js"></script>
Note that i've tried this only with one tinyMCE instance.
I don't know if there are some side effects of this workaround, but it's working for now.