In my view page i had a button
<button id="submit_btn" onclick="submitData('{{$data}}')">Save Data</button>. If the $data contains special characters like ' or " the script will be resulted in an error. How can i handle this problem. Please help me.
You can escape quote characters with addslashes()
<button id="submit_btn" onclick="submitData('{{addslashes($data)}}')">Save Data</button>
Also see this question
You should try this :
<button id="submit_btn" onclick="submitData({{$data}})">Save Data</button>
Related
I am new to Thymeleaf. Recently I stumbled in the following situation. Here is a piece of my Thymeleaf html page:
<!-- an delete button link -->
<a th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:onclick="if(!(confirm('Are you sure you want to delete this employee ?') )) return false" >
Delete
</a>
This code works fine as intended. However I want to add employee name as part of the confirmation. Here is the code:
<!-- an delete button link -->
<a th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:onclick="if(!(confirm('Are you sure you want to delete this employee ' + '\'+${tempEmployee.firstName}+\'' +'?' ) )) return false" >
Delete
</a>
Unfortunately the result is:
Are you sure you want to delete this employee
'+${tempEmployee.firstName}+'.
Looks like Thymeleaf does not recognize ${tempEmployee.firstName}. It has no problem with it in th:href tag but does not like it in th:onclick.
I would appreciate if somebody can turn me into the right direction.
Not sure exactly what the problem is (though it may be related to onclick vs th:onclick. Regardless, I think a format more like this will work (with some added benefits like no JavaScript injection).
<!-- an delete button link -->
<a
th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:data-confirm-delete="|Are you sure you want to delete this employee ${tempEmployee.firstName}?|"
onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false"
>
Delete
</a>
(Notice I'm using onlick and not th:onclick.
Instead of this line in above code ---onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false">
You can write as:
onclick="return confirm(this.getAttribute('data-confirm-delete'))"
There ought to be a better way of doing this, but I can't find it.
There are a number of elements with the same selector on the page. Only the value property differs. Controls are created dynamically, so I can't pin them down any more precisely.
I am searching for an element with a specific value, using Cypress . HTML looks like this:
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
When I find it I want to click it & jump out of the loop.
This is what I have:
const buttonButton = '[data-cy-component=button-button]';
cy.get(buttonButton).each(($el, index, $list) => {
cy.log(`index: ` + index);
if (index === 5) {
cy.wrap($el)
.should('have.value', 'Save')
// Click Save button.
.click();
}
});
This method works, but seems vulnerable. If my Save button is no longer the 5th (or 6th) element, the test will fail. Is there a way I can test it with an IF rather than a SHOULD?
I might not understand what you are doing, please correct me in comments if I have this wrong. What I believe you are trying to do is find a element by it's value. I wrote this and it worked. Please correct me If what you are trying to do is different..
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
cy.get('[value="Save"]').should('exist');
cy.get('[value="Save"]').click();
cy.get('input[value="Save"]').should('exist');
cy.get('input[value="Save"]').click();
This also worked
cy.get('[data-cy-component=button-button][value=Save]').should('exist');
cy.get('[data-cy-component=button-button][value=Save]').click();
Per your comment below you said there were 2 on the screen
I created this HTML to test it. Notice one is hidden. I WOULD NEED TO KNOW WHAT IS MAKING YOURS HIDDEN or not visible. Also are they in different divs that perhaps have unique ids?
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
<input style="visibility:hidden" type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
cy.get('[value="Save"][style!="visibility:hidden"]').should('length', 1);
cy.get('[value="Save"][style!="visibility:hidden"]').click();
I'm trying to use ui-router to change state and pass a GUID parameter to my controller. I have this working using Kendo (different syntax) so I know what I'm aiming for. I cannot for the life of me figure out what the deal is. I have searched far and wide and I believe that I have the correct syntax for the ui-sref. Here it is:
<a ui-sref="clientEdit({ clientId: '{{vm.clientModel.id}}' })">Edit Link</a>
Produces this output in the rendered view (notice missing id):
<a ui-sref="clientEdit({ clientId: 'bfd50b6c-6542-48c5-adf7-8c1a21caf421' })" href="#/clientEdit/">Edit Link</a>
Here is my state:
.state("clientEdit", {
url: "/clientEdit/:clientId",
templateUrl: "/CompanyDashboard/ClientsCrud",
controller: "DashboardClientsCtl",
controllerAs: "vm"
})
When I hardcode the ID into the ui-sref it works as expected and produces the correct href for the tag. Like this:
<a ui-sref="clientEdit({clientId:'bfd50b6c-6542-48c5-adf7-8c1a21caf421'})">Hard code Edit Link</a>
The hard-coded ID tag produces this output in the rendered view (exactly as I would expect):
<a ui-sref="clientEdit({clientId:'bfd50b6c-6542-48c5-adf7-8c1a21caf421'})" href="#/clientEdit/bfd50b6c-6542-48c5-adf7-8c1a21caf421">Hard code Edit Link</a>
So, my question is: Am I missing something here? I really believe this should work as I'm already doing this successfully using a Kendo template for a different route.
Just in case you care, here is the working kendo template code:
template: "<a ui-sref='clientDetails({clientId:\"#=id#\"})'>#=customerNumber#</a>"
I have tried changing quotes to double as in the Kendo example, removing the quotes, removing the {{ }} from the Id expression. No Joy.
Thanks for any and all help.
Solution here is to NOT wrap the param with {{}}
// instead of this
<a ui-sref="clientEdit({ clientId: '{{vm.clientModel.id}}' })">Edit Link</a>
// use this
<a ui-sref="clientEdit({ clientId: vm.clientModel.id})">Edit Link</a>
The content of a vm.clientModel.id is already a string, and will be correctly passed as string (it is GUID for JS it is string)
So, I thought I had tried this yesterday before I posted the question, but I had not. Here is the correct syntax:
<a class="btn btn-sm btn-primary" ui-sref="clientEdit({ clientId: {{'vm.clientModel.id'}} })">Edit Client Test</a>
Notice that the single quotes are INSIDE the {{ }} and not on the outside. Simple eh?
This HTML produces the correct HREF like this:
<a class="btn btn-sm btn-primary" ui-sref="clientEdit({ clientId: vm.clientModel.id })" href="#/clientEdit/bfd50b6c-6542-48c5-adf7-8c1a21caf421">Edit Client Test</a>
I have a button in a directive that I only want to appear on the last object in the array. The ng-show evaluates an expression on the controller.
<button class="btn btn-danger button-xs tsid-btn-sch-pad
glyphicon glyphicon-remove"
type="submit" ng-click=""
ng-show="{{$index == sc.schedule.length - 1}}"></button>
The expression is being correctly evaluated in the browser, but the button is displaying anyway.
So the difference between the highlighted row and the one above where the delete button is not displaying is that ng-hide was added to the class attribute of the row above and it has not been added to the row that is displaying the delete button incorrectly. But I don't know why that update isn't taking place since the ng-show expression is being updated.
Try using the $last variable
<button class="btn btn-danger button-xs tsid-btn-sch-pad
glyphicon glyphicon-remove"
type="submit" ng-click=""
ng-show="$last"></button>
http://plnkr.co/edit/Sf6Xw7YjPlfUuqyHIWng?p=preview
I want to code a line like this in my mvc view:
<input type="button" id="Show" name="Show" onclick="javascript: AjaxPostAndProcess('myController/MyAction',{input1: ($('#formId').find( 'input[name="input1"]').val()})" />
but the doublequotes around "input1" are inside the singlequotes enclosing the parm to .find, and it's all inside the doublequotes of the onclick expression. Is there any way to escape this to get it to work?
I would do it differently:
<input type="button" id="Show" name="Show" />
<script>
$('#Show').click(function () {
AjaxPostAndProcess('myController/MyAction', {
input1: $('#formId').find( 'input[name="input1"]').val()
});
}
</script>
Keeping it unobtrusive. But to answer you question you could replace them with "