I have a bookmarklet which creates a UI for the user to interact with. Currently, I have been using $('<element>').addClass().css({..});, but that becomes hard to maintain. Is there a better way to do this?
I have also tried doing something like
var html = "<div class='someclass'>";
html += "<more html/>";
html += "</div>"
Which is also incredibly hard to maintain. Is there a way I can write html within javascript, or a library like jade that i can use WITHIN a javascript bookmarklet?
Yes, there is a Domain Specific Language implementation in JavaScript to allow you to write more expressive HTML in JavaScript called Pithy.
Please remember that writing large amounts in Pithy is maybe not a good idea and you rather want to use a proper client side templating engine such as DustJS or many others.
Related
I am using a PHP foreach loop to create JS variables, containing an HTML entered from a WYSIWYG field.
foreach($Entries as $Entry){
//$$WYSIWYG_Field calls a database field of pure HTML entered via WYSIWYG field.//
$Field_Cured=addslashes($WYSIWYG_Field);
$WYSIWYG_Return=
<<<HTML
'<p><strong>Statement: </strong>$Field_Cured</p>'
HTML;
$Variables.=
<<<HTML
var N_$Entry = '<div class="content">' +
'<span><strong>Name: </strong>$Name</span><br>' + $WYSIWYG_Return +
'</div>';
HTML;
}
I am then using those created JS $Variables to set them as innerHTML when called in a JS function.
My question is robustness based, is it enough to use addslashes() or would there be some characters, if present in the HTML, will break the JS?
In other words:
How compatible is PHP's addslashes(); with the JS syntax?
As far as I know, web servers typically execute the server-side files before any client-side scripting would execute on web browsers. It depends on php.ini and other configuration settings whether there may be warning or errors generated from PHP script that may affect JavaScript on the front-end.
There is PHP DOM to help generate HTML from server-side for JavaScript. Going that route, you would have flexibility about managing data between back-end and front-end.
As a simple example, <element onload="function">, could trigger a JavaScript function on web browsers.
Your code is unclear about the purpose to use String-delimiter and storing JS variable in PHP.
The question is as following: when I write JavaScript inside my JSP page, using JSTL function, it renders normally, understanding everything I want from it. But to make my code clear, I want to move that JavaScript from tag in JSP to a separate file. But when I try to call same function from the file, it doesn't work, but just appends to my page as a simple text.
Here is code example to make this more understandable.
...other JSP stuff
<script>
$.each(data, function(index, item) {
$('#holder').append(
'<tr>' +
'<td>item.price + ' <fmt:message key="currency.default"/></td>'
'</tr>'
);
});
</script>
This works perfect for me. The actual message from the resource bundle is pulled and set instead of the fmt:message function.
But when I move the same code to a separate file, all this doesn't transform and stays plain text.
I understand, that JSP serves on the server, and all transformations with those functions is done much earlier than actual javascript is loaded.
But maybe somebody knows a certain hack to make this work?
Thanks in advance.
You can use DWR for that cause. An old framework but still holds good if that is what exactly you are looking for in your question.
http://directwebremoting.org/dwr/index.html
DWR is a Java library that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible.
Running java methods or jstl functions(also jstl functions are java methods) from JavaScript is impossible. Because java methods run on server-side but javascript on client-side.
If you want to run java methods in client-side anyway you must create java applet for this. You can run java methods with JavaScript inside your applet. For detailed information see this Java Applet Tutorial
I hope this will help you
Good day,
I am just at the "dawn" of web design and I haven't been able to find a good answer to
this question as of now.
"Let us say I would like to create a website that has 3 pages:
1) Index\Home
2) Contact
3) Personal Works
In the personal works section I would like a list to appear which is ok, I would just go
<ul><li></li></ul> etc etc
Now Let us pretend that in the <li></li> I want to put names of poems I have written as per my personal website portfolio. Each li would then send you to the requested poem.
All is good.
Now to the real question: I assume that creating 150+ html files for each single poem is a suicide, useless and dumb. That said, how do I actually do it?
I don't need you to do hard-coding for me. If you could just explain a little bit and maybe post a few tutorials\examples, Id be glad.
Love you.
That is where a server-side language is used. You use the server-side language to read some parameters and then provide the solution depending on the condition.
I would recommend you to use ASP.NET, or you can use PHP or some other server-side languages. But my preference is ASP.NET.
Solution:
You can try something like, one single page named: poem.cshtml (cshtml is a file, which accepts C# code alongwith HTML). Then inside the page you show the code depending on the URL. Lets say you're having a simple poem of Twinkle Twinkle Little Star. Then
http://www.example.com/poem/twinkle-twinkle-little-star
Now you can get the poem name using:
var poemName = UrlData[0];
Then use an if else block to do this:
if(poemName == "twinkle-twinkle-little-star") {
/* write that poem
* or by using else block, show other poems */
}
This is easy to understand and learn.
You can use Database to save the Poem and show it using ASP.NET. You need to learn alot.
Start Learning
http://basicsofwebdevelopment.wordpress.com (Beginner's Site)
http://developer.mozilla.org (To learn HTML, CSS)
http://www.asp.net (Official ASP.NET website)
What you need depends on how all that would be used. You may really need to use server-side language, or if content is generated on client side, respective array of li would be generated using javascript
For a newbie PHP would be the easiest server side language to learn, mixed with javascript, ASP.NET is also a nice language but a bit more of a learning curve although if you have any C# experience learning it would be easier.
Has anyone ever worked with a system of passing back say, some JSON data and using a javascript routine to generate the HTML to save on bandwidth?
What methods are there and are there any templating systems available?
Start with John Resig's JavaScript Micro-Templating.
Some like it, some hate it, but you can create templates of HTML in string form within your base application package (e.g., the js files included in the main page.)
var fooTemplate = "<div class='%div_class_parent%'>"+
"<div class='%div_class_child%'/>"+
"</div>";
then you just load that into an existing DOM node using the innerHTML method.
document.getElementById('someNode').innerHTML = parseFooTemplate();
where parseFooTemplate returns fooTemplate with the %% elements replaced with correct data that was returned from the JSON.
This is just one of many ways to go about it. The dojo toolkit has their own way where widgets can have a HTML template behind the scenes. There's too many ways to enumerate here.
To generate HTML basing on JSON you will need some template engine for javascript
I would reccomend Zparse template engine http://code.riiv.net/zparse/ it is really great - i using it a lot.
The best part - you can extend it easily by declaring your own tags.
I'm developing a facebook app right now all by my lonesome. I'm attempting to make a javascript call on an onclick event. In this onclick event, I'm populating some arguments (from the server side in php) based on that item that is being linked. I'm inserting a little bit of JSON and some other stuff with funky characters.
Facebook expects all the attribute fields of an anchor to be strictly alphanumeric. No quotes, exclamation marks, anything other than 0-9a-Z_. So it barfs on the arguments I want to pass to my javascript function (such as JSON) when the user clicks that link.
So I thought, why don't I use my templating system to just autogenerate the javascript? For each link I want to generate, I generate a unique javascript function (DoItX where X is a unique integer for this page). Then instead of trying to pass arguments to my javascript function via onclick, I will insert my arguments as local variables for DoX. On link "X" I just say onclick="DoX()".
So I did this and viola it works! (it also helps me avoid the quote escaping hell I was in earlier). But I feel icky.
My question is, am I nuts? Is there an easier way to do this? I understand the implications that somehow somebody was able to change my templated local variable, ie:
var local = {TEMPLATED FIELD};
into something with a semicolon, inserting arbitrary javascript to the client. (and I'm trying to write code to be paranoid of this).
When is it ok (is it ever ok) to generate javascript from the server? Anything I should look out for/best practices?
Depending on your application generating JavaScript in your templating language can save a lot of time but there are pitfalls to watch out for. The most serious one being that it gets really hard to test your JavaScript when you don't have your full templating stack available.
One other major pitfall is that it becomes tempting to try and 'abstract' JavaScript logic to some higher level classes. Usually this is a sign that you will be shaving yaks in your project. Keep JavaScript login in JavaScript.
Judging from the little bit of information you have given it your solution seems sensible.
If you must generate javascript, I would suggest only generating JSON and having all functions be static.
It more cleanly separates the data, and it also makes it easier to validate to prevent XSS and the like.
JS generated from server is used in lots of areas. The following is the sample from a ASP.NET page where the JS script is generated by the framework:
<script src="/WebResource.axd?d=9h5pvXGekfRWNS1g8hPVOQ2&t=633794516691875000" type="text/javascript"></script>
Try to have reusable script functions that don't require regeneration; and 'squeeze' out the really dynamic ones for server-side generation.
If you want to feel better about it, make sure that most of your JavaScript is in separate library files that don't get generated, and then, when you generate code, generate calls to those libraries rather than generating extensive amounts of JavaScript code.
it's fine to generate JS from the server. just bear in mind not to fine too big a page from the server.
Generally speaking I avoid ever automatically generating JavaScript from a server-side language, though I do however; create JavaScript variables that are initialized from server-side variables that my JavaScript will use. This makes testing and debugging much simpler.
In your case I may create local variables like the following which is easy to test:
<script type='text/javascript' language='javascript'>
<!--
var FUNC_ARG_X = <%= keyX %>;
var FUNC_ARG_Y = <%= keyY %>;
var FUNC_ARG_Z = <%= keyZ %>;
//-->
</script>
<script type='text/javascript' language='javascript'>
<!--
function DoCleanCall(arg) {
// Whatever logic here.
}
//-->
</script>
now in your markup use:
<a href='#' onclick='DoCleanCall(FUNC_ARG_X);'>Test</a>
Now of course you could have embedded the server-side variable on the <a/> tag, however it is sometimes required that you refer to these values from other parts of your JavaScript.
Notice also how the generated content is in it's own <script> tag, this is deliberate as it prevents parsers from failing and telling you that you have invalid code for every reference you use it in (as does ASP.NET), it will still fail on that section only however.