Submit data to server with AJAX

Question

Hi guys I'm working on a mobile version of a website and I was wondering how can the following be done.

The code below takes values from a button data attributes and loads the values in a modal and the code is stored in a file with name file1.js for the example. The button itself is located in a panel-dropdown which is a template filled with a for each cycle in a jade template containing information for separate objects pulled from database.

$('.editObjectButtonMobile').click(function (e){
        let modal = $('#editTipsterModalMobile');
        let id = $(this).attr('data-id');
        let name = $(this).attr('data-name');
        let description = $(this).attr('data-description');
        let balance = $(this).attr('data-balance');
        let units = $(this).attr('data-units');
        //modal.modal('show');
        $(modal).on('show.bs.modal', function(e){
            let editableOutput = modal.find('.editableContainer > .editableOutput');
            let editableInput = modal.find('.editableContainer > .editableInput');

            let editableNameOutput = $(modal).find('.objectTextContainer > .objectNameContainer.editableContainer > .editableOutput');
            let editableNameInput = $(modal).find('.tipsterTextContainer > .objectNameContainer.editableContainer > .editableInput');
            let editableDescriptionOutput = $(modal).find('.objectTextContainer > .objectDescriptionContainer.editableContainer > .editableOutput');
            let editableDescriptionInput = $(modal).find('.objectTextContainer > .objectDescriptionContainer.editableContainer > .editableInput');
            let editableFundsOutput = $(modal).find('.objectFundsContainer.editableContainer > .editableOutput');
            let editableFundsInput = $(modal).find('.objectFundsContainer.editableContainer > .editableInput');
            let editableUnitsOutput = $(modal).find('.objectUnitsContainer.editableContainer > .editableOutput');
            let editableUnitsInput = $(modal).find('.objectUnitsContainer.editableContainer > .editableInput');

            $(editableNameOutput).html(name);
            $(editableDescriptionOutput).html(description);
            $(editableFundsOutput).html(balance);
            $(editableUnitsOutput).html(units);
            $(editableNameOutput).on('click', function(){
                $(this).hide();
                //$('.changeBtn').hide();
                //$('.saveBtn').removeClass('hidden');
                $(editableNameInput).val(editableNameOutput.html());
                $(editableNameInput).show();
            });
            $(editableDescriptionOutput).on('click', function(){
                $(this).hide();
                //$('.changeBtn').hide();
                //$('.saveBtn').removeClass('hidden');
                $(editableDescriptionInput).val(editableDescriptionOutput.html());
                $(editableDescriptionInput).show();
            });
            $(editableFundsOutput).on('click', function(){
                $(this).hide();
                //$('.changeBtn').hide();
                //$('.saveBtn').removeClass('hidden');
                $(editableFundsInput).val(editableFundsOutput.html());
                $(editableFundsInput).show();
            });
            $(editableUnitsOutput).on('click', function(){
                $(this).hide();
                //$('.changeBtn').hide();
                //$('.saveBtn').removeClass('hidden');
                $(editableUnitsInput).val(editableUnitsOutput.html());
                $(editableUnitsInput).show();
            });
                $(editableInput).blur(function(){
                        $(editableInput).hide();
                        //$('.saveBtn').addClass('hidden');
                        //$('.changeBtn').show();
                        console.log(editableInput.val());
                        $(editableOutput).val(editableInput.val());
                        (editableOutput).html(editableOutput.val());
                        //console.log($(editableOutput).val());
                        $(editableOutput).show();
                    })
        });
})

The modal information can be edited when the user clicks on it using the following code which is separated in another file file2.js for the example.

function clickedEditable(container,opts){
let numberPattern = /\d+/g;
let value = $(container).find('.editableInput').val().match(numberPattern);
$(container).off('click');

$(container).find('.editableOutput').hide();
$(container).find('.editableInput').show();
if ($(container).find('.editableInput').is('select')) {
     .. do something
} else {
    var element = $(container).find('.editableInput');
    element.focus();
    element.off('blur');
    element.unbind('blur');
    element.unbind();
    element.blur(function () {
        showEditableModal(container, opts);
    });
}

And after a button is pressed when in the modal the edited/unedited information is submited to the server with the following AJAX

$.ajax({
url: '/' + opts.route + '/' + opts.prop,
data: {
    id: opts.id,
    value: value,
    oddsValues: odds,
    unitsMode: opts.unitsMode,
    eventPL: eventPL,
    otherObjectID: otherObjectId,
    objectid: objectid,
    oldPnl:opts.oldPnl
},
error: function (msg) {

    var $alert = $('.track .row:first .alert-warning');
    $alert.html(msg.responseText);
    $alert.show();
    setTimeout(function () {
        $alert.slideUp(300);
    }, 3000);
    $('#editableModal').modal('hide');
},
success: function (result) {
    console.log('success');
    console.log(result);
     if (result.state == 'success') {
        outputContainer.html(value);
        $('#editableModal').modal('hide');
     }

     switch(opts.prop)
     {
     case 1:

     case 2:

     etc..

     }
     })

here each case represents the value of the property which is edited and then submitted to server.

the jade file has the following structure for the different props:

.objectDescriptionContainer.editableContainer(onclick="clickedEditable(this, {'route':'someroute/object', 'prop': 'description'})")

My question is : How can i use the logic from file2.js and the ajax request to send the data to the server ?

Tushar Acharekar · Accepted Answer · 2018-02-12 08:58:02Z

1

Use data-remote="true" with jquery ajax

data-remote="true" will submit form asynchronously

<a id="remote" data-remote="true" data-type="json" href="/project/4/request_access">Request Access</a>


$(document).ready(function() {
    $("#remote").on("ajax:success", function (e, data, status, xhr) {
        console.log( xhr.responseText )

     });
    $("#remote").on("ajax:error", function(e, xhr, status, error) {
        console.log ("ERROR");
    });
});

answered Feb 12, 2018 at 8:58

Tushar Acharekar

9108 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Submit data to server with AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related