CODEWITHSUNDEEP
javascriptjqueryajax
Robin
Robin

Reputation: 126

How to define a variable after process in ajax?

I use an ajax process to modify user's state on an index.php file.

It works but I would like to color my div function of the user's state

My code:

function recupstatut() {
  $.post('recup.php', function(data) {
    $('.cont2').html(data);

    var content = document.querySelector('#cont2');
    var status2 = content.innerHTML;

    if (status2 == "En-ligne") {
      content.style.backgroundColor = "#4CAF50";
    } else {
      content.style.backgroundColor = "#f44336";
    }
  });
}

setInterval(recupstatut, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="cont2" id="cont2">
</div>

The condition always applies the else state:

content.style.backgroundColor = "#f44336";

I think the problem comes from var status2 =

How can I fix this?

Upvotes: 2

Views: 100

Answers (4)

Faraz PV
Faraz PV

Reputation: 522

HTML

<div class="cont2" id="cont2"></div>

SCRIPT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
function recupstatut() {
   $.post('recup.php', function(data) {
      console.log(data);
      var status2 = data.trim();
      console.log(status2);
      $('.cont2').html(status2);
      if (status2 == "En-ligne") {
         content.style.backgroundColor = "#4CAF50";
      } else {
         content.style.backgroundColor = "#f44336";
      } 
  });
}
setInterval(recupstatut, 1000);
</script>

what went wrong is that you imported jquery file after calling the function

so make the import in top of calling your function

your mistake was that you made the import after calling the function, that is why you got undefined error.

Upvotes: 5

Sunusi Mohd Inuwa
Sunusi Mohd Inuwa

Reputation: 74

THere many ways to accomplish this. You can use the $.post() function by sending the $.post as a variable. Example:

// Fire off the request to /form.php
request = $.post({
    url: "recup.php",
});

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
    // Log a message to the console
    console.log("Hooray, it worked!");
});

// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
    // Log the error to the console
    console.error(
        "The following error occurred: "+
        textStatus, errorThrown
    );
});

// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
    // Reenable the inputs
    $inputs.prop("disabled", false);
});

Or (i recommended) use the $.ajax({}) function as this way: 

// Fire off the request to /form.php
$.ajax({
    url: "recup.php",
    type: "post",
    data: { //specify data to be sent },
    beforeSend:function(){ 
      /* before sending the data to the other page 
         may be a loader to show waiting animation
       */
    },
    success:function(status){
      /* this will check the response received from the previous page 
         and the determine the below conditions 
       */
        if (status == "En-ligne") {
        content.style.backgroundColor = "#4CAF50";
        } else {
          content.style.backgroundColor = "#f44336";
        }
    }
});

Upvotes: -1

Robin
Robin

Reputation: 126

function recupstatut(){
        $.post('recup.php',function(data){
			console.log(data);
            $('.cont2').html(data);
			
			var status2 = data;
	if (status2 == "En-ligne") {
      $('#cont2').css("backgroundColor","#4CAF50");
    } else {
      $('#cont2').css("backgroundColor","#f44336"); 
    }

  });

}
	

	


    setInterval(recupstatut,1000);

nothing appear in my div now with the console.log...

Upvotes: 0

A.D.
A.D.

Reputation: 2372

As you say you echo string in your page then you can check this one directly from the data as per below code.

Script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$(function(){
    function recupstatut() {
      $.post('recup.php', function(data) {

        $('#cont2').html(data); // If the data return from the php page as a string then you can compare it directly.

        if (data == "En-ligne") {
          $('#cont2').css("backgroundColor","#4CAF50");
        } else {
          $('#cont2').css("backgroundColor","#f44336"); 
        }

      });

    }

    setInterval(recupstatut, 1000);
});

</script>

HTML: 

<div class="cont2" id="cont2"></div>

Upvotes: 0

Related Questions