CODEWITHSUNDEEP
javascripthtmljqueryruby-on-railsruby
Vincent Wittek
Vincent Wittek

Reputation: 53

calling submit() and reload() on my form button doesnt work

I have a form with a slider with which somebody can rate a picture. The form should be submitted when the slider is dragged, so "onmousup". This works fine. However, the page should be refreshed so that the rating that the user did is already submitted. This all happens on the index page so that location where the user scrolled to, should not be lost. I tried to make the slider like this:

<%= f.range_field :score, class:"form-control-range slider", id:"formControlRange", onMouseUp:"submit(); reload(); " %>
...
<script>
  function reload() {
    console.log("hi");
    location.reload;
  }
</script>

This way I hoped that when the onMouseUp event happens, the page is first submitted and the page then reloaded, so that the rating the user did is displayed. If I have the slider without the "reload()" function then the form is submitted, but I have to reload manually so that the changes can be displayed. Somehow, calling having the slider like this doesnt make both functions happen. Only the function that is called first is executed. I have seen in other threads that having the slider like onMouseUp:"submit() && reload()", but this also doesnt work for me... Do you have a way to make this work? Or do you have an idea of how the reload thing would be done better. Thank you so much for your help! Vincent

UPDATE:

I have looked up a different way, and it actually works when I set a timer for the reload function like this:

  function reload() {
    console.log("hi");
     setTimeout(function() 
  {
    location.reload();  //Refresh page
  }, 50);
  }

Funny thing now is that it works 50 ms, but not with 5 ms. This points to that it is somehow related with the order. Does anybody know how to tell the code to only reload the page AFTER the form has been submitted?

Upvotes: 1

Views: 79

Answers (2)

Lajos Arpad
Lajos Arpad

Reputation: 76426

location.reload is a function, you need to call it as a function:

  function reload() {
    console.log("hi");
    location.reload();
  }

But this will not fix the problem by itself, because you are doing a submit and then reload. What if the reload is faster than the operation performed on submit? Then your old state is reloaded. What if the submit operation fails?

If we assume that you keep your current approach, then you need to do the submit and synchronize in some way before you reload (or rerender). If there is an error, display an error.

You can do this with AJAX. Or, if you prefer post and submit, then your server could resend the output as a response to post, which is pretty well handled by the browsers.

I personally prefer to do an AJAX request, handle the response and refresh the parts of the UI that are to be changed.

EDIT

This is how AJAX request can be sent:

function sendRequest(type, url, callback, async, params) {
    if (async !== false) async = true;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = callback;
    xhttp.open(type, url, async);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(params);
}

call this function, like:

sendRequest("POST", "yoururl", reload, true, yourparams);

Where reload is your function modified as above and yourparams is a set of parameters, like "firstparam=firstvalue&secondparam=secondvalue".

Upvotes: 1

Ar Rakin
Ar Rakin

Reputation: 542

You've typed location.reload, missing () to call a method.

Please post the code of submit() function.

Upvotes: 0

Related Questions