I'm trying to learn more about javascript and I've been checking out some code from companies like olark which includes a messaging system on your site.
One thing that I noticed is that when you install their software on your server is that it's just a simple copy/paste of some javascript and then you have a styled window on whatever page it's installed. This has to mean that some HTML/CSS is returned, right?
My question is, how can you go about using javascript and having a form returned or referenced, such as knockout.js? For example, in the most simple sense, say I have the following HTML page. Can I use a <script> tag to call to my server which will return a form?
//page1.html
<body>
...some html here
<script> function call which will return a knockout.js form/table/whatever along with referencing the file containing the viewmodel</script>
</body>
From what I understand anything in a <script> tag is not affected by the same origin policy. Does this mean I can potentially use javascript to call for an external knockout.js form?
Using like this
script type="javascript/text" src="your javascript knockout.js path"
define your path of knockout.js in src in script tag and you can access the function from your knockout.js.
Related
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>
Here is what I did:
var a = $(document.getElementById("panelForm:tableId01"));
$("<p:outputLabel value='Testing'/>").appendTo(a);
It does not show the label but if I did this, for example, it works:
$("<font color='red'>Red</font>").appendTo(a);
You seem to have completely missed the point of JSF and the context of JavaScript.
JSF is basically a HTML code generator. To see it yourself, create a (simple and working) JSF page and open it in your favourite webbrowser. Rightclick and choose View Source. What do you see? Yes, it's one and all HTML code! If JSF has done its job right, you should not see any JSF tags, for the very simple reason that the webbrowser do not understand them. It understands only HTML.
JavaScript is a client side language which runs in webbrowser and not in webserver. As evidence, when you run webserver and webbrowser at physically different machines and you invoke JavaScript onclick="alert('peek-a-boo')", then you see it in webbrowser, not in webserver. JavaScript can see the HTML DOM tree (anything which is available via document object, such as document.getElementById("someId")). JavaScript can not see original server side source code who's responsible for generating that HTML, let alone execute it. For jQuery it is not different for the simple reason that it's a JavaScript based library.
You need to solve your concrete functional requirement differently. If you want to dynamically add JSF components, then you should be doing it via JSF itself, not via JavaScript. Here's an answer showing one of the many ways: How to dynamically add JSF components. If you however insist in using jQuery for this, then you should be specifying the JSF component's HTML output yourself, but you're basically still completely missing the point of JSF. Carefully read the below link then.
See also:
What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?
You can not use "$('<p:outputLabel value='Testing'/>')". Because it is PrimeFaces tag lib. It will generate html tag (Ex: '<label class="my-class ui-outputlabel ui-widget" id="j_idt19:j_idt22">Testing</label>') when page rendered. So you should use jquery for html tag. For example like below:
<p:outputLabel value='Testing' styleClass='my-class'/>"
var a = $(document.getElementById("panelForm:tableId01"));
$("label.my-class").appendTo(a);
We have some widgets developed using Dojo and Javascript. The dojo code invokes some application services using io script mechanism to overcome cross browser issues. Currently the action for the io script is hard coded as follows.
var host="myhost.com";
var url = "http://"+host+"/context/service";
Every time we need to create WAR, we have to change host details. Is there a way in JS we can configure this ie., some thing like reading it from properties.
I found this s:url struts tag. I assume we can use this tag inside javascript code in a JSP. Can i use it in plain JS out side of JSP?
Sure, if you have your container set up to process *.js files as JSP files.
IMO this is a bit brittle.
You can also do things like hide data in the DOM via hidden elements or <script> tags with reasonable type attributes (e.g., not "text/javascript", the default).
You can also put the data into JavaScript variables in the JSP and access them from external JS files.
I have a basic webpage set up and I would like to use jQuery to send a single variable (user-generated) to a javascript script (external -- well not really, still on the server, just not embedded in the webpage). This script will do a bunch of stuff with the variable and spit out a large array of results. I then need to update my page with the results.
I've done something similar using AJAX to POST stuff to a PHP script, but how can this be done with a JS script?
well ... including your script using the following (as opposed to embedding it) will keep your source neat and clean:
<script src="yourscript.js" type="text/javascript"></script>
The file could contain a function which you then call from outside (ie, the actual page source). As JavaScript is executed on the client-side (ie, the browser), downloading the file is unavoidable (unless you take extreme measures like an apache::mod_js, or rewrite the function in PHP). Best to keep things simple and use the above.
<script type="text/javascript" src="path/javascript_file.js"></script>
I think this is more what Kaustubh means. You do not have to put the actual code blocks into the page, just reference it this way.
When the page loads it will also load the javascript file (clean)
you can then call the functions seamlessly.
I have a question. I have a aspx control (for e.g textbox). I reference it using document.getElementById('<%=textbox.ClientID%>').value. When I have the code in the same aspx file it works. But as soon reference it from an external file (example MyJSFunctions.js), I cannnot. I get an error saying "the object does not exist or it is null"
I have included the name of the js file like
I did this because I like having all my js functions in a seperate file nad doing this also reduces the load overhead.
Why is this happening? Can I accomplish the same using jquery?
You will need to parametise your Javascript to accept the desired argument, then pass the inline ASP.NET script within the server-side page or control as the value of such. This will allow the engine to render the inline code appropriately.
It happens because the server renders your pages (not in the sense of a browser rendering HTML, but rather the ASP.NET engine making transformations to turn your .NETified web mark-up into standard web mark-up) prior to pushing them down to the client - this will only happen for "registered" types, and that doesn't (and shouldn't) include Javascript files (although you can technically register items to handle, unless you have a bespoke module to handle compilation of inline scripting among Javascript, then it would err anyway.)
jQuery essentially being something of a Javascript framework, you're in the same boat with that, so to speak.
As an example, consider the following...
Your script file:
function doSomethingJavascripty(withThisClientID) {
//do something with...
document.getElementById(withThisClientID).value;
}
Your ASPX page:
<script type="text/javascript" src="/path/to/script.js"><script>
<script type="text/javascript">
//call your function when appropriate...
doSomethingJavascripty('<%=textbox.ClientID%>');
</script>
One thing you could do is have the following Javascript code in your ASPX page:
var myTextbox = '<%=textbox.ClientID%>';
Then, in your external JS file (make sure this is after the above line), have:
document.getElementById(myTextbox).value
Another alternative is just hardcode in the ClientID into your code, but note you'll break it if you change the ID or parent container of that textbox control in the future.