Why is code in AJAX success call is not working?

Question

I have an AJAX script to insert data from a form to MySQL database. This is the AJAX.

<!-- SUBMIT FORM VIA AJAX -->
$("#f_product").on('submit',function(event){ 
    event.preventDefault();

    data = $(this).serialize();

    $.ajax({
    type: "POST",
    url: "<?php echo site_url('con_product/ins_product'); ?>",
    data: data
    }).success(function() {
        alert("Products list is ready to be printed");
        window.open("<?php echo site_url('con_product/print_product'); ?>","_blank");
        window.open("<?php echo site_url('con_product/form_product'); ?>","_self");
    });
});
<!-- END SUBMIT FORM VIA AJAX -->

The AJAX script successfully insert data from the form to database. But somehow, the script on success is not working. Why?

The behavior of this AJAX are:

Insert data to database - success
Show alert
Open new page for print purpose.
Refresh current page to a new form.

You have to tell us what the current and expected behavior is. We don't know what "doesn't work" implies. — Felix Kling, Dec 20 '16 at 01:50
well, alert is not appear. Not opening new page for print and nor refreh current page. — ashura91, Dec 20 '16 at 01:51
`done/fail/always/then` are the options that should be used off of the deferred. `success` would be used as a parameter to the ajax. — Taplar, Dec 20 '16 at 01:51
And add an errror handler since calls are not always success. — epascarello, Dec 20 '16 at 01:55
Sounds to me that it doesn't call successfully - but managed to get whatever data you're sending it into the db before it failed... — Shadow, Dec 20 '16 at 02:18
Note also that the `window.open()` calls are likely to be blocked by the browser's popup blocker. — Barmar, Dec 20 '16 at 02:51

score 3 · Answer 1 · answered Dec 20 '16 at 01:52

3

The success is the name of the callback function and not the promise.

You should use:

$.ajax({
    type: "POST",
    url: "<?php echo site_url('con_product/ins_product'); ?>",
    data: data,
    success: function() {
        alert("Products list is ready to be printed");
        window.open("<?php echo site_url('con_product/print_product'); ?>","_blank");
        window.open("<?php echo site_url('con_product/form_product'); ?>","_self");
    }
});

Or the done promise:

$.ajax({
    type: "POST",
    url: "<?php echo site_url('con_product/ins_product'); ?>",
    data: data
}).done(function() {
    alert("Products list is ready to be printed");
    window.open("<?php echo site_url('con_product/print_product'); ?>","_blank");
    window.open("<?php echo site_url('con_product/form_product'); ?>","_self");
});

answered Dec 20 '16 at 01:52

Dekel

60,707
10
101
129

I use firebug and it says jquery undefined. jquery.form.js – ashura91 Dec 20 '16 at 02:05
So if you don't have jquery you can't use it :) make sure you loaded the jquery library from the right path. – Dekel Dec 20 '16 at 02:06
but why the data is inserted properly? – ashura91 Dec 20 '16 at 02:07
perhaps you have some other error somewhere else in your code and it caused you this – Dekel Dec 20 '16 at 02:09
@ashura91 Since you don't have jQuery loaded, `$("#f_product").on('submit',function(event){` doesn't do anything, so you're getting normal form submission. I assume the form's `action` URL is the same one you're sending the AJAX request to. – Barmar Dec 20 '16 at 02:53
It turns out that i have conflict in my jquery. so, I need to use another solution. – ashura91 Dec 21 '16 at 02:09

score 0 · Answer 2 · answered Dec 20 '16 at 01:53

0

I'm not sure if there is .success function. But you can try this:

$.ajax({
    type: "POST",
    url: "<?php echo site_url('con_product/ins_product'); ?>",
    data: data,
    success: function(){
        alert("Products list is ready to be printed");
        window.open("<?php echo site_url('con_product/print_product'); ?>","_blank");
        window.open("<?php echo site_url('con_product/form_product'); ?>","_self");
    }
});

answered Dec 20 '16 at 01:53

Logan Wayne

6,001
16
31
49

Check my answer – Dekel Dec 20 '16 at 01:54
@Dekel - Upon checking of the documentation, there is, but not anymore recommended because that feature is already deprecated – Logan Wayne Dec 20 '16 at 01:54

score 0 · Answer 3 · answered Dec 20 '16 at 01:53

According to http://api.jquery.com/jquery.ajax/

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

What if your replace success with done?

Otherwise, success should be a property of the object you throw into $.ajax({...}) with the anonymous function as its value.

Why is code in AJAX success call is not working?

3 Answers3

Linked