I have a very simple scenario where I want to have a textbox where you can enter a number, and a button next to it which when pressed will call a javascript method and send it the integer value in the textbox as a parameter.
I am just learning MVC and have been very spoiled by WebForms so forgive me for the silly question, but why doesn't this work?
Enter Value 1-4<textarea id="param"></textarea>
<br />
<button id="btnTest" onclick="WCFJSONp(" + param.value + ")">Test Service</button>
I tried adding a # sign in front of 'param.value' hoping Razor might see what I'm trying to do, but that didn't work either? And can anyone recommend any links to 'crash courses' in Javascript/HTML for MVC newbs spoiled by WebForms?
As you state the question this has very little to do with MVC -- this is only javascript. Typically you would use jQuery with javascript when running the MVC platform, in which case something like this would work.
onclick="WCFJSONp($('#param').val());"
vs onclick="WCFJSONp(document.getElementById('param').value)"
When using getElementById you are not using the jQuery library but instead just base JavaScript.
There are advantages and disadvantages to using one over the other.
Using base JavaScript is faster, you don't have to load the jQuery library.
jQuery can make your scripts more portable (probably not an issue in this case), because it defines an exact interface to the DOM and takes care of any browser specific issues (this is the BIG one for me.)
jQuery is easier to use and understand. (some might argue if they are use to base javascript)
jQuery has lots of examples of advanced use (also not an issue here).
There are probably more but these are the ones that come right to mind.
This should be:
onclick="WCFJSONp(document.getElementById('param').value)"
Related
We are working on a legacy code that has a combination of angularJs, and javascript (jquery). We need i18n. Lots of the changes happening in general js files by setting the HTML on the fly. I am using pipe in the text so the angular take care of it. In some cases, it sets the value as it is instead of using the expression.
$("#exampleId").html("{{'exampleKey' | translate}}");
I am sure combining these technology is not good idea but we cannot rewrite the code for now.
Is there any way to fix this?
#bahar erf. It would make more sense to create a $scope.exampleId variable and use that in the #exampleId element. In the controller set $scope.exampleId and it will automagically update in the view. That's the point of the angularjs framework, it handles those DOM changes so you don't have to use JQuery for those types of changes in the view.
<input ng-model="exampleId" />
or if displayed
<span>{{exampleId}}</span>`
I am working on a custom plugin for esri web-app builder and I noticed two things in their dojo widget that I cannot really understand.
there is a cahce property that has a lot of function under it and also this kind fo property "url:widgets/PrintAndShare/templates/Print.html" which is legal by JS, but why using that instead of the standard dojo/text!.template, I see that the template itself is still loaded ( but ignored) - so the question is -how exactly that cached property works.
the main question is - these properties have html encoded in very specific way for example
<div class="gis_PrintDijit">
encoded like this
\x3cdiv class\x3d"gis_PrintDijit"\x3e\r\n
how do I achieve this kind of encoding ? with online tools or even better with some automation, for now I just use manual char replacing but it is really not efficient.
Thanks you all
I do not know if there is a better way.
A simple workaround can be to use encodeURIComponent and then a replace:
var t = "<div>test ok: 100%</div>";
console.log(encodeURIComponent(t).replace(/%/g,"\\x"));
I am familier with jQuery,Ajax and JSP Servlets but new to Struts2.I want to know a complete reference of Ajax integration in Struts 2, preferred with jQuery. In stackoverflow also has more quesitons and answers, but still there are few things remaining to know.I need to know few things.
(1) Is there a complete reference how to use Ajax in Struts2 applications. struts2-jquery-plugin (and their showcase also) has many sample codes and demos. But I couldn't find how to handle it in Java classes.Their all samples found in itself are on client side- JSP samples only, no demo shows how the action classes work. No idea what the application returns(XML/JSON or what the server side returns) Their site demos only core functionalities. I want know how to how to handle both side; [in Struts framework] and [how to customize more struts ajax tags in JSP]. If there is any link or advice,it ll be highly appreciated.
(2)
I read Struts 2 In Action book. It has sample codes and demo.Its chapter 8 explains how to work with Ajax( used Actionsupport, another one extending Result class ... ). In Internet,few sample codes found, and they had used in some different way( directly PrintWriter print() the result). But in JSP side, normal javascript had been used. So, according to your best practises (may be more ways), what is your most preferred way to use Ajax? (that means,you use as jquery plugin shows or not depends on Struts ajax tags and just use javascript/jQuery in JSP pages, and the best practices to handle struts classes Write Result class or just use PrintWriter to print the result? Here you may say, it depends on the situation and the taste of the develoer, but what would be according to the industry standards?)
IF someone downvote. please leave a comment, WHY?
You should be using this jquery plugin instead; it is the closest thing the S2 project has to an official jQuery plugin. The one you link to isn't the same.
The most common way to return data to JavaScript (jQuery or not) is to use the JSON plugin or the REST plugin. There are very few reasons to ever write responses manually.
I currently am working on a little app that requests user info from my server and displays them using a special template.
At first, I just hardcoded the little snippet in jQuery:
$("<li><div class='outer'><table><tr><td rowspan=2 class='imgcontainer'><img class='thumb'/></td><td><span class='username'/></td></tr><tr><td><span class='name'/></td></tr></table></div></li>")
I clone it several times.
It's ugly and I want it to have syntax highlighting and whatnot, so it would be better for me to have it in the HTML file itself.
Also, it will make merges easier so somebody can just change a line or two.
Is there a pattern for this? Am I OK putting it in the HTML file that I include this JS in (there's only one), and making it hidden using CSS.
The third option I thought of is just creating a separate HTML file and having jQuery request that from the server to keep it separate. Is this technique used much?
Also, is there any term I can use to describe what I'm doing? (It's harder to ask a question for a concept I don't know the name for)
I gave a similar answer on SO earlier today. What you are looking for is called micro-templates. John Resig posted this on his blog. Essentially you can get a json dataset and apply a template to the data to create html and update the DOM.
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.