Posting JQuery-UI form values

Question

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?

Is there any reason not to use a form element inside the html? — Philipp M
– Philipp M, Commented May 24, 2013 at 8:10
@PhilippM Yes: I don't know how to do that, and I didn't know it was better that way — Roman Rdgz
– Roman Rdgz, Commented May 24, 2013 at 10:23
I see what you mean, withe markers that stay over the Datepicker. Unfortunately I don't know what you could do about it. Maybe you should create another question just about it. — Philipp M
– Philipp M, Commented May 24, 2013 at 13:15

Philipp M · Accepted Answer · 2013-05-24 08:26:40Z

1

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.

answered May 24, 2013 at 8:26

Philipp M

1,8797 gold badges27 silver badges39 bronze badges

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

1 Comment

Roman Rdgz Over a year ago

Thanks! I had to install firebug for firefox: either firebug lite for chrome or the firefox web console didn't show the post request

Collectives™ on Stack Overflow

Posting JQuery-UI form values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related