I'm adding Internationalization to a tapestry app.
Is there a standard tapestry-3 technique to Internationalize strings that appear as Javascript literals?
For example:
<input jwcid="submitBtn" type="submit" accesskey="U" value="Update" class="actionBtn" onclick="return confirm('Are you sure that you want to do that?');"/></td>
Can I simply replace the question with a tapestry tag in this and any other context? Say something like:
<input jwcid="submitBtn" type="submit" accesskey="U" value="Update" class="actionBtn" onclick="return confirm('<span key="AreYouSure">Are you sure that you want to do that?</span>');"/></td>
This means that the source file contains an element inside an attribute which would be fine inside a JSP. Does tapestry-3 handle this? If not, is there a way to do this in tapestry-3?
This works fine in T3 as well - another option is to initialize your i18n js strings at the top of the page:
<script>
var jsStrings = {
sure : '<span key="AreYouSure"/>',
...
};
</script>
and then just use them:
<input jwcid="submitBtn" onclick="return confirm(jsStrings.sure);"/>
Related
This works :
<input
id="chk-products"
name="chk-products"
type="checkbox"
x-on:click="showProducts = document.getElementById('chk-products').checked">
But this doesn't :
<input
id="chk-products"
name="chk-products"
type="checkbox"
x-on:click="showProducts = this.checked">
I was wondering why this isn't available in alpinejs's directives ?
With Alpine.js you don't have to inspect/mutate the DOM manually. It uses the data model: first you define some data, then you bind it to some input elements and let Alpine.js handle the DOM mutations, etc.
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
<div x-data="{showProducts: false}">
<input type="checkbox" x-model="showProducts" /> Show products
<div x-show="showProducts">Products are shown.</div>
<div x-show="!showProducts">Products are hidden.</div>
</div>
The this keyword is available inside a component created with Alpine.data() global function.
The x-on:click directive in Alpine.js is designed to execute a JavaScript expression when an element is clicked. In this case, the expression is trying to access the checked state of the checkbox element, which can be done more directly by using the this keyword to access the element that the directive is applied to. Unfortunately, Alpine.js does not support the use of the this keyword in its directives.
I want to exclude an html-element from getting transformed to a kendo ui widget.
Is this possible? Maybe via css class or so?
Example:
https://jsfiddle.net/8L4zg92x/
<input type="file" class="first"> // => KendoUpload
<input type="file" class="second"> // => plain Html-File-Upload
--
i'm not able to change the jquery selector.
$(document).ready(function() {
$("input[type=file]").kendoUpload();
);
I realise this is a different approach which might not be practical in your situation, but using declarative initialization, instead of imperative (jQuery) initialization would give you what you want:
<body>
<div id="outer">
<input type="file" class="first" data-role="upload">
<input type="file" class="second">
</div>
<script>
kendo.init($("#outer"));
</script>
</body>
See Initializing with MVVM for more information on using this approach.
Example: https://dojo.telerik.com/eLOWaluL
just in case someone has the same problem, but can edit the selector. Here is an easy way to don't select the second input-field:
$(function() {
$("input[type=file]:not('.second')").kendoUpload();
});
I am trying to implement something like this.
http://app.maqetta.org/mixloginstatic/LoginWindow.html
I want the login page to load but if you click the signup button then an ajax will replace the login form with the signup form.
I have got this to work using this code
dojo.xhrGet({
// The URL of the request
url: "'.$url.'",
// The success callback with result from server
load: function(newContent) {
dojo.byId("'.$contentNode.'").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});'
the only problem is the new form just loads up as a normal form, not a dojo form. I have tried to return some script with the phaser but it doesnt do anything.
<div id="loginBox"><div class="instructionBox">Please enter your details below and click <a><strong>signup</strong>
</a> to have an activation email sent to you.</div>
<form enctype="application/x-www-form-urlencoded" class="site-form login-form" action="/user/signup" method="post"><div>
<dt id="emailaddress-label"><label for="emailaddress" class="required">Email address</label></dt>
<dd>
<input 0="Errors" id="emailaddress" name="emailaddress" value="" type="text"></dd>
<dt id="password-label"><label for="password" class="required">Password</label></dt>
<dd>
<input 0="Errors" id="password" name="password" value="" type="password"></dd>
<dt id="captcha-input-label"><label for="captcha-input" class="required">Captcha Code</label></dt>
<dd id="captcha-element">
<img width="200" height="50" alt="" src="/captcha/d7849e6f0b95cad032db35e1a853c8f6.png">
<input type="hidden" name="captcha[id]" value="d7849e6f0b95cad032db35e1a853c8f6" id="captcha-id">
<input type="text" name="captcha[input]" id="captcha-input" value="">
<p class="description">Enter the characters shown into the field.</p></dd>
<dt id="submitButton-label"> </dt><dd id="submitButton-element">
<input id="submitButton" name="submitButton" value="Signup" type="submit"></dd>
<dt id="cancelButton-label"> </dt><dd id="cancelButton-element">
<button name="cancelButton" id="cancelButton" type="button">Cancel</button></dd>
</div></form>
<script type="text/javascript">
$(document).ready(function() {
var widget = dijit.byId("signup");
if (widget) {
widget.destroyRecursive(true);
}
dojo.parser.instantiate([dojo.byId("loginBox")]);
dojo.parser.parse(dojo.byId("loginBox"));
});
</script></div>
any advice on how i can get this to load as a dojo form. by the way i am using Zend_Dojo_Form, if i run the code directly then everything works find but through ajax it doesnt work. thanks.
update
I have discovered that if I load the form in my action and run the __toString() on it it works when i load the form from ajax. It must do preparation in __toString()
Firstly; You need to run the dojo parser on html, for it to accept the data-dojo-type (fka dojoType) attributes, like so:
dojo.parser.parse( dojo.byId("'.$contentNode.'") )
This will of course only instantiate dijits where the dojo type is set to something, for instance (for html5 1.7+ syntax) <form data-dojo-type="dijit.form.Form" action="index.php"> ... <button type="submit" data-dojo-type="dijit.form.Button">Send</button> ... </form>.
So you need to change the ajax contents which is set to innerHTML, so that the parser reckognizes the form of the type dijit.form.Form. That said, I urge people into using a complete set of dijit.form.* Elements as input fields.
In regards to:
$(document).ready(function() {});
This function will never get called. The document, youre adding innerHTML to, was ready perhaps a long time a go.
About Zend in this issue:
Youre most likely rendering the above output form from a Zend_ Dojo type form. If the renderer is set as programmatic, you will see above html a script containing a registry for ID=>dojoType mappings. The behavior when inserting <script> as an innerHTML attribute value, the script is not run under most circumstances (!).
You should try something similar to this pseudo for your form controller:
if request is ajax dojoHelper set layout declarative
else dojoHelper set layout programmatic
HTML
<form method="GET">
<input type="text" name="txt"/>
<input type="button" onclick="get()"/>
</form>
returns
Javascript
returns
function get(){
var ik=$('#txt').value();
$.get('action.php',{text:ik});
}
PHP
<?php $text=$_GET['txt']; print $text?>
When I look at firebug I get a notice saying that index txt is
undefined, I tried everything but it's not working. What am I doing
wrong?
$('#txt') will search for an element with id=txt and you don't have any element with id "txt" on your HTML code.
To get a value of the field you should use the .val() method.
The code that should work for you is:
$('input[name="txt"]').val();
Or define an id to your field and your code should be like this:
$('#txt').val();
In your PHP code your are looking for a variable called "txt" and in your Javascript code you are defining "text" as your variable so... you should read the $_GET['text'];
[]'s
Igor.
Where is your #txt element?
Try
<form method="GET">
<input type="text" id="txt" name="txt"/>
<input type="button" onclick="get()"/>
</form>
You are passing {text:ik}, so in your action.php you should get the value you want from $_GET['text'] not $_GET['txt']
Ok, so there are three problems going on.
First, you probably want id=txt in the HTML. You currently have name=txt. The #txt is going to retrieve the ID attribute in the HTML (not the Name attribute).
Here, use this for the HTML:
<form method="GET">
<!-- You need to have an ID value, if you are using #txt in jQuery -->
<!-- I assign both ID and Name to the same value -->
<input type="text" id="txt" name="txt"/>
<input type="button" onclick="get()"/>
</form>
Second, your call to action.php is passing the key "text", not "txt", and third you need to use val().
This might work for the JavaScript:
function get(){
// The #txt is getting an ID value
// You also need to use val() instead of value() ... according to #Igor
var ik=$('#txt').val();
// If PHP is looking for a txt key, you'll want that here as well
// The key could by "mykey" as long as PHP expects "mykey".
$.get('action.php',{txt:ik});
}
So, you'll want to correct both those errors.
The PHP looks fine.
Use the val() method instead off value();
HTML
<input type="button" id="go"/>
Script
$(function(){
var ik=$(input'[name=txt]').val();
$.get('action.php',{txt : ik},function(data){
//do whatever with the response from get call
});
});
I've got a plain and simple HTML form which allows people to order some brochures. The form first loads with something looking a little like this:
<script type="text/javascript">
var tableRowN = 1;
</script>
<form id="Order" name="Order" method="post" action="includes/orderCheck.php">
<input id="name" type="text" name="name" width="100" />
<table id="orderingTable">
<tr class="lastRow">
<td><div id="itemGroupdiv1">
<input type="text" class="disabled" name="itemGroup1" id="itemGroup1" />
</div></td>
<td><div id="itemCodediv1">
<input type="text" name="itemCode1" id="itemCode1" class="disabled" />
</div></td>
<td><div id="itemCodeVersiondiv1">
<input type="text" class="disabledSmall" id="itemcodeversion1" name="itemcodeversion1" />
</div></td>
</tr>
</table>
<input type="submit" name="submit" id="submit"/>
</form>
Then when the user wants to add a new line to the table he can click a button which fires the following javascript function to grab the new table code via AJAX and insert it.
function createItemLine() {
tableRowN++;
$('tr.lastRow').attr('class', '');
$('#orderingTable').append('<tr class="lastRow"></tr>');
$.ajax({
url: "/orderingTable.php?rNumber=" + tableRowN,
cache: false,
success: function(html){
$("tr.lastRow").append(html);
alert('loaded');
}
});
}
The AJAX function then runs off to a PHP script which creates the next line, rolling the IDs and Names etc with +1 to the number.
<td><div id="itemGroupdiv2">
<input type="text" class="disabled" name="itemGroup2" id="itemGroup2" />
</div></td>
<td><div id="itemCodediv2">
<input type="text" name="itemCode2" id="itemCode2" class="disabled" />
</div></td>
<td><div id="itemCodeVersiondiv2">
<input type="text" class="disabledSmall" id="itemcodeversion2" name="itemcodeversion2" />
</div></td>
So so far, nothing suprising? Should all be pretty straight forward...
The problem is that when I add new lines (In Firefox and Chrome) the new lines are completely ignored by the form submission process, and they never get passed through into the $_POST array.
Is this a known problem? I've not come across this before...
Thanks for any pointers,
H
use jQuery.trim(data) but this is not pretty sure because can affect the
content of your data. or see this one may help u
Is your table missing an html id? The jQuery selector $('#orderingTable') is looking for something with id="orderingTable"
On some thorough (and boy do I mean thorough) it turned out that the following simple (yet obvious) HTML errors can cause this issue:
Badly formed code EG missing etc
Duplicate or missing form "name" attributes
On creating properly validated HTML, the form submitted and all values were passed correctly into the _POST array. An object lesson in making sure your developers pay attention to the basics before trying to get all fancy in their coding approach ;)
I've found that using .html() to insert the content instead of .append() or .prepend() causes the inserted form fields to work as expected.
I've just spent quite a while laboring over a problem like this.
I was ajax-ing an input field into a form and that input field was not showing up in the $_POST submission array, was completely annoying!!!! Aaaaanyway, I fixed it by just checking over all my html and it turns out that my form 'open' was inside one of the main div's on page and not outside.
thus:
<div>
<form>
<input type="text" name="input_field">
</div>
</form>
is now fixed to be:
<form>
<div>
<input type="text" name="input_field">
</div>
</form>
Silly, I know, but in a massive form, it was tricky to spot! So in short just be tidy with your html and it WILL work, I hope that helps someone somewhere :-)
M