using variables inside handlebars helper - javascript

I have a handlebars helper that compares two values. My code is below
{{#compare action "blank" operator="!="}}
<button type="button" class="btn btn-primary btn-xs btn-approval" data-id="{{../sid}}" data-table="distributor">Approve</button>
<button type="button" class="btn btn-danger btn-xs btn-delete-approval" data-id="{{../sid}}" data-table="distributor">Delete</button>
{{/compare}}
for some reason I can't access the sid variable inside the helper. How would I do that?

Pass sid it as parameter to helper. And you can access it as an argument in helper function.
{{#compare ../sid action "blank" operator="!="}}
<button type="button" class="btn btn-primary btn-xs btn-approval" data-id="{{sid}}" data-table="distributor">Approve</button>
<button type="button" class="btn btn-danger btn-xs btn-delete-approval" data-id="{{sid}}" data-table="distributor">Delete</button>
{{/compare}}
The helper function can then access it as an argument.
Handlebars.registerHelper('compare', function(sid, action, blank, operator, options) {
this.sid = sid;
// your code here...
});

Related

How to do a dynamic href below?

How to do dynamic href below?
#Model.inbox_type is a dynamic value either "1", "2", "3" .. "6", how to apply it with href below?
<button class="btn btn-block btn-secondary" type="button" onclick="location.href='#Url.Action("Index/" + "#Model.inbox_type" , "Inbox")'">Exit</button>
You can pass a parameter on Url.Action instead of string appending
<button class="btn btn-block btn-secondary" type="button" onclick="location.href='#Url.Action("Index", "Inbox", new { id: #Model.inbox_type })'">Exit</button>
Note that id is the parameter you're expecting in the action function
public ActionResult Index(string id)
You can check this document for a reference

Unable to get Data Attribute value of dynamically generated buttons in jQuery

I am new to JavaScript and was trying to figure our how to access data attribute values of dynamically generated buttons.
I was passing my ID coming from the Database to "data-id" attribute. Below is the dynamically generated code for my buttons
<button class='btn btn-sm btn-primary aButton' data-id='1234'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12345'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12346'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12347'></button>
Now i wanted to access these buttons onclick using jquery to perform some actions. Below is my code for that
$(document).on('click', '.aButton', () => {
let id = $(this).attr('data-id');
console.log(id);
})
The above console gives me "undefined" with the thick arrow function. When I tried to do the same with function () {}, it gave me the dynamic ID stored in the data attribute of the button.
What is happening with this? Is there a better approach to get a dynamic ID of button on click.
Thank you all in advance.
Have a nice day :)
When you use arrow function () => {} then jquery don't know what this refers to so use:
$(document).on('click', '.aButton', (e) => {
let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
console.log(id);
})
Demo
$(document).on('click', '.aButton', (e) => {
let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
console.log(id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='btn btn-sm btn-primary aButton' data-id='1234'><i>testers</i></button>
<button class='btn btn-sm btn-primary aButton' data-id='12345'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12346'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12347'></button>

How to get multiple values using JSTL tags?

I have this button:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser}" onclick="deleteUser(this.value)">Delete</button>
That calls the function deleteUser once the button is clicked.
I would like to know how to send more than one value at the same time.
For example, if I want to send the idUser and the userName, how can I do it?.
I tried this but it's not working:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser, usr.userName}" onclick="deleteUser(this.value)">Delete</button>
I expect to receive the values in the same jsp page:
function deleteUser(val1, val2) {
alert(val1);
alert(val2);
}
You can simply pass your values under your function under '' quotes else it will give you error not defined.So your button code will look like below :
<button type="button" class="btn btn-danger" value="something" id="deleteuserbtn" onclick="deleteUser(this.value ,'${usr.idUser}','${usr.userName}')">
Delete</button>
Demo Code :
function deleteUser(val1,val2,val3){
alert("val :"+val1 +" "+val2+" "+val3);
}
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="something" onclick="deleteUser(this.value,'${usr.idUser}','${usr.userName}')">
Delete</button>

How to find a particular button/element using both the data-* and value attribute

I have two dynamically generated buttons:
<button type="button" data-btnTyp="btnOP" data-usrRole="3" data-reqID="24" class="btn btn-primary btn-xs" style="width: 75px" value="Start">Start</button>
<button type="button" data-btnTyp="btnOP" data-usrRole="3" data-reqID="24" class="btn btn-primary btn-xs" style="width: 75px" disabled="true" value="Complete">Complete</button>
The two buttons have same data-reqID but different values. I am basically trying to find() the button with the data-reqID="24" and value="Complete" and enable the button.
I am very new to JQuery and
I have tried something like this:
$("button[data-reqID='" + reqID+ "'][value=Complete]").attr('disabled', 'false');
But obviously that's syntactically not correct and hence doesn't seem to work.
Couple of things. If you want to enable the button, you need to set disabled to "false". Also, you need to specify an actual Boolean value for the disabled attribute. Don't supply a string value of "true" of "false".
In other words, it should be"
.attr('disabled', false);
and NOT:
.attr('disabled', 'false');
Full Example:
var reqID = 24;
$('button[data-reqID="' + reqID+ '"][value="Complete"]').attr('disabled', false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-btnTyp="btnOP" data-usrRole="3" data-reqID="24" class="btn btn-primary btn-xs" style="width: 75px" value="Start">Start</button>
<button type="button" data-btnTyp="btnOP" data-usrRole="3" data-reqID="24" class="btn btn-primary btn-xs" style="width: 75px" disabled="true" value="Complete">Complete</button>
disabled is a property and not an attribute like value or size etc.
It is in the class of other properties like required or readonly and any value you assign to them in HTML/JS is ignored. It is their presence or absence in the tag that matters.
To use properties in Jquery, you have to use .prop rather than .attr
i.e. $("button[data-reqID='" + reqID+ "'][value=Complete]").prop('disabled', false); to remove the disabled property
set the second argument to true to add the property.
Read more here: http://api.jquery.com/prop/

How to pass value in a function on click, Knockout

I have this button that should pass the value of a field, Page on click event to this function SelectPage in my JS. Any idea why it is not working?I am getting a null as input to the function.
<button data-bind="click: $root.selectPage.bind($root, $root.rootData.Page())" id="gotoBtn" class="btn btn-default" type="button">Go!</button>
See http://knockoutjs.com/documentation/click-binding.html, note 2:
<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
Click me
</button>
You need to wrap your function call to pass in params
Edit: your function, updated
<button data-bind="click: function(){$root.selectPage.bind($root, $root.rootData.Page());}" id="gotoBtn" class="btn btn-default" type="button">Go!</button>

Categories

Resources