How to pass value in a function on click, Knockout - javascript

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>

Related

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>

Is there a way to send button id onClick to a bootstrap modal?

Using laravel, I have a list of user details obtained from the database with edit and remove button at the end of each record. When i click the remove button, the particular record gets removed, but when I added a modal such that when the delete button is clicked, a model appears, but adding the functionality to the confirmation "Yes" button of the modal got tricky, as it deleted the first record no matter which user i need to delete. How do i get the clicked user to be deleted when the modal button is clicked?
I have tried to assign each button the id of the current row.
#foreach($admins as $admin)
<tr>
<td>{{$admin['id']}}</td>
<td>{{$admin['name']}}</td>
<td>{{$admin['email']}}</td>
<td>
<button type="button" class="btn btn-block btn-danger" data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}">Remove</button>
</td>
</tr>
#endforeach
<!-- The Button From Modal -->
<button type="button" class="btn btn-outline">Remove</button>
I did it with JS. You can show your modal with $('#modal-danger').modal('show')
So you can add a onClick event to your button that fill a hidden input.
Your button that make the modal appear:
<button type="button" class="btn btn-block btn-danger" onClick="showModal({{$admin['id']}})">Remove</button>
Your hidden input (somewhere in your page):
<input type="hidden" id="id-to-remove" />
Your button from modal:
<button type="button" class="btn btn-outline" onclick="realRemove()">Remove</button>
Your JS:
function showModal(id) {
$('#id-to-remove').val(id);
$('#modal-danger').modal('show');
}
function realRemove() {
$('#modal-danger').modal('hide');
var id = $('#id-to-remove').val();
alert('You can now remove ID ' + id + ' from your database!');
}
This should work
Since you are using jQuery you can use attribute method to get the current clicked user id and pass to the URL:
Your HTML button class
$(".my-btn").click(function(){
var userID = $(this).attr("data-user");
if (typeof userID !== typeof undefined && userID !== false) {
if(userID.length > 0) {
// There you go the user id of the clicked user
console.log(userID);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="my-btn" data-user="user_id_123">Remove</button>
I suggest you to refer the following URL for your further questions regarding attr method https://www.w3schools.com/jquery/html_attr.asp
make a global variable to store the target id and assingn the id to it when clicking the button on the target row
<button type="button" class="btn btn-block btn-danger" data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}" onClick=someFunction({{$admin['id']}})>Remove</button>
target_id=0
function someFunction(id) {
target_id=id
}
and then make another function to trigger when clicking on the remove button in the model and from that access the global variable for the target id
that's the optimal way to do it as I can think cheers.

Ajax refreshes the whole page instead of a particular part

Net web services. The following code is attached to my master page using a JS. When I run the ajax call, it seems like at the end of success function, it refreshes the whole page. Rather than some particular part. I have tried using both ways, form + input submit, and normal button with click function.
$.ajax({
url: 'service url',
data: { LookupParameter: somevariable },
method: 'POST',
dataType: 'xml',
asynch: false,
cache: false,
success: function (data) {
var xmldata = $(data);
//dom manipulation code
},
error: function (e) {
}
});
Master Page
following code is embedded inside body tag. but not in content placeholder.
<form itemscope itemtype="http://schema.org/LocalBusiness" id="form1" runat="server">
<span class="input-group-addon borderRadiusZero" id="basic-addon1">
<span class="glyphicon glyphicon-question-sign"></span>
</span>
<Input ID="txt_lookup_pincode" type="number" class="form-control" min="111111" max="999999" placeholder="Enter Your Pincode" />
<span class="input-group-btn ">
<button id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button>
<input id="LookupServices" class="btn btn-primary borderRadiusZero" style="height:100%;" type="submit" value="submitM" />
</span>
The issue may be because of this line
<button id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button>
The button type is not defined here. In this case the default type that is submit will be applied.
Define the button type as button
<button type = "button" id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button>
If your JavaScript function with the Ajax call is included in the onclick handler of your button, it should return false to prevent the default action of the button:
<button id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas(); return false;" style="height:100%;">Submit</button>
You can add to the button the type "button" to suppress the default behavior
<button type="button" id="LookupServicesa" class="btn btn-primary borderRadiusZero" onClick="HomeCheckDeliverableAreas();" style="height:100%;">Submit</button
put the dom elements which you want to refresh after the ajax success in another div which is outside the form and do the manipulations to that div. Hope this helps!

Reset Form / remove error classes from jQuery validate

i have a contact form with jQuery validate method. When the user click on "Reset"-button the hole contact form should be go to the initial state.
This is the button looks like:
<form class="form" method="post" action="" name="contact" id="contact">
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset</button>
</form>
And the JS-Code in my "$(document).ready-function" is:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").removeClass("has-error");
});
Problem: The error Text and the Input-fields will be deleted. But the red border (.has-error) or the green border (.has-success) don't be deleted.
i've created an JSFiddle for you:
http://jsfiddle.net/bBc8c/1/
One Button is clear the input text, the other is delete the error Messages.
I need a Button which reset both (Text, Error Message) and the main problem the red border from the has-* classes.
One Button is declared as type=submit the other is type=button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
Your Updated Fiddle
JS Update
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.has-error').removeClass("has-error");
$("#contact").find('.has-success').removeClass("has-success");
$('#contact').find('.form-control-feedback').remove()
});
For bootstrapvalidator, this might useful when the form being display via bootstrap modal,
$("#editModal").on('hidden.bs.modal', function () {
//Removing the error elements from the from-group
$('.form-group').removeClass('has-error has-feedback');
$('.form-group').find('small.help-block').hide();
$('.form-group').find('i.form-control-feedback').hide();
});
#J Santosh answer worked for Bootstrap 3, great work.
For Bootstrap 4 I have done following changes:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.is-invalid').removeClass("is-invalid");
$("#contact").find('.is-valid').removeClass("is-valid");
$("#contact").find('.invalid-feedback').remove();
$("#contact").find('.valid-feedback').remove();
});
Simply have to change the class names. Hope it helps!
I'd reset the form by just using an input[type="reset"] (no jQuery required)
<form class="form" method="post" action="" name="contact" id="contact">
<input type="reset" class="btn btn-danger btn-lg" />
</form>
i've created an JSFiddle for you:
http://jsfiddle.net/bBc8c/1/
One Button is clear the input text, the other is delete the error Messages.
I need a Button which reset both (Text, Error Message) and the main problem the red border from the has-* classes.
One Button is declared as type=submit the other is type=button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
Regards

using variables inside handlebars helper

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...
});

Categories

Resources