ajax post not working to new page in mvc

Question

I would like to post the result of a sortable list to another page using an ajax request. How do I do this. Right now it is working on the same page when i set it to a document.getElementbyId but I am not familiar with how ajax post request work. Do I need something on the other page to retentive the information that's posted?

    $("#sortable").sortable({
        update: function (event, ui) {
            var order = $(this).sortable('serialize');


        }
    }).disableSelection();
    $('button').on('click', function () {
        var r = $("#sortable").sortable("toArray");
        var a = $("#sortable").sortable("serialize", {
            attribute: "id"
        })

        $.ajax({
            data: (r,a),
            type: 'POST',
            url: '/home/print_results'
        });

        ;

            console.log(r, a);

            $('#selectfeatures').html('<p>' + r, a + '</p>') = sessionStorage.rank;



    });

here is the html

  <ul id="sortable" style="margin-top: 20px;margin-left:190px;">

        <li id="fit" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>FIT</li>

        <li id="durability" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>DURABILITY</li>

        <li id="framematerial" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>FRAME MATERIAL</li>

        <li id="lenstype" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>LENS TYPE</li>

        <li id="lightweight" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>LIGHT WEIGHT</li>

        <li id="style" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>STYLE</li>

        <li id="lensthinness" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>LENS THINNESS</li>

        <li id="lenscolor" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>LENS COLOR</li>

    </ul>

Answer 1

Depending on what you want to do, you need to add more lines to your ajax call. Your current ajax call just sends the data to the url provided:

$.ajax({
    data: (r,a),
    type: 'POST',
    url: '/home/print_results'
});

If you look within the console > network tab, you should see a call to /home/print_results. That call should have your data, meaning the ajax post is doing what you asked it to do (I would only pass r, since it should have all the data from your form).

The next step comes in the form of "handling the data" passed to home/print_results. Code within that page would add it to your db, or maybe do some calculation and spit back the result to same function so you can handle it on the same page.

I assume you just want to show those values on a new page, and not save them, so you dont really need to do an ajax call for that. Opening a new window with the injected html should work out (Check out the open function in javascript).

If what you need is to gather some kind of result or message out of that page you are calling, you need to add a "done" parameter to the call:

$.ajax({
    data: r,
    type: 'POST',
    url: '/home/print_results',
    done: function(result){
    // enter code here
    }
});

Here is where you would get your result information from the post you just made.

Remember, POST is essentially passing data. how you handle said data is up to the code getting the post.

As far as saving the information, it would depend on your application config. You need to pass the needed form data to the location where your application can handle it. In the following case of nodeJS you can see that the request object has a body parameter where you could handle the data.

app.post('/save', function(req, res) {
  console.log(req.body.data);
  var data = new Data({name: 'Name', age: 25});
  data.save();
});

on the above example we are using a mongodb model. Again, it depends on your MVC framework what the save call will be. From there you would just need to grab the data back from the db into the page call you want displaying this information.