How to use ajax $.post() in a callback? - ajax

I'm trying to use Ajax in a callback on 'eventDrop'
Here is the line of code I use:
$.post('{{ route('update_event_ajax') }}', data);
But when add it, the calendar no longer appears.
Here is my FullCalendar script:
$(document).ready(function(){
$('#calendar-NcAT6P42').fullCalendar( //calendars options...
,"eventDrop":
function(event) {
$('#event_id').val(event.id);
$('#event_title').val(event.title);
$('#event_footnote').val(event.footnote);
$('#event_id_team').val(event.id_team);
$('#event_id_customer').val(event.id_customer);
$('#event_title').val(event.title);
$('#event_start_date').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
$('#event_end_date').val(moment(event.end).format('YYYY-MM-DD HH:mm:ss'));
var data = {
_token: '{{ csrf_token() }}',
event_id: $('#event_id').val(),
event_title: $('#event_title').val(),
event_start_date: $('#event_start_date').val(),
event_end_date: $('#event_end_date').val(),
};
$.post('{{ route('update_event_ajax') }}', data);
},
"events": ...);
});
I've also tried with $.ajax(...) but got the same problem
I assume that my Ajax isn't at the right place ? But where should I place it ?
Thanks in advance
edit:
I'm using Laravel 5.0 and Laravel 5 Full Calendar Helper (https://github.com/maddhatter/laravel-fullcalendar)

Related

How to use serialize() Method without using form Tag | Laravel

I want add New Product without refresh the Page. So, I Use Bootstrap Model for to Add New Product.
If i use Form Tag model has been redirect same page. How to Avoid It. I am working in Laravel Project
$(document).ready(function() {
$("#add").click(function() {
$.ajax({
type: 'post',
url: $("#add").attr('data-url'),
data: {
'_token': '{{ csrf_token() }}',
'form_data': $('#Form').serialize(),
},
success: function(data) {
$('#ledger_name').val('');
$('#openning_balance').val('0.00');
$('#ob_type').val('');
$('#under').val('');
$('#ledger_address').val('');
$("#newLedger .close").click();
alert("Data Inserted");
},
error: function(data)
{
var errors = '';
for(datos in data.responseJSON){
errors += data.responseJSON[datos] + '<br>';
}
$('#response').show().html(errors); //this is my div with messages
}
});
});
});
Add this on your beginning of your ajax call. do you want to refresh a div without reloading page???
event.preventDefault();

ajax not working in breezing forms component of joomla [closed]

function ff_chk_username_unique(element, action)
{
alert(element.value);
alert(action);
var actiona="http://localhost/myproject/check/check_username.php";
var form_data = {
username: element.value,
};
alert(actiona);
$.ajax({
type: "GET",
url: actiona,
data: form_data,
success: function(response)
{
alert(response)
}
});
} // ff_chk_username_unique
code of my ajax file...
file is not called within ajax,
is ajax defined properly?? please help me solve it....
it's working in breezingforms but you need to add jquery file when you use ajax...

Ajax request type POST returning GET

I'm currently trying to make an ajax POST request to send a testimonial simple form to a Django view. The problem is this request is returning a GET instead of a POST.
This is my ajax:
<script>
$(document).ready(function(){
$("form.testimonial-form").submit(function(e){
e.preventDefault();
var dataString = $(this).serialize();
$.ajax({
type: "POST",
url: "/testimonials",
data: dataString,
success: function(_data) {
if (_data[0]){
$('.modal-text').css({display: "none"});
}
else{
$('.unsuccess').css({display: "block"});
}
}
});
});
});
</script>
Any idea what could I be doing wrong?
replace type by method
method: 'post',
also you may need send headers:
headers: {
'X-CSRFToken': getCSRFToken()
},
where getCSRFToken is:
function getCSRFToken() {
return $('input[name="csrfmiddlewaretoken"]').val();
}
I am not really sure why this is happening, but i would write the function in a bit different way. since ajax();'s default type is "GET", i suspect somewhere it is being set to default.
first set the type="button" of submit button (whose id is e.g. "submit_button_id"), so it doesnot submits if you click on it. or put the button outside of <form>
then try this code
<script>
$(function(){ // same as "$(document).ready(function()"..
$("#submit_button_id").on('click',function(){
var dataString = $('form.testimonial-form').serialize();
$.ajax({
type: "POST",
url: "/testimonials",
data: dataString,
success: function(_data) {
if (_data[0]){
$('.modal-text').css({display: "none"});
}
else{
$('.unsuccess').css({display: "block"});
}
}
});
});
});
</script>

What is the equivalent of Ajax.updater in Jquery?

Please let me know the equivalent of below prototype code in Jquery.
var myAjax = new Ajax.Updater('abc', '/billing/add_bill_detail', {
method: 'get',
parameters: pars,
insertion: Insertion.Bottom
});
I want to perform the same action using Jquery.
Thanks in Advance.
In jQuery the Ajax will use as following:
$.ajax({
url: "/billing/add_bill_detail",
type: "get",
dataType: "html",
data: {"pars" : "abc"},
success: function(returnData){
$("#abc").html(returnData);
},
error: function(e){
alert(e);
}
});
Use #abc if abc is the id of the div or use .abc if abc is a class.
You can place the returnData iin your HTML where you want,
There are some ways using ajax like jQuery.ajax({...}) or $.ajax({...}) other than this there are some simplified versions of these too like:
$.get() or jQuery.get()
$.post() or jQuery.post()
$.getJSON() or jQuery.getJSON()
$.getScript() or jQuery.getScript()
$ = jQuery both are same.
As you are using method : 'get', so i recommend you to use $.ajax({...}) or $.get() but remember to include jQuery above this script otherwise ajax function wont work Try to enclose the script in the $(function(){}) doc ready handler.
'abc' if you could explain it
Try adding this with $.ajax():
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$.ajax({
type: "GET",
url: "/billing/add_bill_detail",
data: pars,
dataType: 'html'
success: function(data){
$('#abc').html(data); //<---this replaces content.
},
error: function(err){
console.log(err);
}
});
});
</script>
or with $.get():
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$.get("/billing/add_bill_detail", {data: pars}, function(data) {
$('#abc').html(data); //<---this replaces content.
}, "html");
});
</script>
or more simply use the .load() method:
$('#abc').load('/billing/add_bill_detail');
You can use .load() method
Load data from the server and place the returned HTML into the matched
element.
Read docs: http://api.jquery.com/load/
$(function(){
$.ajax({
type: "GET",
url: "abc/billing/add_bill_detail",
data: data,
success: function(data){
alert(data);
}
});
});

How to call ajax only once

I call function from this code :
<div id="header-button-news" class="header-button-info">
<div class="new">2</div>
</div>
My function is
function showNews()
{
//other js which show block
jQuery("#loader").show();
//ajax which load content to block
jQuery.ajax({
type: "GET",
url: link,
dataType: "html",
success: function(data) {
jQuery('#top-info-news').html(data);
},
complete: function(){
jQuery('#loader').hide();
},
});
}
How can I make only once ajax call? so when content is loaded and page was not refresed not to load ajax? I tried to do boolean variables but nothing, I suppouse it is because I call everytime function. Please give me an idea how to do.
thank you
When you want to do something on that event.
Identify when you have already loaded your data.
var loaded = false;
function showNews() {
//other js which show block
jQuery("#loader").show();
if(loaded) return;
//ajax which load content to block
jQuery.ajax({
type: "GET",
url: link,
dataType: "html",
success: function(data) {
jQuery('#top-info-news').html(data);
},
complete: function(){
jQuery('#loader').hide();
},
});
loaded = true;
}
Or use one. when you want to call it once.
jQuery('.showNews').one('click', function() {
// your code
});
"Attach a handler to an event for the elements. The handler is executed at most once per element."
reference
Use the .one() function :
Attach a handler to an event for the elements. The handler is executed at most once per element.
I have added an id attribute to the anchor to allow an easier bind, but you could use $("#header-button-news a").one
$(document).ready(function () {
$('#shownews').one('click', function (evt) {
evt.preventDefault(); // prevent default click action
jQuery("#loader").show();
//ajax which load content to block
jQuery.ajax({
type: "GET",
url: link,
dataType: "html",
success: function (data) {
jQuery('#top-info-news').html(data);
},
complete: function () {
jQuery('#loader').hide();
},
});
});
});
Also used event.preventDefault() to prevent the default action on the anchor from being followed
<div id="header-button-news" class="header-button-info">
<a id="a_news" title="Новости"></a>
<div class="new">2</div>
</div>
In JS:
$(function(){
$('a#a_news').one('click',showNews);
})

Resources