CODEWITHSUNDEEP
jqueryjquery-ui
Roman Rdgz
Roman Rdgz

Reputation: 13254

Posting JQuery-UI form values

I have built a small form with jquery-ui with a datepicker, a pair of sliders, an spinner and a button. When the button is pushed, some values from the form should be sent to server with a POST. But I'm watching at Firefox Web Developer Console and there is no POST happening. What am I doing wrong?

I am using Django as web server, and my html is this:

<html>
<head>  
    <script src="{{STATIC_URL}}js/jquery-1.9.1.js"></script>
    <script src="{{STATIC_URL}}js/jquery-ui-1.10.3.custom.js"></script>
    <link rel="stylesheet" href="{{STATIC_URL}}css/jquery-ui-1.10.3.custom.css">

    <script>
    // DatePicker function:
    $(function() {
        var today = new Date()
        $( "#id_startDate" ).datepicker({
            minDate: today,
            onSelect: function(selectedDate) {
                var option = this.id == "id_startDate" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
        });
    });

    // Interval slider function:

    $(function() {
        var currentHour = new Date().getUTCHours()
        $( "#id_interval" ).slider({
          range: true,
          min: 0,
          max: 72,
          values: [ currentHour, currentHour+48 ], // By default from current hour 1st day to same hour last day
          slide: function( event, ui ) {
            var startDay = Math.floor($( "#id_interval" ).slider( "values", 0) / 24) + 1
            var startHour = $( "#id_interval" ).slider( "values", 0) % 24
            var endDay = Math.floor($( "#id_interval" ).slider( "values", 1) / 24) + 1
            var endHour = $( "#id_interval" ).slider( "values", 1) % 24

            $( "#amount" ).val( "From " + startHour + ":00h day " + startDay +
             " to " + endHour + ":00h day " + endDay + " (UTC)");
          }
        });

        $( "#amount" ).val( "From " + currentHour + ":00h day 1 to " + currentHour + ":00h day 3 (UTC)");
    });

    // Threshold spinner selector:
    $(function() {
    var id_threshold = $( "#id_threshold" ).spinner();
        id_threshold.spinner( "value", 15 );
        id_threshold.spinner( "option", "min", 0 );
        $( "button" ).button();
    });

    // Movie player slider:
    $(function() {
        $( "#player-slider" ).slider({
          range: "min",
          value: 0,
          min: 0,
          max: 1000,
          slide: function( event, ui ) {
            //$( "#amount" ).val( "$" + ui.value );
          }
        });
        // Modify this line to show somehow the current displayed prediction hour
        //$( "#amount" ).val( "$" + $( "#player-slider" ).slider( "value" ) );
    });

    // Play button
    $( "#id_playButton" ).click(function() {
        var postdata = {
            'startdate': $("#id_startDate").datepicker("getDate"),
            'starthour': $("#id_interval").slider("values", 0),
            'endhour': $("#id_interval").slider("values", 1),
            'threshold': $("#id_threshold").val()
        }
        $.post('/vpl/', postdata)
    });

    </script>
</head>
<body>

<p>Start Date: <input type="text" id="id_startDate"></p>
<p>
    <label for="amount">Interval:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<p> <div id="id_interval"></div> </p>

<p>
  <label for="id_threshold">Threshold:</label>
  <input id="id_threshold" name="value" />
</p>

<p> <div id="player-slider"></div> </p>

<p>
<p>
  <button id="id_playButton">Play</button>
</p>
</p>

</body>
</html>

Extra ball: When the Datepicker comes up, both slider markers stay over the Datepicker and it's a bit annoying. Any idea for that too?

Upvotes: 0

Views: 286

Answers (1)

Philipp M
Philipp M

Reputation: 1891

I pasted and copied your code to jsFiddle.

I tried it and when I click on the Play button, I can see in Firebug that a POST is send.

$( "#id_playButton" ).click(function() {
    var postdata = {
        'startdate': $("#id_startDate").datepicker("getDate"),
        'starthour': $("#id_interval").slider("values", 0),
        'endhour': $("#id_interval").slider("values", 1),
        'threshold': $("#id_threshold").val()
    }
    $.post('/vpl/', postdata)
});

These values have been posted:

  • endhour 56
  • startdate
  • starthour 8
  • threshold 15

Obviously the answer is 404 here.

So you're code seems fine to me.

Upvotes: 1

Related Questions