I use inplacericheditor plugin and tiny_mce
Before asset_packager usage, this is how I include the files and they work well
<script src="/javascripts/patch_inplaceeditor_1-8-2.js" type="text/javascript">
</script>
<script src="/javascripts/patch_inplaceeditor_editonblank_1-8-2.js" type="text/javascript" </script>
<script src="/javascripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="/javascripts/tiny_mce_init.js" type="text/javascript"></script>
<script src="/javascripts/inplacericheditor.js" type="text/javascript"></script>
My asset_packager.yml section looks like this for the above files:
tinyeditor:
patch_inplaceeditor_1-8-2
patch_inplaceeditor_editonblank_1-8-2
tiny_mce/tiny_mce
tiny_mce_init
tiny_mce/langs/en
tiny_mce/themes/advanced/editor_template
tiny_mce/themes/advanced/langs/en
tiny_mce/plugins/save/editor_plugin
tiny_mce/plugins/autoresize/editor_plugin
tiny_mce/plugins/paste/editor_plugin
tiny_mce/plugins/preview/editor_plugin
tiny_mce/plugins/table/editor_plugin
tiny_mce/plugins/contextmenu/editor_plugin
tiny_mce/plugins/emotions/editor_plugin
inplacericheditor
When I include the asset_packaged file and load the page (in production)
I get the following errors:
"Ajax.InPlaceEditor is undefined"
"Ajax.InPlaceRichEditor is not a constructor"
Can anyone shed some light on where I am going wrong or share a better way to asset_package tinymce?
Thanks!
Ajax required prototype.js
try Following just after tiny_mce_init.js
<%= javascript_include_tag :defaults %>
<script src="/javascripts/inplacericheditor.js" type="text/javascript"></script>
Related
I'm just trying to run this code I got from Vtk.js documentation examples:
<!DOCTYPE html>
<html>
<head>
<title>vtk</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/#babel/polyfill#7.0.0/dist/polyfill.js"></script>
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script type="text/javascript">
import 'vtk.js/Sources/favicon';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkSTLReader from 'vtk.js/Sources/IO/Geometry/STLReader';
</script>
</body>
</html>
But I got a blank page and the console shows me the error:
SyntaxError: Unexpected string literal 'vtk.js/Sources/favicon.'
import call expects exactly one argument. I think my error comes from the my first import.
Thanks in advance
You can run vtk.js on a html page like this:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="https://unpkg.com/#babel/polyfill#7.0.0/dist/polyfill.js"></script>
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script type="text/javascript">
var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
var actor = vtk.Rendering.Core.vtkActor.newInstance();
var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
var stlReader = vtk.IO.Geometry.vtkSTLReader.newInstance();
</script>
</body>
</html>
I have an angular 2 app that I built using the angular cli generator: https://github.com/EdmundMai/angular-2-playing
This is the generator: https://github.com/angular/angular-cli
I ran ng serve and now I have a page I can see when I visit http://localhost:4002
My dist/index.html file in the angular 2 app looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularTwo</title>
<base href="/">
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://carbon.ec2.crowdtap.com/component_importer.js"></script>
</head>
<body>
<angular-two-app>Loading...</angular-two-app>
<script src="vendor/es6-shim/es6-shim.js"></script><script src="vendor/reflect-metadata/Reflect.js"></script><script src="vendor/systemjs/dist/system.src.js"></script><script src="vendor/zone.js/dist/zone.js"></script>
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
<script>
window.carbon.importComponents({ components: ['ct-button', 'ct-button/ct-button-link', 'ct-dialog', 'ct-progress'] });
</script>
</html>
In my rails view, I am trying to include these JS files:
<script src="http://localhost:4200/vendor/es6-shim/es6-shim.js"></script>
<script src="http://localhost:4200/vendor/reflect-metadata/Reflect.js"></script>
<script src="http://localhost:4200/vendor/systemjs/dist/system.src.js"></script>
<script src="http://localhost:4200/vendor/zone.js/dist/zone.js"></script>
<script src="http://localhost:4200/system-config.js"></script>
<script src="http://localhost:4200/main.js"></script>
However, it's not working and complaining that main.ts:1Uncaught ReferenceError: require is not defined
Is there a proper way of doing this?
You need to change the <base href="/"> tag (line 6) in the generated
dist/index.html
to <script>document.write('<base href="' + document.location + '" />');</script>
in my data_feed controller and bar action, there's only one line in bar.html.erb:
[1,2,3,4]
My expected output by requesting http://localhost:3000/data_feed/bar is just one line I wrote above.
However, rails help me add some html heads into that page, as below:
<!DOCTYPE html>
<html>
<head>
<title>Guustock</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/charts.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/data_feed.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/show.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/charts.js?body=1" type="text/javascript"></script>
<script src="/assets/data_feed.js?body=1" type="text/javascript"></script>
<script src="/assets/show.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="lhHWCW82xtqQ8fmgBZemDggL2DGJe+4chXM8MY1LKvs=" name="csrf-token" />
</head>
<body>
[1,2,3,4]
How can I avoid rails doing this?
Thanks!
Env:
linux mint 11.0
ruby 1.9.3 with rvm
rails 3.2.1
EDIT:
Actually I want to provide the json format data in this page as an ajax data source. So these heads will not helpful but break the data.
You're probably rendering within the layout (a view template, which lives in app/views/layouts/), which is the default. If you want to render an action without the layout, use something like
render :bar, :layout => false
in the appropriate action.
See also: http://guides.rubyonrails.org/layouts_and_rendering.html
EDIT:
Please see the documentation linked above. For JSON rendering, you might use this directly from the controller:
render :json => #product
or in your case
render :json => [1,2,3,4]
You could also use JSON view templates (for which you'll need to render again). Using a bar.html.erb template for json is not only tricky as you noticed, it will also produce the wrong content type headers.
I originally needed to set the ajax beforeSend to include the csrf meta tags for all ajax post requests (the session was getting reset, big pain, etc). This got post requests working fine. However this seems like something that should have been taken care of in the latest version of jquery-rails. I feel like I missed something when I upgraded...and yes, I am including the csrf meta tag in my layout.
Now my issue is link_to :remote. My links are generating the correct html:
<%=link_to( "important", "/questions/importance?qid=#{q.id}&imp=up",
:method=>"post",:remote=>true)%>
generates:
<a rel="nofollow" data-remote="true" data-method="post"
href="/questions/importance?qid=30&imp=up">important</a>
However, when clicked the request is a GET request and is not an xhr request / doesn't use my js handlers. This did work fine before upgrading to 3.1.3 from 3.0.7
Request that is generated:
Started GET "/questions/importance?qid=30&imp=up" for 127.0.0.1 at 2012-01-30 11:41:36 -0500
Creating scope :page. Overwriting existing method Question.page.
Processing by QuestionsController#importance as HTML
Parameters: {"qid"=>"30", "imp"=>"up"}
Here's the relavent parts of my layout:
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tag %>
<%= yield :javascript %>
<script type="text/javascript">
$(document).ajaxSend(function(e, xhr, options) {
var token = $("meta[name='csrf-token']").attr("content");
xhr.setRequestHeader("X-CSRF-Token", token);
});
</script>
Any insight into this? Did I miss something when upgrading?
application.js:
//= require jquery
//= require jquery-ui
//= require jquery.purr
//= require best_in_place
//= require fancybox
//= require_tree .
javascript files that are being included (via page source):
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.purr.js?body=1" type="text/javascript"></script>
<script src="/assets/best_in_place.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fancybox.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox.js?body=1" type="text/javascript"></script>
<script src="/assets/autocomplete-rails.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fancybox-1.3.4.pack.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.validate.min.js?body=1" type="text/javascript"></script>
<script src="/assets/validators.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="26P9UWaXFsZBE6jfjkQv00GgS+7+XmOOPxlh55liz4Q=" name="csrf-token" />
You need jquery_ujs for the data-method attributes rails creates to actually be used. Assuming you have the jquery_ujs gem in your app, adding
//= require jquery_ujs
To application.js (after jquery is loaded) should fix things
I have the following markup in an MVC 3 Razor view. As is, the ComboBox renders properly, but doesn't drop down when I click the dropdown arrow. If I remove the jQuery validate script references that are added to the view by the create view template, all works. What could be wrong here?
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
function provinceChanged() {
var cityCombo = $('#Cities').data('tComboBox');
cityCombo.loader.showBusy();
$.get(url, { provinceId: e.value }, function (data) {
cityCombo.dataBind(data);
cityCombo.loader.hideBusy();
cityCombo.enable();
});
}
</script>
...
<div class="editor-field">
#(Html.Telerik().ComboBox()
.Name("Provinces")
.SelectedIndex(1)
.BindTo(new SelectList(Model.ProvinceList, "ProvinceId", "Name"))
.ClientEvents(events => events.OnChange("provinceChanged"))
)
</div>
Here is how reference jQuery, in my master layout:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Styles/Blueprint/screen.css") rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css"))
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
RESOLVED: I have no idea what else changed, but after putting the jQuery Validate references back just for a code sample, my code now works with them as well.
Check this. You are probably using an older version of jquery.validate.js which conflicts with jQuery.fn.delegate.