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.
Related
I'm trying to find a nice looking bootstrap slideshow that looks similar to this one: https://www.jssor.com/demos/simple-fade-slideshow.slider
I would use the one in the link but it's got way to much Javascript and doesn't respond properly when I change the size of my window. Any ideas how I could create this using Bootstrap, HTML and CSS only? So it still needs to be automatic as well.
Thank you
It’s the carousel you’re after, without knowing which version of bootstrap you’re on I cannot provide an example but you can find full examples for what you need in the bootstrap docs: https://getbootstrap.com/docs/4.1/components/carousel/
My situation is a little bit different, I'm using CKEditor for both editing and displaying things, and the submitted string will only be shown inside CKEditor, nowhere else.
I tried this XSS:
<IMG """><SCRIPT>alert("XSS")</SCRIPT>">
I added this to the database directly from backend, not by CKEditor since I know it doesn't matter what CKEditor does before going into the database as the attacker could always send some raw http request without dealing with CKEditor.
To my surprise CKEditor shows me this:
{cke_protected_1}">
So CKEditor is doing something to prevent XSS, and I realized that the XSS security could be achieved from client side.
My question is, how good is CKEditor doing and if it's reliable if I only use no-attribute tags plus
<a><img><table><span><pre>
(<a> and <table> could be disabled if it makes things easier)
PS: The CKEditor is using default settings.
You should protect against XSS on the server side. If you have this possibility, just strip any unsafe data before saving it.
Note that wysiwyg editors must protect somehow JavaScript code included in edited HTML, in order to not destroy edited contents, which includes e.g. hiding in Wysiwyg mode <script> tags or changing onclick event handlers into "data-" attributes.
{cke_protected_1} is a result of an attempt to hide the <script> tag by CKEditor, that did not work entirely properly because of a bit "hackish" HTML taken from XSS Cheat Sheet.
The partial built-in protection in wysiwyg editors should not be considered as a replacement for a server side protection against XSS.
How can I go about actioning a FancyBox popup that notifies new users of a quick sign-up button (or whatever is chosen) like on Digg.com ... and as with Digg just one time. I really have no experience with cookies but already have FancyBox running in other parts of the website, so the basis is already there. I require the popup to appear on page load. Any pointers very happily received!
My eventual solution uses the Reveal Modal plugin (click here) to trigger inline to 'fire' on page load using the modified following code for the popup to be displayed only once every three days. Remember also to load jquery.cookie.js and then add the following code:
<script type="text/javascript">
jQuery(document).ready(function(){
if (jQuery.cookie('test_status') != '1') {
jQuery('#myModal').reveal()
jQuery('#myModal').trigger('click');
jQuery.cookie('test_status', '1', { expires: 3}); }
});
</script>
Using something other than FancyBox was the answer to the original question as it seemed there was a conflict somewhere, so using Reveal made the two functions completely separate. I should also note that the .css contents from the Reveal download were added to our site's stylesheet.
Hopefully that will help someone else out.
You can find a code example here https://stackoverflow.com/a/8305703/1055987 including the link to the jQuery Cookie plugin.
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.
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.