insert external html - javascript

I am just learning to create websites and I have been programmming a lot of OOB languages before so I am kind of used to write small objects and just paste them where I want them.
I would like to know if there is a way to create for instace a login form och what ever piece of html that you use regulare on sites and save that to a file, html or xml and then with the help of javascript add this form onto your main site.
I will try to make an example to clearify what I want to do, it's the javascript that I do not know how to write...
form.html
< form id="form_login" >
Username: <input type="text" id="username"/><br>
Password: <input type="password" id="password"/><br>
<input type="button" id="button_login" value="log in" onclick="login(this)"/>
</form>
index.html
<html>
<head>
</head>
<body>
<div>
<script type="text/javascript" src="javascript.js"></script>
</div>
</body>
</html>
javascript.js
// this is where I am rendered clueless, I want my javascript to render out my form
$(#"div").html(form.html)
I am thinking that I should do a serverrequest to retrieve the form.html but I don't know how.

Personally, I believe that JavaScript is not very well suited for the job - people that turn off JavaScript (and Google too!) won't see important parts of your page (in Google's case, that can lead to less visitors!). Inclusions as you mention them should happen at the server. See Wikipedia's article on Server Side Includes for a possible solution.

Use load method instead:
$('#div').load('form.html', function() {
alert('Load was performed.');
});
It is better to include your files through server-side languages as well using server side includes.

You may want to consider using jQuery templates. They're in beta but have proven to be very useful to keep HTML code, well, HTML.
http://api.jquery.com/category/plugins/templates/

Related

How to get result from a JavaScript file in Java

I downloaded a JavaScript file from the following link
I stored this code into 'goldprice.js'
Then I somehow minimized the whole HTML code from here
to the following simplified code.
<html>
<head></head>
<body>
<h1>
Gold Price:
<xyz id="gpotickerLeft_price"></xyz>
</h1>
<script src="goldprice.js"></script>
<script type="text/javascript">
var leftticker
var ticker = new GPOTicker();
ticker.addTicker(leftticker, 'gpotickerLeft');
ticker.start();
</script>
</body>
</html>
Now my question is how to get this whole thing working in Java program? I want the output of the above HTML code in my Java program so that I may be able to use that automatically updated value in jlabel.
I have seen some examples on
javax.script.ScriptEngine and javax.script.ScriptEngineManager but I don't really think my problem is that simple.
If you take a closer loook to the javascript code, you'll find, that the javascript fetches the actual data from a webservice. Look for the code that starts with
{api2:"http://api2.goldprice.org/Service.svc/GetRaw/",resourcesRootPath:"/goldprice/img/"
That seems to be their webservice, which you could try to access directly from Java. Note, however, that you ought to ask for the permission to use that service. If it is an service that is meant to be officially used by others, there should exist a documentation and all to explain how to use it. That would be the best way to go.

Using one PHP master page with JQuery controls

I currently have a small project which uses PHP pages on Apache, hosted on a Raspberry Pi. However, I feel that using AJAX to send JSON to different PHP pages, then having those pages do something in response is just messy.
I have so many files, remembering all my variable names, functions, and file names just causes a headache.
Why is this the preferred way to code PHP?
I would rather just create one PHP page which has multiple classes/functions. Then use JQuery to Load() static HTML 'forms'. So a web interaction would look like this...
<?php
//some server-side functions
?>
<html>
<head>
<script>
//some Jquery to load your seperate html forms
</script>
</head>
<body>
<div id="html forms get loaded into here">
</div>
</body>
</html>
I am very new to PHP and very partial to ASP/.NET. Obviously this is terrible if you want to create large sites accessed by lots of people... but for a small project, is this still a bad idea?

uploading files using jQuery and ajax gives error [duplicate]

I would like to know if it is possible to upload a binary file via ajax and php, and have a link to download it. I would like to avoid refreshing the entire page, as with a standard html form. So far I have been using forms to get information, such as radio and text boxes, and using javascript to override the default behavior. Is a similar thing possible for uploading a file?
It isn't possible to submit a file through Javascript.
Your options are:
The hidden iframe trick, popularized by Google. Implementing this yourself can result in some klunky stuff so there are libraries out there, such as jQuery, which have plugins, such as jQuery's popular Form Plugin, that automate this so you don't have to feel dirty inside when using it.
Using Flash to faciliate the process. Most notably SWFUpload is very popular. All things being equal, I'd probably go with the Javascript solution over this, but I've used this in the past with success. The cool thing about this solution is that it comes with a nicer interface such as loading indicators and thumbnails and such. At this point, though, you're asking for a user to have Flash + Javascript available, which may not work in some situations.
Using Silverlight instead of Flash, although I wouldn't really consider this as a viable solution, as it has a much lower penetration rate than the other two solutions.
While you can't upload a file via AJAX, you can put a file control in a popup and then update the page that spawned the popup when it closes.
I'm not too clear on how to update the page that spawned the popup, but I've seen it done in the ANGEL Learning Management Suite.
Have an IFrame (display:none) on your form and set your form's target to be that iframe.
My form looks like this:
<iframe id="upload_target" name="upload_target" src="" style="width:0px;height:0px;border:0px solid #fff;"></iframe>
<form enctype="multipart/form-data" name="frmXMLUpload" target="upload_target" action="scripts/uploadXML.php" method="POST" onSubmit="return checkExtension(fXMLFile.value, 'xml')">
<!--only allow up to 30k of data to be uploaded-->
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
<input name="fXMLFile" id="fXMLFile" type="file" accept="text/xml" size="50" />
<p><input type="submit" value="Upload" /></p>
</form>
And deal with response in yuor IFRAME. basically this is not AJAX at all, but who would like JavaScript to have access to files on your local computer? It's fine the way it is.
It is not generally possible to do this in AJAX / Javascript alone.
Take a look at:
http://www.codeplex.com/SLFileUpload/
for a way to do it inside a silverlight application.
or:
http://www.element-it.com/Examples/MultiPowUpload/SimpleUpload.html
in flash.
As John Gietzen said, you can't do this directly through AJAX (ie send the actual data through AJAX). What you could do though, ispost your form to an invisible iframe, then use AJAX to ask the server for the URL. That would retain the basic user experience - not refreshing the page.
Have you considered jquery? There are nice plugins to do this gracefully.
Like this one for example: http://www.phpletter.com/Our-Projects/AjaxFileUpload/
Take a look at this example, I the plugin a little better than the one at phpLetter, though the phpLetter might have better examples for the PHP side of things.
http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Examples
You might also want to have a look at SwfUploader , which does file uploads using Flash, showing a progress bar, and without needing for the page to be refresh. Demonstrations can be seen here.

JS file not triggering if I include another JSP file inside JSP file

I have a main jsp file, inside of that JSP file, I have invoke a JS file and included another JSP file called login.jsp.
Before adding the include for login.jsp the functions of my JS file can be called. After adding the login.jsp it is no longer working.
I tested invoking the JS file inside the login.jsp, it is working that way. The thing is, I cannot do that because many JSP pages will include login.jsp and I don't need to call each and every JS file that uses the login.jsp.
Here is the code:
this is my main jsp file:
<html>
<head>
.. some scriplets with no error ...
<SCRIPT type="text/javascript" src="<%=request.getContextPath()%>/js/pcLotsFrontProcessMaterialRegistration.js" ></SCRIPT>
.. other js files that is included this way ..
</head>
<body>
<div id="login_holder" align="center">
<jsp:include flush="true" page="../admin/login.jsp"></jsp:include>
</div>
... some codes ....
</body></html>
and my login.jsp is this :
<div id="login-box">
<table id="login-box-table">
... table contents ...
</table>
</div>
<script>
... functions ...
</script>
Is there something wrong with this format?
Please don't mind the scriplets and all I intend to modify them some other time, I just need to make this work first.
Thank you very much. :D
It's really hard to tell what's going on since you chose to omit the javascript, however it seems highly likely that something in the javascript in login.jsp is conflicting with the javascript in the 'main' jsp.
I suggest using a javascript console and debugger (like the Developer Tools in Chrome or FireFox) to find the problem.
By the way, this not a very good way to structure things, and is particularly prone to this type of problem.
First of all, you shouldn't have your javascript in your jsp pages - it should be in external .js files, and it should be name-spaced to avoid conflicts (I suggest reading Doug Crockford's 'Javascript - The Good Parts').
Second, there are much better ways to compose pages - for instance, take a look at the Apache Tiles project.
How about using JSP Scriptlets #include
like
<%#include file="../admin/login.jsp" %>
if your page is static page.

reference external JavaScript template

I am using jsrender as the JavasScript template engine. The usage is quite straightforward:
In HTML Page, define a script tag with template-ed HTML content:
<script id="myTemplate" type="text/x-jsrender">
<div>{{:name}} ({{:year}})</div>
</script>
...
<body>
<div id="content"></div>
</body>
In JavaScript, define a variable, and call render function against the template:
var model = {
name: "Findekano",
year: 2012
};
$('#content').html($('#myTemplate').render(model));
The question is:
I do not want to keep the template definition in the host HTML page, I'd like to keep it in a separate file along with the JavaScript file so it can be more modular.
I'd like to have something to work as below:
<script id="myTemplate"
type="text/x-jsrender"
src="template/myTemplate.html">
</script>
where myTemplate.html defines the necessary HTML template snippet. I tried the code above but it doesn't work. Could anyone suggest an alternative way to solve the problem?
If you do not want to have to use an AJAX call and using a more memory doesn't concern you, there is at least one alternative solution I can think of. AJAX might be cleaner, but I thought I'd put this out there anyways.
document.write('<script id="myTemplate" type="text/x-jsrender"><div>{{:name}} ({{:year}})</div></script>');
If you put that into an external file and link it via
<script type="text/javascript"
src="template/myTemplate.js">
</script>
Then the script will append a valid script tag copy of the string to the DOM that jsrender can actually access. Of course, this does end up using roughly double the memory on the client but... if it's not too big of a file it shouldn't be a problem.
Browsers won't download scripts in languages they do not (internally) support (based on the type attribute).
Get the URI from the src attribute, then request the resource with XHR.

Categories