How to display a HTML file from my system in iframe using rails?
I will explain my issue...
I have a view file that has an iframe which calls an action through <iframe src="controller/action?param=somevalue"></iframe> and the action renders a HTML file based on the params.
The HTML file called has reference to stylesheets and javascripts in the format <script type="text/javascript" src="../common/About.js"></script>
When viewed in browser the HTML file displays correctly with the styles and javascript but when viewed in the application the styling and scripts are not working from the external file. On viewing the source code for the external files i get "Unknown action" error.
What is that i am doing wrong in this?
(reacting to yr last comment): you need to specify css and js files in the iframed html page separately. html in an iframe is rendered completely independent from the surrounding page.
This is not a rails-related question imho.
I found the mistake I made. Its because of routes being not defined properly. When I give relative urls in the html file, the rails views assumes the full path to be some thing like src="controller/common/About.js". As there is no action defined by the name common I was getting the Unknown action error. I have redefined my routes and its working fine now.
Related
I'm using CKEditor for the first time and trying to do something that I thought would be very simple to do but so far I've had no success.
Essentially I want to place the editor.js, config.js and styles.js in a scripts folder but want the "Skins" folder that contains the css and images to appear within a separate "Styles" folder.
The application consists of a simple view that displays the editor on load.
The code to display the editor is a follows:
angular.element(document).ready(function () {
CKEDITOR.config.contentsCss = '/Styles/CKEditor/';
CKEDITOR.replace('editor');
});
The HTML within my view is as follows:
#section scripts
{
<script src="~/Scripts/ckeditor.js" type="text/javascript"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Main.js" type="text/javascript"></script>
}
<h2>Index</h2>
<textarea id="editor" name="editor"></textarea>
This is an MVC application and the scripts are rendered at the end of the body within the layout view.
The editor will not display in any browser. As I understand it setting the contentsCss property should do the trick.
If I place the skins beneath my script folder it works fine. I can see in the generated source that it is adding a link to the header pointing to /Scripts/Skins/moono..., but I want it to add a reference to /Styles/Skins/moono...
Is what I am trying to do feasable and if so what am I missing here? I was expecting this to be simple.
As a work around I could just add some routing rules that redirects the relevant request to a different location, but I'd rather get to the bottom of the issue before I do this.
Further information:
My application is an ASP.net 4.5/MVC 4 app.
I'm referencing angular because I'll be using that once I've sorted this issue. I have tried removing all references to angular but the problem still persists.
I've tried setting the contentsCss property in the following ways:
Directly using CKEDITOR.config.contentsCss
Within the config.js file. The sample assigns an anonymous function to CKEDITOR.editorConfig and in there you can manipulate congif entries.
Passing a config parameter when calling the "replace" method on the CKEditor object.
I've tried manipulating the contentsCss property both before and after the call to replace.
I'm using the latest version of CKEditor (4.2)
Thanks to #Richard Deeming, I've found the answer.
I'm using the default moono style, so I needed to set the CKEDITOR.config.skin property as follows:
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/'
My final code now looks like this:
angular.element(document).ready(function () {
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/';
CKEDITOR.replace('editor');
});
You have to set the url to the actual folder containing the skin itself (I thought CKEditor might append skins/mooono itself but it doesn't).
I also found that you must include the final '/' from the URL.
Looking at the documentation, you need to specify the path as part of the skin name:
CKEDITOR.skinName = 'CKeditor,/Styles/CKeditor/';
According to the answer provided by REMESQ on this question: Is it possible to use razor layouts with Orchard CMS and bypass the theming
I was able to have separate layout and pages for a module bypassing Orchard's themes and layouts. But having problem referencing the cs,js script files (located in different folders of the module). Getting 404 NotFound error.
I tried referancing in the following way:
#Script.Include("~/Scripts/jquery-1.9.1.js")
But cant get the correct reference path rendered attached picture
Your URL is wrong - it should be either:
jquery-1.9.1.js. Without leading tilde and Scripts/. Orchard will make sure the final URL will lead to /Scripts folder in your current module, or
~/Modules/Your.Module/Scripts/jquery-1.9.1.js
it works if written in this way:
<link href="~/Modules/ModuleName/Styles/site.css" rel="stylesheet" type="text/css" />
For the image tags in html we can write like this:
<img alt="" src="~/Modules/ModuleName/Styles/images/for-rent.jpg" />
I added a div to my haml file:
%section.splunk
.splunk_results Loading splunk data...
that will later be populated by an ajax call. However, it isn't showing up in my html file, even when I restart rails and navigate to that page. My research showed that it should auto-compile when I load the page -- why isn't this so?
EDIT:
The haml file is located at myAppName/client/order_details.haml. The HTML that it should be presumably compiling to is in myAppName/public/templates/order_details.html.
HAML files get interpreted as HTML files using the asset pipeline, which requires that your file be in app/assets.
Additionally, the controller action specifies the file that will be rendered. Take a look at your Rails logs to see what file the action is actually rendering.
I have a javascript application that runs in a view (index.cshtml).
Problem:
The problem is all relative paths are relative to the current url, which would be ok in a simple html webapp but not in asp mvc. The js-app shouldn't have to bother whether it's served in a normal html file or via a asp mvc page.
I.e. http://www.domain.com/<controller>/<action>/ contains a script test.js. This script loads an external xml file searching relative to it ie. "data/data.xml". The resulting url reads http://www.domain.com/<controller>/<action>/data/data.xml. This isn't found.
Question:
Is there a way to route static files (images,..., maybe even js files) to the content folder like "~/Content/controller/action/<pathToFile>/"?
Any help appreciated!
Lg
warappa
PS: I know about Url.Content() but that doesn't fit here.
The solution doesn't require mapping - just a simple html tag in the header:
<base href="#(Request.Url.GetComponents(UriComponents.SchemeAndServer, UriFormat.Unescaped) +
Url.Content("~/content/controller/action/"))" />
Lg
warappa
EDIT
Some browsers need an absolute url - sample updated.
In you can use absolute URL addresses to access you static resources:
$('img').attr('src', '/Content/Pictures/picture1.png');
or
<script src="/Scripts/script.js"></script>
This way you will allways get the same resources relative to the page base address, no matter if you load the script in a /{Controller}/{Action}/{View}, {Area}/{Controller}/{Action}/{View}, a custom route or even in a static script html page.
Or perhaps what you're looking for is the use of css files, since CSS's url('<path>') resolves the addresses relative to the CSS file's location. You would just need to import the one CSS file that had all the resource (image?) file paths. Then the scripts could reference the distinct class names, thus not being location aware at all. This is what libraries like jQuery UI do. But again this would require a fixed folder structure relative to the CSS document.
I have one MVC view page in which I show different links and I am using ThickBox to show a different page when ever one of these links is clicked. In these pages, I am using jQuery functions to do some changes, but I am not able to resolve the jquery file path on the view pages. I need to give absolute path something like "http://test.com/js/jquery.js". But is there any way to make it relative?
I also tried getting the host url and using <%=%> and <%# %> but none is working.
Any help?
Thanks
Ashwani
This is when you run the MVC app from visual studio? If so set you're MVC application's virtual path to start at "/" instead of the default that is probably your project name.
This can be done by right-clicking on the MVC project in the solution explorer > Click Properties > Click the Web tab > Type "/" (without the quotes) in the Virtual path textbox. Then use Andrew Florko's suggestion of leading it with a slash <script src="/js/jquery.js"> </script>
alt text http://img707.imageshack.us/img707/3765/virtualpath.jpg
What about trying something like:
<script src="<%=Url.Content("~/js/jquery.js")%>" type="text/javascript"></script>
Maybe you should try
<script src="/js/jquery.js" ...
instead of intellisence-generated path with ".."
<script src="../../js/jquery.js" ...