I'm using Javascript inside of a SharePoint 2010 Content Editor Web Part to insert a Silverlight object. I need to do it this way instead of use a Silverlight Web Part because Silverlight Web Parts are not currently enabled. This is done entirely using Javascript.
The problem occurs when I go later to edit the Javascript inside of the CEWP - I can see the orginal Javascript requesting generation of Silverlight object and I can, this is the strange part, the CEWP has all of the generated HTML of the Silverlight object right there appended to the scrept.
So now, when I save, I save the script to generate the Silverlight object AND the HTML that was previously generated effectively duplicating the Silverlight object. If I edit again then I will now have three Silverlight objects and so on.
You can see this in action for yourself with the following sample code:
Add a new Content Editor Web Part to a page in SharePoint 2010
Edit the source HTML
Add the following code:
<script type="text/javascript">document.write("Hello<br/>");</script>
Save the web part and you're done. Now, just keep editing the CEWP. Every time you click "Edit Web Part", "Hello" will be appended to your script.
How can I use Javascript to insert DOM elements and not have the generated HTML appear in the CEWP?
It's not working because SharePoint 2010 doesn't want you copying and pasting scripts into the editor. Instead, you should be putting your scripts inside a txt file (yes, that's right a txt file) stored in SharePoint and then pointing the CEWP to use that file as the source.
First, create a file with all of your code (both Javascript and HTML - basically everything you would have normally pasted into the content editor.) Make sure to wrap your Javascript in the <script type="text/javascript"> tag and save the file with a .txt extension like "scripts.txt".
Next, add a CEWP to your page and select "Edit Web Part." In the content editor pane on the right, under "Content Link", add the URL to your txt file and click "Apply" and you're done.
Take a look at the following URL for a full description of this change in SharePoint 2010: http://sptwentyten.wordpress.com/2010/08/31/insert-javascript-into-a-content-editor-web-part-cewp/
Use jQuery - probably far safer than a document.write which can break javascript further down the page.
Or use the code in this link to put pure HTML in the CEWP instead of dabbling with JavaScript:
http://karinebosch.wordpress.com/silverlight-meets-sharepoint/walkthrough-2-hosting-silverlight-3-in-a-content-query-web-part/
Another option is to the HTML Form Web Part (in the Forms category). This can be used to connect to other web parts, but more simply it can used to edit JavaScript directly in the web part. It seems that the rules for Content Editor Web Parts do not apply to the HTML Form Web Parts so it allows more flexibility.
More information from Microsoft is here:
http://office.microsoft.com/en-us/sharepoint-server-help/use-the-html-form-web-part-to-filter-and-display-data-in-another-web-part-HA101791813.aspx#_Toc274731120
Related
I am currently automating a PDF form creation workflow filling fields and comboboxes using a combination of Python (PyPDF2) and Javascript. I am actually using Python to inserting JS code at the document level for creating comboboxes in forms automatically populated with fresh database data.
The problem I found is, when an user opens the PDF, fills the form then save its combobox choices everything seems ok, but when they reopen the same PDF, those choices are gone because the document scripts reset the comboboxes again because the code run by itself every time it opens.
I am wondering if deleting those document scripts by setting a document action when the document is saved would solve the problem but I couldn't find any Javascript function for this.
If using only Javascript is impossible, can be done using Python? I couldn't find anything as well.
I would consider PDF API method :
this.removeScript("myScript");
But the problem is PyPDF2 generate JS function random names like this:
PS: This solution (partial solution) cannot be applied because my JS code length change constantly (dynamic)
I am trying to display javascript code that is linked to the html page using a script tag as text on the same html page (and also syntax highlighted) as a tool for users to see the underlying javascript code.
Eventually I also want to display the html and css file contents as a learning tool so users can see all the components in a user-friendly manner on the same page (at the bottom in a tab control).
The other requirement is that the files are local and not stored on a web server. And last but not least I would like to keep this as simple as possible (no jQuery, no additional javascript if possible).
I have tried a couple of approaches without much success:
using HTML5 import and AJAX, encountered CORS and local file access
errors
embed HTML5 tag, encountered prompt to execute javascript, not good
iframe tag , encountered prompt to execute javascript, not good
I am looking for simple and working solutions, I have searched quite a bit, but it is difficult to find something where you want to "convert" javascript into plain text and display it on an HTML page.
Extracting the src attribute from the script element and loading the file content via a separate HTTP call is probably the most feasible solution.
An example for the lodash source code, using jQuery:
var src = $('#lodash').attr('src');
$.get(src, undefined, function(data) {
$('#content').text(data);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id='lodash' src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.js'></script>
<pre id='content'></pre>
I am developing a Google App Script project that will be used right from within a Google Sheet, with HTML files as dialogs. My project will be a mix of .gs files as well as HTML files for data entry, etc. I am trying to use the methodology explained here:
https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript
to create global JavaScript and CSS modules that I can include in my HTML files rather than cutting and pasting inline code all over the place. This will be mainly useful for the data-saving routines which capture form data, serialize it, then save it to Sheets via the methodology outlined here (and many other places): http://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/.
The problem I am having is with trying to call the "include" statement from my HTML files, namely, lines like:
<?!= include('JavaScript'); ?>
It doesn't work when I create a menu on the spreadsheet to display my HTML file as a dialog -- the text of the include line just shows up as literal output on the dialog, and code does not appear to be getting included (not in scope).
I know the Google example is primarily for pages delpoyed via a web app, but I'd like to use my HTML files as dialogs right inside the spreadsheet (e.g. from a menu or sidebar) -- that feels nice and tidy to me. But if I can't get includes to work, my code base is going to be a nightmare and it will be really, really hard to standardize CSS across the whole app. I don't want to be cutting and pasting all the time.
So, what is the secret behind this <?! tag, and why won't it work in my HTML files when they are called as dialogs? It is clear those lines are different from the get-go (maybe not in a bad way, but they don't work), as the Google Scripting console displays those lines oddly, as depicted in the screenshot below:
Please try adding:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
More information can be found in Adding Style Sheets.
Figured it out. I was not properly understanding the way the HTML was being served up as a dialog. I was using this behind a custom menu option:
var html = HtmlService.createHtmlOutputFromFile(htmlFileName);
when I should have been using the more dynamic:
var html = HtmlService.createTemplateFromFile(htmlFileName).evaluate();
The latter generates a user interface object where the server-side script is executed and everything is included properly when I display the object with showModalDialog() (or showSidebar()).
I just had a complete misunderstanding of how the user interface object was being created, so now all scripting works inside my HTML files.
recently, I am developing an iOS app that want to get the content from a dynamic webpage.
Here is what I want to do:
http://www.ratemycoopjob.com
For the website above, I want to get ratings for employers I searched. The question is this page is a dynamic page, some javascript code will be called once search. I cannot treat this page as a static html file and parse it.
To parse an HTML in iOS, you could try HtmlParser of Ben Reeves (https://github.com/zootreeves/Objective-C-HMTL-Parser)
But first, you have to collect data from that site, generally by using REST service: POST/GET with right parameters or having the APIs
Edit: sorry, I did not read carefully your question. In case of JS, you can create an UIWebView, load this site into that view, then use
NSString *returnvalue = [webView stringByEvaluatingJavaScriptFromString:#"your javascript code string here"];
to get new content after affected a javascript on this site. However, you have to know about java script function of that site.
Good lucks
and in JavaScript
document.getElementById('myId');
This is not working in JSF application. However, the same is working if I save the generated HTML in my system and open it .
Any Help ?
When writing JavaScript code for a component based MVC framework which generates HTML, like JSF, you should not focus on the source code of the component based MVC framework, but on its generated HTML output.
If you can't tell this beforehand based on the source code, then you need to just open up the page in your favourite webbrowser and then rightclick the page and choose View Source. You'll see that the generated Client ID's are prepended by the ID's of the UINamingContainer components (like h:form, h:dataTable and f:subView). If you don't specify an ID for each of them, you will get an autogenerated ID like j_id_xxxx. To ease the work, you need to specify an ID for them. E.g.
<h:form id="form">
Also see this blog article for more information and hints. This blog article may also be useful to learn more about the wall between Java/JSP/JSF and JavaScript.