Home / Questions / 123605
Accepted
Otto
Asked: 2020-12-09 18:55:11 +0800 CST 2020-12-09 18:55:11 +0800 CST

How to animate process based on value received from PHP to jQuery?

  • 772

By PHPcounting the steps and adding them in a session to avoid going back to the beginning in case of updating or refreshing the page, the value is obtained through the following variable$step

<?php
  session_start();

  if ( !empty($_SESSION['datos_form']['__step__'])) {
    $step = $_SESSION['datos_form']['__step__'];
  } else {
    $step = '1';
  }

?>

The value of the variable is received in the javascriptjQuery code .

show_step(<?= $step; ?>);

Which would be equal to: (for the default value received)

show_step(1);

Each step of the process is shown according to the value received from PHPthe code , Javascriptas I had already been mentioning.

Without the need to add additional controls like the following:

current = $(this).parent();
next = $(this).parent().next();

To then know through the animation in which step of the process the form is.

enter image description here

The problem is in the followingfunction

function animacion(caso){
  $( ".cartanime" ).animate({ "left": "+=250px" }, "slow" ,function(){
    $(".progressbar li").addClass("active");  
  });
};

Activate all of them liwith the class actveby continuing with the steps of the wizard and by continuing with the rest of the steps, or by going backwards, activethey are activated.

And the iconoone of the cart that slides on the progress bar, increases leftby continuing in the same way and when going backwards, everything also increases without control.

My code:

$(function() {
    show_step(<?= $step; ?>);        
});

// funcion animar proceso
function animacion(caso){
  $( ".cartanime" ).animate({ "left": "+=250px" }, "slow" ,function(){
    $(".progressbar li").addClass("active");  
  });
};

// funcion para guardar los datos del form y cambiar el paso
function show_step(step){
    var data = $( "#form" ).serialize();
    var url = 'saveTemp.php?step=' + step;
    
    // realizamos la peticion ajax
    $.ajax({
      type: "POST",
      url: url,
      data: data
    })
    .done(function( resp ) {
        // si todo va bien
        // ocultamos los pasos
        $('.step').css( "display", "none" );
        // mostramos el paso correspondiente
        $('#step'+step).fadeIn("slow");
        //movemos la animación al paso correspondiente
        animacion(step);
    });
};
.container {
  width: 100%;
  padding-top: 73px;
}

.progressbar li {
  list-style-type: none;
  float: left;
  width: 33.33%;
  position: relative;
  text-align: center;
}

.progressbar li > * {
  position: relative;
  padding-bottom: 20px;
  display: inline-block;
  font-size: 1.4rem;
  color: #2c3f4c;
  top: -45px;
}

.progressbar li:before {
  content: '';
  width: 12px;
  height: 12px;
  display: block;
  text-align:  center;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #edeff0;
}
  
.progressbar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #edeff0;
  top: 4px;
  left: -50%;
  z-index: -1;
}
  
.progressbar li:first-child:after {
  content: none;
}
  
.progressbar li.active {
  color: green;
}
  
.progressbar li.active:before {
  background-color: green;
}
  
.progressbar li.active + li:after {
  background-color: green;
}

.cartanime {
  position: absolute;
  height: 30px;
  background: url(https://media.dermstore.com/images/style/bootstrap3/img/cart-icon.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 30px;
  top: 73px;
  left: 450px;
}
<div class="container">
  <ul class="progressbar">
    <li class="active"><span>Step 1</span></li>
    <li><span>Step 2</span></li>
    <li><span>Step 3</span></li>
  </ul>
  <div class="cartanime"></div>
</div>

<form id="form" action="procesar.php">
  <div id="step1" class="step">
  	<h1>Paso 1</h1>
  	<a data-ref="#" onclick="show_step(2)">continuar</a>
  </div>
  <div id="step2" class="step">
  	<h1>Paso 2</h1>
  	<a data-ref="#" onclick="show_step(1)">Atras</a>
    <a data-ref="#" onclick="show_step(3)">continuar</a>
  </div>
  <div id="step3" class="step">
  	<h1>Paso 3</h1>
  	<a data-ref="#" onclick="show_step(2)">Atras</a>
    <button>Enviar</button>
  </div>
</form>

jquery

2 Answers

  1. I think it's really going to make it impossible not switchto use unless you use some other parameters/controls/logic/operations, inside the function: function animacion(caso){}where you know when to go back to do a -1and when to continue to do a +1I don't think it can be used something like that:

    -caso +caso

    But he raised the question for discussion...

    The parameter should be taken into account (caso)in the same way as your previous animation (edit history) sprite usingswitch

    Example:

    function animacion(caso){
    switch(caso) {
        case 1:
          $( ".cartanime" ).animate({ "left": "450px" }, "slow" ,function(){
            $(".progressbar li:nth-child(1)").addClass("active");
          });
          break;
        case 2:
          $( ".cartanime" ).animate({ "left": "900px" }, "slow" ,function(){
            $(".progressbar li:nth-child(2)").addClass("active");
          });
          break;
        case 3:
          //
          break;
        // -> # code...
    };
};

    Now you just have to change the values ​​of cartanimewhere you want to display it in each respective step.

    And if you are going to add more steps, change the numerical value (2)of the following example CSS condition li:nth-child(2)in the third lione that you have in your wizard add as follows: li:nth-child(3)and so on, between more steps, more are added in the wizard .

    • 2
  2. Best Answer

    I'm going to formulate my comments in an answer that I think will be more comfortable to see.

    The problem is only in the animation function, which must lead to the correct step and currently activates all of them at once. I would change it to:

    function animacion(caso){
  var pixels = (caso * 250) + "px";

  $(".progressbar li.active").removeClass("active");
  
  $( ".cartanime" ).animate({ "left": pixels }, "slow" ,function(){
    for(var i = 1; i <= caso; i++) {
       $(`.progressbar li:nth-child(${i})`).addClass("active");  
    }
  });
};

    • 1