I am looking for some info on JSP imports. I currently have a main.jsp. A jsp is loaded into a div using jQuery upon user selection of of an item. then inside of that div, a modal dialog is opened upon another selection, and a jsp is loaded into that. All the data is coming back ok, but the CSS formatting is off. Each of the JSPs has a head and body and can run separately. They look fine alone, but start getting different CSS attributes when together. Should I be able to strip off the head and body of the second and third loaded JSP, incude all the necessary js and css files in the main and have it work fine? Do I need to have the head and body tags? I am using a jQuery .load() call.
You do not need to include head and body tags in the content that is being loaded via the jquery load call.
When you do model popups, jquery moves your div markup to the end of the document. So if you had some css that was pretty specific, such as
#content #model { ... }
It wouldn't work because jquery will move the markup to the bottom of your page.
You don't need to have body or head tags for loaded pages.
Unfortunately if you want reliable cross-browser formatting for loaded pages it's better to go with inline styles for them. Not sure if IE9 will have this fixed, but I beleive earlier versions ignore style for loaded pages whether it's specified in the main page or loaded page itself.
Related
I'm fairly new to Django CMS so please forgive me if my terminology isn't right.
I have a page with a placeholder within which I have added some html using the Text plugin. Within that, I would like to be able to add one or many pre-templated pieces of html.
I have looked into building my own plugin but the documentation that I've been reading here only allows the plugin to be added from outside the actual text plugin page and renders the result beneath my text plugin content. I've found the section on Nested Plugins, but I'm trying to nest my plugin within the built-in Text plugin which that doesn't seem to cover.
What I'm looking for is to be able to build something so that it places block-level html elements within the content like the Link or Image plugins (in my case, it would be some block-level html content).
How can I do this, or where can I find some more information on how this can be done?
I have a single page within Sitecore, containing a HTML table. I've added some CSS and JavaScript to the page, through the Sitecore HTML editor to allow DataTables.NET to format the table.
This work well, except that when a regular user goes to update the table using the rich text editor, my CSS and JavaScript is removed.
I can add the CSS to a generic CSS files, but the JavaScript contains initialization logic, so needs to be on the page itself.
What's the easy way to add references to CSS and JavaScript files?
There is a setting in web.config that is true by default.
<setting name="HtmlEditor.RemoveScripts" value="true"/>
Setting this to false will prevent the Rich Text Editor from stripping out the script blocks. But be aware that it will affect every single Rich Text field in your site, and it was put in there as a safety precaution. You can take a look at this blog post for more info.
There are other code solutions, like adding a Multiline text field for your scripts which would not strip anything out but would require modifying the layout files but if you are comfortable editing the CSS file then I suggest you just do the same with your javascript file, add a unique ID/selector to your table (in the RTE) and then just initialize there. e.g.
$(document).ready(function() {
$('#myCustomDatatable').dataTable( {
"paging": false,
"ordering": false,
"info": false
} );
} );
As long as the selector targets the table uniquely and the js files are loaded on your page this will run and format your table.
If you have access to the file system, you can just add the js or css references to the appropriate layout file. Although I gather from your comments you weren't involved on the development of the site. I Expect that the people who did develop it purposely didn't provide a simpler way for you to do it for good reasons. So I would recommend contacting them.
I have a page that includes a CFDiv tag that displays content from another file.
<cfajaximport tags="cfwindow,cfform,cflayout-tab,cfdiv">
<cfoutput><cfdiv class="vehicle-log" bind="url:trip_tab.cfm?ticketid=#ticketnum#" ID="theDiv" bindOnLoad = "true"/></cfoutput>
The external file has jquery tabs and jquery datepicker. None of the jquery seems to work in the CFDiv. If I call the external page by itself, everything works fine.
The reason I'm using a CFDiv here (I know most people hate cf layout stuff) is because the external page has a form element that I can submit and add to data to the db without refreshing the whole parent page. This is the only way I know how to do this.
Anyways, does anyone know how to get my jquery elements to work in a CFDiv?
Thanks.
Brian
You've got more than one problem here. First, you are using <CFDiv>, which under the covers is using portions of a very old version of ExtJS. So you are likely going to run into some headaches with mixing ExtJS and jQuery (and jQuery plugins).
Second, since <CFDiv bind="..."> uses AJAX to load the external HTML window content, you would need to change your JavaScript strategy. <CFDiv> will not pull in and execute the JavaScript code (including jQuery) from the external page (trip_tab.cfm), unless you only use CF UI widgets inside that external page (then the <cfajaximport> tag handles that for you). It only loads the HTML DOM content. You will have to move any <script> and <link rel="stylesheet"> tags and custom JavaScript/jQuery code and CSS into the parent page (the page that has the <CFDiv> tag in it). Then you'll have to find a way to listen for the AJAX event (completion of loading the external page) and call the custom JavaScript/jQuery code.
As others suggested in the comments above, using <CFDiv> is only making things harder for you. If you switched to using one JavaScript library for your UI components (like jQuery/jQueryUI/jQuery plugins), and put all of the necessary code into your main page, what you desire can be accomplished fairly easily.
I found a simple work around... CFdiv creates what feels like a seperate browser window, but its not actually one. So it can't pull Javascript files in via:
<script type="text/javascript" src="/js/scripts/jquery-1.11.1.min.js"></script>
The above is telling the browser "go fetch this file" - but since your CFdiv is not really a browser (Its a controversial permutation of CFajax as described here) it doesn't do it.
Technically, the above makes the browser include it into the page, just as if you cfincluded it , or just pasted the Javascript in there.
So convert the above to:
<script type="text/javascript"><cfinclude template="/js/scripts/jquery-1.11.1.min.js"></script>
And included javascript will work! (provided there aren't any conflicts with cfajax et al)
I had a similar problem in that my jquery was not working, and doing this fixed it.
this is probably a newbie Qs... i am using Sitecore 7 for my web application, and this is what i have so far
Data Template - this has only one field called "Title" to display page specific title
One Layout - this is pointing to my cshtml file under asp.net mvc project path. This has complete markup starting from Doctype. The title tag under head tag uses Sitecore's Html extension to render the field "Title" from template mentioned in #1. This also renders sitecore's View via placeholder called "page-body" under body tag of layout.
I have created a View Rendering pointing to Razor view in my asp.net mvc project. This view simply has h1 calling out hello world.
The Sitecore/Content/Home item (from sitecore's master tree) uses the template created in #1 and uses the layout created in #2. This item has one and only one Rendering created in #3
Now when i hit the root from my local sitecore website, everything looks good! I see Hello World in H1 tag under body tag with complete html makrup mentioned in layout...
This is where things starts getting complicated... Now i want my View Rendering (created in #3) to refer a CSS file which is specific to this Rendering only. This CSS will not be referred to all the pages. Of course I want to add the reference into the head as link href. So tried using asp.net mvs "Section" but i keep getting that sweet error "file cannot be requested directly because it calls the rendersection method..." So i realized that my view rendering doesn't have any #{Layout = "..."} and ofcourse which is controlled by sitecore engine!!
So i still went ahead and added Layout reference in my view Rendering's cshtml file and refer to the same layout file that Sitecore Engine would (i.e. #2 above). I still have same error.
Then i found a post Using sections in Editor/Display templates which is essentially for Scripts and tried implementing for CSS. But this didn't work either because View Rendering executes after the Helper in head tag gets executed so my CSS reference never go spit out in stream. BTW for Scripts this solution works perfect because scripts rendering helper is called after the Sitecore's view rendering.
At this point i am totally stuck for "How can i get my CSS ref for View Rendering in head tag". Any sitecore experts to help here?
So it's definitely a more advanced customization, but we do this using Cassette and a customization to the renderLayout pipeline. Use of this pipeline solves your issue of the helper in the head tag being called before your view renderings.
Extend the view rendering template (/sitecore/templates/System/Layout/Renderings/View rendering) and add a field that stores the name of a Cassette bundle you want to include on the page.
In your RenderLayoutProcessor, loop through all the page renderings (Sitecore.Context.Page.Renderings), inspect the rendering item for the bundle field (rendering.RenderingItem.InnerItem[YOUR_FIELD]), and call Cassette's Bundles.Reference.
In the header of your main layout, call Cassette's Bundles.RenderStylesheets().
You can also accomplish this without Cassette, but it makes the bundling, referencing, and inclusion of scripts and stylesheets much easier.
The other advantage to this approach is that it does not break Sitecore caching. Any approach which requires code to execute in your View rendering will render Sitecore HTML caching useless, because when the rendering is cached, your code will not execute and the page styling will be broken.
Hey everyone, I would appreciate a pointing in the right direction with the problem I'm having. In short, I'm working on an application that will create PDFs using TinyMCE and ColdFusion 8. I have the ability to create a PDF by just entering in text, pictures, etc. However, I want to be able to import an html template and insert it into the TinyMCE .
Basically, I have a file directory code snippet that lets me browse through my 'HTMLTemplates' folder, and am able to select an HTML document. Now, I want to be able to take all the code from that selected HTML document and insert it into my TinyMCE box. Any tips on how I might do this, maybe?
Thanks!
If I understood you correctly, you already have a TinyMCE plugin which pops up a window and allows you to browse the certain directory using existing cfm page which you render within the popup window. Right?
If not, you should start with this. Not sure how easy it is done in current version, but in the older TinyMCE I've created the custom upload plugin (needed to track the site security permissions for current user) pretty quickly.
Next, I can see two quick ways to pass the server file contents to the client-side:
Make it available via HTTP so you can make the GET request and read contents into the variable.
Output it on the page using CF (say, on form submit when file selected) and grab using JavaScript.
I'd personally tried the second option. After you grab the text into the variable you can put it into the TinyMCE using it's API.
It can be as simple as output escaped text into the hidden div with known ID and read it using DOM operations (assuming that there is cfoutput around):
<div id="myTemplate">#HTMLEditFormat(myFileContents)#</div>
Also you can output the text directly into the JavaScript variable (of cource, with accurate escaping), maybe like this.
<script type="text/javascript">
var text = '#HTMLEditFormat(myFileContents)#';
</script>
Most advanced and possibly better for performance (and definitely "cooler") way is to use the concept of script tags as data containers, like this:
<script type="text/plain">
#HTMLEditFormat(myFileContents)#
</script>
Last time I've seen this in Nadel's blog, I think. Read it, pretty interesting.
Hope this helps.