Message:

let idArrow = 1; //the value here is a number ID from DB



let pos_rot = -2.42403827195133; //if I pass a value directly here 

//it works fine like in the live code

//while if I pass the value retrieved from DB through AJAX request in the response

//it behave as I described in the description of the problem



let newArrow = `<div id="` + idArrow + `" class="arrow arrow_` + idArrow + `" style="position:absolute;

       top: 100px;

       left: 100px;

       height: 100px;

       cursor: pointer;"></div>`;







var params = {

  //starting rotation angle

  radians: pos_rot //THIS OPTION GIVES ME PROBLEMS STARTING FROM SECOND ROTATION

                  //SO IT FREEZES ON ANGLE 0



} //close params



$(newArrow).draggable().rotatable(params).appendTo('#body');

.arrow {

  position: relative;

  width: 3px;

  height: 100px;

  background-color: #ff3c00;

  z-index: 95;

}



.arrow::after {

  content: '';

  position: relative;

  top: -40px;

  left: -2.5px;

  width: 0;

  height: 0;

  z-index: 96;

  border-style: solid;

  border-width: 0 4px 12px 4px;

  border-color: transparent transparent #ff3c00 transparent;

}



.ui-rotatable-handle {

  position: relative;

  height: 12px;

  width: 12px;

  cursor: pointer;

  background-image: url(jQuery-UI-Rotatable-Elements/rotate.png);

  background-size: 100%;

  left: -3px;

  bottom: -3px;

  z-index: 97;

}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>



<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/godswearhats/[email protected]/jquery.ui.rotatable.css">

<script src="https://cdn.jsdelivr.net/gh/godswearhats/[email protected]/jquery.ui.rotatable.min.js"></script>



<body id="body">

</body>

My Answer:
It seems like the issue might be related to the way the value is retrieved from the database and passed to the `radians` option in the `rotatable` function.

One thing you can try is to make sure that the value retrieved from the database is being parsed correctly as a float number before passing it to the `radians` option. You can use `parseFloat()` to ensure that the value is being treated as a number.

Here's an example of how you can modify the code to parse the value before passing it to the `radians` option:

javascript

let pos_rot = parseFloat(response.pos_rot); //parse the value as a float number



var params = {

  radians: pos_rot

}



$(newArrow).draggable().rotatable(params).appendTo('#body');

Make sure that `response.pos_rot` is the correct property that holds the rotation angle value retrieved from the AJAX response.

By ensuring that the value is correctly parsed as a float number, you can avoid any potential issues with the rotation angle freezing or behaving unexpectedly.

Rate this post

5 of 5 based on 6767 votes

John Davidson

javascript - JQuery UI Rotatable, problems with radians option

Rate this post

Comments