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');
}
});
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.
When I use the code below, paging is not working. Where am I wrong?
var data = '';
$.ajax({ type: "GET",
url: "include/tables/data.php",
async: false,
success: function(data) {
$("#result").html(data);
$('#mytable').DataTable({});
}
});
Here I am using codeigniter with highchart. Highchart will change after dropdown select by calling ajax.
Here, function is called but ajax is not calling. So, where I go wrong with this.
This is my ajax:
$('.edit').click(function(e)
{
e.preventDefault();
$.ajax({
url: '<?php echo site_url("Chart/branchwiseactivity");?>',
type: 'POST',
data: {
series: []
},
dataType: 'json',
success: function(json)
{
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
options.series[3] = json[4];
chart = new Highcharts.Chart(options);
}
});
e.preventDefault();
});
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!
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.