I have created Accrodions dynamically and inside each pane is a link button. I have assigned a value to the ID of the link button. what I want to accomplish is that when I click on a link button in one of my pane I want to use the ID' value as the parameter.
My Ajax:
function FireThisEvent() {
var Value;
$("lnkCopy").click(function(event) {Value = (event.target.id);})
alert(Value);
alert(lnkCopy.val());
$.ajax({
type: "POST",
url: "frmSchemeSetup.aspx/sbGetData",
data: '{sdPreNo: Value}',
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
timeout: 10000,
success: function() {
alert("YEAH!!!");
},
error: function(xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
}
How can I accomplish this?
This is where I add the event to my link button
lnkCopy.Attributes.Add("onclick", "FireThisEvent()")
I manage to get my Ajax to call my WebMethod with the help of this following post.
Related
I have made this ajax request to show the validation errors and prevent the page to reload
$(document).on('mousedown', ':submit', function() {
//alert('clicked submit');
var form = $("form");
$.ajax({
type: 'post',
url: '/events',
headers: { 'X-CSRF-TOKEN': "{{csrf_token()}}" },
data: form.serialize(),
dataType: 'json',
success: function(data){
},
error: function(data) {
for(errors in data.responseJSON){
swal({text:data.responseJSON[errors]});
}
}
});
});
All is fine with this code! The problem is that after successfull submit i have 2 inputs in DB...how can i prevent this?
Are you sure the form isn't actually submitting and saving the values once by post and once by ajax? Usually if you're capturing a submit event you listen for the forms submit even not the mousedown event of the submit button e.g.
$('form').on('submit', function(e) {
// Stop the forms default submit action
e.preventDefault();
//alert('clicked submit');
var form = $("form");
$.ajax({
type: 'post',
url: '/events',
headers: { 'X-CSRF-TOKEN': "{{csrf_token()}}" },
data: form.serialize(),
dataType: 'json',
success: function(data){
},
error: function(data) {
for(errors in data.responseJSON){
swal({text:data.responseJSON[errors]});
}
}
});
});
Also the e.preventDefault() will prevent the form from submitting itself along with your ajax action. Also you'd best off selecting your form by an ID or class name.
I have a bootstrap modal which holds a form and from holds a select option field and I would like to populate this with help of ajax on modal('show')
So I have been trying the following but on first click won't fire and after each click the request are duplicated
$('#addNew').modal('show');
$('#addNew').on('show.bs.modal', function(e) {
//ajax call to populate select option
var url = ajaxurl + '?action=getCategories';
$.ajax({
type: "POST",
cache: false,
success: function(html) {
}
});
});
Why not changing the scenario?
function showAddNewModal(){
//ajax call to populate select option
var url = ajaxurl + '?action=getCategories';
$.ajax({
type: "POST",
cache: false,
success: function(html) {
//populate select option here
$('#addNew').modal('show');
}
});
}
Also when you are using POST method , you should change your request to :
$.ajax({
url:ajaxurl,
data:{"action":"getCategories"},
type: "POST",
cache: false,
success: function(html) {
//populate select option here
$('#addNew').modal('show');
}
});
I have the following jquery with ajax call? My webservice returns dataset.
Here is the code:
$(document).ready(function(){
$('#ctl00_ContentMain_ddlRegions').change(function(){
region = $(this).val();
alert(region);
});
});
$('input[type="text"]').autocomplete({
$.ajax({
async: true,
type: "GET",
url: "~/EmailActivation/EmailActivation.asmx/GetIsoFromRegion",
data: "{'option':'" + region + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function(data,status){
alert("success");
}
});
minLength: 4 });
});
Right now there is an error in my code so, I cannot even display alert to show region. Error is generated from autocomplete section.
When I remove autocomplete section, script works.
What do I need to change and how can I make my autocomplete work with the data coming from webservice?
Thank you
html part
<input data-bind="kendoComboBox: { dataTextField: 'FirstName', dataValueField: 'PersonID', data: AllUsers,template: '<span>#= data.FirstName # #= data.LastName # </span>', value: SelectedUserID,
change: UserSelectionChanged}" />
event handler inside model
var self= this;...
self.UserSelectionChanged = function () {
$.ajax({
type: "POST",
url: defaultUri + '/Home/GetUserTasks',
data: JSON.stringify({ PersonID: self.SelectedUserID() }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (o) {
self.SelectedUserTask(null);
self.SelectedUserTask(o);
//RRM: Added this line below so that whenever user dropdown is changed or refresh button is clicked in AssignedTo the first task of that particular user is Selected.
self.selectTask(o[0]);
}
});
};
here the event is being called but the data in self is not there. The event doesn't seems to be bind well with knockout.
how to properly bind the ko event in the kendo combobox event?
Instead of registring to the change event, I'd subscribe to SelectedUserID:
var self= this;
...
self.SelectedUserID.subscribe(function(selectedUserId) {
$.ajax({
type: "POST",
url: defaultUri + '/Home/GetUserTasks',
data: JSON.stringify({ PersonID: selectedUserId }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (o) {
self.SelectedUserTask(null);
self.SelectedUserTask(o);
//RRM: Added this line below so that whenever user dropdown is changed or refresh button is clicked in AssignedTo the first task of that particular user is Selected.
self.selectTask(o[0]);
}
});
});
This way it doesn't matter when or how the SelectedUserID is being changed.
As sroes wrote subscribing to the observable is the best choice here.
In cases where you have to bind to the kendo event then you can do this:
data-bind="... change: UserSelectionChanged(), ...."
Notice the function call parenthesis at the end ^
Now you function has to be like this:
this.UserSelectionChanged = function () {
var self = this;
return function(e) {
$.ajax({
self.blah ...
});
}
}
Now you have created a closure and you can access your view model using self but you also have the original Telerik event args inside e like e.dataItem etc.
So now you are unstoppable, you can do everything!
Hello guys i have the next ajax call for login. I serialize the form and send the data to server and return redirect url link. My problem is that my url after post is like
http://localhost:50802/?username=&password= and not http://localhost:50802/Home
$.ajax({
type: "POST",
url: "Login/Login",
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: loginJson,
cache: true,
async: false,
complete: function (result) {
alert(result.link);
window.location.replace = "/Home/Index";
},
error: function () {
$("#username").val("");
$("#password").val("");
alert("Wrong Username or Password!");
}
}); //end ajax call
It looks like you wrote this $.ajax call in the .click event of a submit button or in the .submit event of a form without canceling the default action by returning false from the callback or by calling preventDefault on the argument. Here's how your code should look like:
$('#id_of_your_form').submit(function(e) {
e.preventdefault(); // <-- That's what I am talking about and what you forgot
$.ajax({
type: "POST",
url: "Login/Login",
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: loginJson,
cache: true,
async: false,
complete: function (result) {
window.location.replace = "/Home/Index";
},
error: function () {
$("#username").val("");
$("#password").val("");
alert("Wrong Username or Password!");
}
}); //end ajax call
});
Also async: false,????? You know what this does, do you? That's not AJAX. That's a blocking synchronous call to your webserver during which the client browser would be frozen like during the Ice Age 2 ruining all user experience.
Try returning false at the end of your submit function
$('#id_of_your_form').submit(function(e) {
$.ajax({
type: "POST",
url: "Login/Login",
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: loginJson,
cache: true,
async: false,
complete: function (result) {
window.location = "/Home/Index";
},
error: function () {
$("#username").val("");
$("#password").val("");
alert("Wrong Username or Password!");
}
}); //end ajax call
return false; });
Another option would of course be to return the correct redirectlink from the controller instead of overriding it in the java script.