jQuery Validation Plugin - can't chain function after successful validation

Question

So all I want to do is that this part of code:

$(document).ready(function () { //predaj formu i automatski crtaj graf
    $('#myform').on('submit', function (e) {
      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'upit.php',
        data: $('#myform').serialize(),
        success: function () {
            var dataPoints = [];
            $.getJSON("rez.json", function(data) { //uzmi JSON za tocke grafa
                $.each(data, function(key, value){
                    dataPoints.push({x: value[0], y: parseInt(value[1])});
                });

                var chart = new CanvasJS.Chart("chartContainer",{
                    zoomEnabled: true,
                    animationEnabled: false,
                    axisY: {
                        title: "Power received"
                    },
                    axisX: {
                        title: "Distance"
                    },
                    data: [{
                        type: "line",
                        dataPoints : dataPoints,
                    }]
                });
                chart.render();
            });

            $.ajax({ //vrati rezultat
                url:"novi.json",
                success:function(result){
                    $("#disabledInput").val(result);
                }
            });        
        }
    });
});
});

execute

after successful submission validated by this part of code:

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin
    rules: {
        n1: {
            required: true,
            email: true
        },
        n2: {
            required: true,
            minlength: 5
        }
    },
    errorPlacement: function(error, element) {
        error.appendTo('#nameError');
    },

    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

});

I just can't chain it properly and I know that this two are separated scripts so I need them to chain somehow. Thanks!

Also I need to make ajax submit (first code) code separate as I want to call it with many other functions (play is to add a slider so I submit itwith every single change of slider etc etc...) but I'm not sure how

EDIT: I did it, here is the answer

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin
rules: {
    n1: {
        required: true,

    },
    n2: {
        required: true,

    }
},
errorPlacement: function(error, element) {
    error.appendTo('#nameError');
},

submitHandler: function (form) {


      $.ajax({
        type: 'post',
        url: 'upit.php',
        data: $('#myform').serialize(),
        success: function(){
            var dataPoints = [];
            $.getJSON("rez.json", function(data) { //uzmi JSON za tocke 
grafa
                $.each(data, function(key, value){
                    dataPoints.push({x: value[0], y: parseInt(value[1])});
                });

                var chart = new CanvasJS.Chart("chartContainer",{
                    zoomEnabled: true,
                    animationEnabled: false,
                    axisY: {
                        title: "Power received"
                    },
                    axisX: {
                        title: "Distance"
                    },
                    data: [{
                        type: "line",
                        dataPoints : dataPoints,
                    }]
                });
                chart.render();
            });


        }
    });
}
});

});

If you solved the problem yourself, post the solution in an answer, not in the question. — Barmar, Aug 15 '17 at 20:50

score 0 · Accepted Answer · answered Aug 15 '17 at 21:04

I did it, here is the answer

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin
rules: {
    n1: {
        required: true,

    },
    n2: {
        required: true,

    }
},
errorPlacement: function(error, element) {
    error.appendTo('#nameError');
},

submitHandler: function (form) {


      $.ajax({
        type: 'post',
        url: 'upit.php',
        data: $('#myform').serialize(),
        success: function(){
            var dataPoints = [];
            $.getJSON("rez.json", function(data) { //uzmi JSON za tocke 
grafa
                $.each(data, function(key, value){
                    dataPoints.push({x: value[0], y: parseInt(value[1])});
                });

                var chart = new CanvasJS.Chart("chartContainer",{
                    zoomEnabled: true,
                    animationEnabled: false,
                    axisY: {
                        title: "Power received"
                    },
                    axisX: {
                        title: "Distance"
                    },
                    data: [{
                        type: "line",
                        dataPoints : dataPoints,
                    }]
                });
                chart.render();
            });


        }
    });
}
});

});

jQuery Validation Plugin - can't chain function after successful validation

1 Answers1