passing several parameters through url to the same page in ASP MVC & Javascript

Question

I am new to web issues and asking for advice. What I am trying to do is here:

1 - There is a Datepicker in the page with several javascript posts

2 - When the page is opened first time, the post methods should be called with initial values

3 - When I changed the date interval from Datepicker and press Submit button, the page should refresh with the new values and so the posts should be triggered again with the new values.

4 - When the page is refreshed with new values, I want the datepicker input parts (there are 2 of them) to show the updated values.

5 - Currently, there are no initial values. Also, the 4th item on this list is missing.

I am aware that there are a couple of basic things missing here, but I can't find out through the questions because of not knowing how the system works. Can anyone please fix my code a little?

Here is Datepicker and its JS part:

<li>
    <div class="input-daterange input-group" id="datepicker" style="margin-top: 10px; align-content:center">
        <input type="text" class="input-sm form-control" id="startDate" value="07/01/2015" maxlength="10" name="start" style="width:90px" />
        <span class="input-group-addon">ile</span>
        <input type="text" class="input-sm form-control" id="endDate" value="07/05/2015" maxlength="10" name="end" style="width:90px" />
    </div>
</li>
<li>
    <button id="goster" type="button" class="btn btn-default" onclick="goster()"
            style="background-color:#C71F45;color:white;
            margin-top:10px; margin-left:10px">
            Göster
    </button>
</li>

<script>
   function goster() {
        startDate = document.getElementById('startDate').value;
        endDate = document.getElementById('endDate').value;

        var url = "http://localhost:50523/Home/Index?startDate=" + startDate + "&endDate=" + endDate;
        window.location.replace(url);
    }
</script>
<script>
    $(document).ready(function () {
        var QueryString = function () {
            // This function is anonymous, is executed immediately and 
            // the return value is assigned to QueryString!
            var query_string = {};
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                // If first entry with this name
                if (typeof query_string[pair[0]] === "undefined") {
                    query_string[pair[0]] = decodeURIComponent(pair[1]);
                    // If second entry with this name
                } else if (typeof query_string[pair[0]] === "string") {
                    var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
                    query_string[pair[0]] = arr;
                    // If third or later entry with this name
                } else {
                    query_string[pair[0]].push(decodeURIComponent(pair[1]));
                }
            }
            return query_string;
        }();

        $('.input-daterange').datepicker({
            format: "mm/dd/yyyy",
            autoclose: true,
            language: "tr",
            orientation: "top auto",
            todayHighlight: true
        });

        var startDate = QueryString.startDate;
        var endDate = QueryString.endDate;

        $.post(
            "/api/getUserTotalExp?startDate=" + startDate + "&endDate=" + endDate,
            { data: {} },
            function (data) {
                $('#totaluserexp').html(data + " saat");
            }
        );

        $.post(
             "/api/getUserExpDaily?startDate=" + startDate + "&endDate=" + endDate,
             { data: {} },
             function (data) {
                 ...
             }
        );
    });
</script>

Answer 1

$.post("/api/getUserExpDaily", 
  {
    'startDate': startDate,
    'endDate': endDate
  },
  function (data) {
    ....
  });

EDIT: data: { ... } was a typo. Oh well.

This will alway jQuery to format your dates. Now if you server is expecting JSON then it's a slightly different problem. However, the code above should work for your case.

https://developer.chrome.com/devtools The Network tab will allow you to inspect your post. If you looked for the line getUserExpDaily POST . Then you can inspect the values, format, and response from your code.

Answer 2

1. Only need a single onReady (you did that)
2. Put the code in the code and not in the markup (goster() call)
3. Since $.post is really an ajax shortcut, I will break that out a bit so we can deal with the data a bit more elegantly perhaps. (I used it to put the .done promise on the jqXHR to use (runs when the ajax completes with success)
4. Odd that the datepicker is not on the inputs? Perhaps I do not know something but I would put them ON the inputs (how you handle that in reality is up to you.
5. Get the CSS/style out of the markup (leave that to you)
6. Address the issue with the post/page refresh - put that in a cookie (google that, suggest the $.cookie plugin perhaps?)

Markup and code:

<li>
    <div class="input-daterange input-group" id="datepicker" style="margin-top: 10px; align-content:center">
        <input type="text" class="input-sm form-control" id="startDate" value="07/01/2015" maxlength="10" name="start" style="width:90px" /> <span class="input-group-addon">ile</span>

        <input type="text" class="input-sm form-control" id="endDate" value="07/05/2015" maxlength="10" name="end" style="width:90px" />
    </div>
</li>
<li>
    <button id="goster" type="button" class="btn btn-default" style="background-color:#C71F45;color:white;
            margin-top:10px; margin-left:10px">Göster</button>
</li>

and code:

$(document).ready(function () {
    $('#goster').on('click', function () {
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        goster(startDate, endDate);
    });

    $('input.input-sm').datepicker({
        format: "mm/dd/yyyy",
        autoclose: true,
        language: "tr",
        orientation: "top auto",
        todayHighlight: true
    });

    function goster(startDate, endDate) {
        PostUserExp(startDate, endDate);
    }

    function PostUserExp(startDate, endDate) {
        //var startDate = $('#startDate').val();
        //var endDate = $('#endDate').val();
        var myajaxExp = $.ajax({
            url: "/api/getUserTotalExp",
            data: {
                "startDate": startDate,
                    "endDate": endDate
            }
        });
        myajaxExp.done(function (data, textStatus, jqXHR) {
            // what to do with data
            $('#totaluserexp').html(data + "saat");
        });
        var myajaxDaily = $.ajax({
            url: "/api/getUserExpDaily",
            data: {
                "startDate": startDate,
                    "endDate": endDate
            }
        });
        myajaxDaily.done(function (data, textStatus, jqXHR) {
            // what to do with data
            $('#totaluserexp').html(data + "saat");
        });
    }

    var startDate = $('#startDate').val();
    var endDate = $('#endDate').val();
    PostUserExp(startDate, endDate)
});