Develop Reference

Using VS Code and It doesn't recognize ejs tags

I am Using Vs code and it doesn't recognize ejs output tags when they are inside an html tag like the input tag below :
<input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form.submit()">
Before changing the default value property from on to <%=item._id%> it would actually print on, Now it does nothing !
and in the code itself i can see that it doesn't recognize it because the color doesn't change as usual.
The solutions I found were re-starting my vs-code and adding
"emmet.includeLanguages": {
"ejs":"html"
}
to my settings.json but they did not work.
Any suggestion is appreciated.

After much trial and error(a day and a half to be precise) I used this <%- instead of <%=
and it worked. According to the documentation this <%- tag outputs unescaped value into template. See full code below:
value='<%-item._id%>'
<input type="checkbox" name="checkbox" value="<%-item._id%>" onChange="this.form.submit()">
and I have a clue of how that worked but if any one can give me a comprehensive explanation that would be greatly appreciated. I would love to understand completely these how this tag works.

Webserver PLC Siemens Javascript, when click, set value

I have a dropdown menu and want to write data to a field when clicked. I have tested it with regular tags but I am having trouble with the syntax when I am testing a tag from a PLC that is named 'mytag' with these '' around it .
In the HTML document, I have to tell the program that the particular tag is both read and write by doing this:
<!-- AWP_In_Variable Name="webdata".'mytag' -->
'"webdata".mytag' is a tricky name, so I made an alias named 'mytag':
<!-- AWP_In_Variable Name="webdata" -->
<!-- AWP_In_Variable Name='Fortype' Use='"webdata".mytag' -->
Here is an example for a typical application of the tag where it works using it:
:=mytag:
<form method="post">
<input name='mytag' type="text" size=2 />
<button type="submit">Save</button>
</form>
The code for setting values by click works with regular tags like this:
$("#id_from_dropdown_menu").click(function() {
$("#myval").html("10");
});
But the code does not work when I try to use 'mytag', I think it is because of the '' signs.
$("#id_from_dropdown_menu").click(function() {
$("#mytag").html("10");
});
ANY TIPS?

NO worries! Figured it out. Leave post of you get similar problems :)

Automatically changing an input field on change without access to $scope

I've been looking and trying to work on this for a while, but the way my company does things causes it to be unnecessarily difficult for me. At work I do a lot of work on an internal customer facing system that we edit entirely in HTML using AngularJS. We can run scripts locally in these HTML files but can not access the $scope in our functions.
I have an input field as shown below, and I need it to limit the phone number to 10 digits and automatically remove any non-numerical value. What I'm doing so far is this.
At the beginning of the HTML file, the scripting:
<script language = "javascript" type = "text/javascript">
fixPhoneNumber = function(interviewProperty) {
var cleaned = iData[interviewProperty]
cleaned = cleaned.replace(/\D/g,'');
iData[interviewProperty] = cleaned;
console.log(testing testing testing);
}
</script>
and in the data itself, this is how I'm attempting to call the data. I'll answer any questions if I'm not specific enough, but I think I've gotten everything shown here.
<button id="copyDP" class="copyButton" ng-click="copy_cust_data('phone', 'local_dir_ad_phone');" type="button">Copy Customer Phone</button><br/>
<input id="local_dir_ad_phone" type="text" class="k-textbox spellcheck" style="width:100%;" ng-change="fixPhoneNumber('local_dir_ad_phone')" ng-required="iData.site_addr_phone_same==='YES'" ng-model="iData.local_dir_ad_phone" /><br/>
<span class="error" ng-show="(iData.local_dir_ad_phone==undefined) || (iData.local_dir_ad_phone==='')">This information is required.</span>
<br/>
<ul>
<li>Is this also the best number for us to reach you at?
<ul>
<input id="contact_phone_good" type="radio" ng-model="iData.contact_phone_good" value="YES" /> <b>Yes</b><br/>
<input id="contact_phone_good" type="radio" ng-model="iData.contact_phone_good" value="NO" /> <b>No</b><br/>
<div ng-show="iData.contact_phone_good==='NO'">
<ul>
<li>What is the best number for us to reach you at? <span id="usernote">(Update Prospector Customer record with best contact number)</span></li>
</ul>
</div>
</ul>
</li>
</ul>
The value I'm looking to have changed is the 'local_dir_ad_phone' as it already has the ng-change applied in this example. Is there perhaps some reason that ng-change wouldn't actually execute its function every time a change was made? From reading the API, I'm under the impression that it should run it on every change made real time.
Any help is appreciated. Thanks!

If I understand what you're saying-
You are changing the value of the input outside of angular so it's not seeing the change. If you are changing input outside of angular you need to call $scope.$apply() to apply you changes. Since you don't have access to scope you can do it by calling $apply on $rootScope.
angular.element('body').injector().get('$rootScope').$apply();
But this sucks and you should talk to someone at work about getting a handle on the scope as this would cause a digest for the entire app.

Keep checkbox status for multiple checkboxes with same name

I have a page of content generated by ajax and organized with a row of checkboxes. Clicking on any of the checkboxes passes a parameter into the URL and that's used to create a SQL query. I want to add the checkboxes to another section of the page but when I do this, I'm unable to keep the checkboxes styled (there's a custom style for a checked and unchecked state). Click on either row of checkboxes will organize the data properly, but only one row of checkboxes will show the checked-on/checked-off state.
I'm using the following code to style the checkboxes:
$(':checkbox').change(function() {
if($(this).is(":checked")) {
$(this).next('label').children('div').removeClass("sort-not-active").addClass("sort-active");
}
else {
$(this).next('label').children('div').removeClass("sort-active").addClass("sort-not-active");
}
});
The HTML for my checkboxes is below. I figured my style issues might be caused because I'm passing the variable as an ID instead of a class, but whenever I remove the ID the checkboxes stop working altogether.
<?php foreach (array_unique($disciplines) as $discipline): ?>
<input class="disciplinechecks" type="checkbox" id="<?php echo $discipline; ?>" name="<?php echo $discipline; ?>" value="<?php echo $discipline; ?>" onChange="checkBoxChange(this.checked,'<?php echo $discipline; ?>');">
<label for="<?php echo $discipline; ?>">
<div class="sort-genre sort-active"><?php echo $discipline; ?></div>
<span></span>
</label>
<?php endforeach ?>
Below is the function I use to pass the values into the URL. Nothing here references an ID so I can't figure out why removing the ID from my checkboxes breaks it:
var typeItemsChecked = Array( ALL OF THE $DISCIPLINE VALUES ARE HERE );
function checkBoxChange(x,y) {
if(x){
var type = y;
typeItemsChecked.push(type);
showUser();
}
else {
var type = y;
typeItemsChecked.remove(type);
showUser();
}
}
function getURLString() {
joinedTypeItemsChecked = typeItemsChecked.join();
var queryString = [
("d="+joinedTypeItemsChecked)
];
var url = queryString.join("&");
return url;
}
This is what the HTML looks like after the PHP
<input class="disciplinechecks" type="checkbox" id="Web Design" name="Web Design" value="Web Design" onChange="checkBoxChange(this.checked,'Web Design');">
<label for="Web Design">
<div class="sort-genre sort-active">Web Design</div>
<span></span>
</label>
<input class="disciplinechecks" type="checkbox" id="Print Design" name="Print Design" value="Print Design" onChange="checkBoxChange(this.checked,'Print Design');">
<label for="Print Design">
<div class="sort-genre sort-active">Print Design</div>
<span></span>
</label>

Okay, so, after reading your comment responses, nothing in your original post jumps out at me immediately as an issue, but there are a couple of problems that your "processed" code has (particularly around the id and name attributes) that could be causing you troubles. Specifically:
id attributes can not contain spaces (see here for more information on valid id values: What are valid values for the id attribute in HTML?)
id values must be unique within the page
Multiple checkboxes (and, on a side note, radio buttons) that have the same name attribute, are considered to be grouped (i.e., sort of like they are one input).
Now, browsers can often be pretty forgiving about these things, but scripting languages can get very confused. So, before you go any further in your debugging, I would suggest updating your PHP to:
strip any spaces out of the $discipline value, when assigning the id attribute. While name attributes can have spaces, I would avoid using them there as well, as a general practice.
use some sort of index value (or something similar) to differentiate the id and name values between the two sets of checkboxes.
On a side note . . .
. . . there are also a couple of places where you can simplify your code . . . doing that will also reduce the number of places where bugs can pop up. Specifically:
In you JS code for the styling, try this:
$(':checkbox').change(function() {
$(this).next().children('div').toggleClass("sort-not-active sort-active");
});
no need to specify 'label' in the next() call, since it is always the next sibling of the checkbox
if the default classes are set up correctly, then all you need to do is toggle the two classes on the change of the checkbox. Since there are only two states that the checkbox can be in, there are only two states that the combination of classes can be in.
For the code for capturing the checked boxes, you can simplify it to this:
function checkBoxChange(x,y) {
if (x) {
typeItemsChecked.push(y);
}
else {
typeItemsChecked.remove(y);
}
showUser();
}
I don't see any reason that this would be causing the problems that you are seeing, but I just thought that I would toss that out to help reduce the complexity a little bit. :)
So, I'm not guaranteeing that any of these are going to fix the issue that you are seeing (actually, using just your original JS for the styles and the HTML samples that you gave, everything worked just fine for me in Firefox), but I do know that some browsers and scripting languages can be very particular about not following the correct rules of HTML. Try addressing some of these issues and see if the problems that you are seeing go away. If not, we can try again with your new code.

Grails and Jasper - Send input fields values from create view as parameters to a report

I'm having problems trying to send input fields values to a Jasper report. I know how to send parameters to a report but I always did this using the show.gsp view because it was quite simple to do something like this:
<g:jasperReport controller="liquidacionDeEstano" action="crearReporte" jasper="liquidacion_estano" format="PDF" name="ReporteLiquidacion${liquidacionDeEstanoInstance.lote}">
<input type="hidden" name="LIQ_SN_ID" value="${liquidacionDeEstanoInstance.id}" />
</g:jasperReport>
Where LIQ_SN_ID is a "static" parameter used by the report.
But now I want to fill some input fields and use this values as parameters. So, what I'm doing is to use some input fields out of the jasperReport tags and hidden fields inside the jasperReport tags. Then I copy the values from the input fields to the hidden fields using JavaScript.
To generate the report I'm just using SQL and the parameters passed are used for filtering.
This is my controller closure to create the report (I think I don't need anything else but the parameters):
def crearReporte = {
chain(controller:'jasper',action:'index',params:params)
}
This is the code in the GSP form to invoke the report:
<g:jasperReport controller="reporteLotesRecepcionados" action="crearReporte" jasper="reporte_recepcion_fechas" format="PDF" name="ReportePorFechas">
<input type="hidden" id="ELEMENTO_1" name="ELEMENTO_1" />
<input type="hidden" id="ELEMENTO_CLASS_1" name="ELEMENTO_CLASS_1" />
<input type="hidden" id="FECHA_INICIAL_1" name="FECHA_INICIAL_1"/>
<input type="hidden" id="FECHA_FINAL_1" name="FECHA_FINAL_1"/>
<input type="hidden" id="ESTADO_LOTE_1" name="ESTADO_LOTE_1"/>
</g:jasperReport>
I checked that all the parameters are correct (hidden fields values) using Firebug and a Web Developer extension for Firefox but when I click the link to the report this error is produced:
Timestamp: 23/12/2013 07:20:00 p.m.
Error: TypeError: link.parentNode._format is undefined
Source File: http://localhost:8080/Liquidaciones/reporteLotesRecepcionados/create
Line: 660
Following the link to the error this automatic generated code is shown:
<script type="text/javascript">
function submit_reporterecepcionfechas(link) {
link.parentNode._format.value = link.title;
link.parentNode.submit();
return false;
}
</script>
I don't know what I'm doing wrong. In fact this is the first time I try to generate a report using values as parameters from input fields.
Please help me with this.
Thank you in advance.

I know this have been here for 11 months withuoth an answer so...
Jasper tags uses their own form and since html forbids to have nested forms:
Content model: Flow content, but with no form element descendants.
(HTML)
Jasper documentation says : "Note that the jasperReport tag should not be nested with a form element, as it uses a form element in its implementation, and nesting of forms is not allowed."

Finally I solved it but I'm not sure how I did it. Ok, here is what I did:
As you know, since Grails 2 (I think) there is a form.gsp used by the create.gsp and edit.gsp views. I was using just the create.gsp (and, in consequence, the form.gsp) view to have the input fields to obtain parameters to generate reports. Initially I located the code:
<g:jasperReport controller="reporteLotesRecepcionados" action="crearReporte" jasper="reporte_recepcion_fechas" format="PDF" name="ReportePorFechas">
<input type="hidden" id="ELEMENTO_1" name="ELEMENTO_1" />
<input type="hidden" id="ELEMENTO_CLASS_1" name="ELEMENTO_CLASS_1" />
<input type="hidden" id="FECHA_INICIAL_1" name="FECHA_INICIAL_1"/>
<input type="hidden" id="FECHA_FINAL_1" name="FECHA_FINAL_1"/>
<input type="hidden" id="ESTADO_LOTE_1" name="ESTADO_LOTE_1"/>
</g:jasperReport>
INSIDE the <g:form></g:form> tags. So, I tried, as an experiment, to copy the code to declare the input fields and the code to generate the report from form.gsp file to create.gsp, OUTSIDE the <g:form></g:form> tags (I'm not using the form.gsp file anymore). And that was all. It's working perfectly now.
As I told you I don't know how this problem has been solved. Maybe it is mandatory to have the tags outside any <g:form></g:form> tags...
...but why?
PD.: I created a domain class to have the form to enter the values that were going to be parameters. All of you must be thinking this was completely unnecessary and that having an ordinary HTML form was enough , well, I'm a Grails newbie, sorry.