Web Analytics Made Easy -
StatCounter Change List Item from Array Color upon Save Function - CodingForum

Announcement

Collapse
No announcement yet.

Change List Item from Array Color upon Save Function

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Change List Item from Array Color upon Save Function

    Yesterday I posted a thread here to help compare positions in an array after users were able to drag items around. I have since figured that part out. I am now wanting the correct placements to be changed green when they are in the right spot after hitting save, and red when they are not in the right spot when hitting save. Right now I have put in some popup alerts to say if each item (out of 7) are in the wrong spot. I want to replace that with color changes instead.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Sortable - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <style>
      #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
      #sortable li span { position: absolute; margin-left: -1.3em; }
      </style>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
      <script> $(function() {
       $( "#sortable" ).sortable();
    });
    
    // Warn if overriding existing method
    if(Array.prototype.equals)
        console.warn("Overriding existing Array.prototype.equals. Possible causes: New API defines the method, there's a framework conflict or you've got double inclusions in your code.");
    // attach the .equals method to Array's prototype to call it on any array
    Array.prototype.equals = function (array) {
        // if the other array is a falsy value, return
        if (!array)
            return false;
    
        // compare lengths - can save a lot of time
        if (this.length != array.length)
            return false;
    
        for (var i = 0, l=this.length; i < l; i++) {
            // Check if we have nested arrays
            if (this[i] instanceof Array && array[i] instanceof Array) {
                // recurse into the nested arrays
                if (!this[i].equals(array[i]))
                    return false;
            }
            else if (this[i] != array[i]) {
                // Warning - two different object instances will never be equal: {x:20} != {x:20}
                return false;
            }
        }
        return true;
    }
    // Hide method from for-in loops
    Object.defineProperty(Array.prototype, "equals", {enumerable: false});
    
    function saveDisplayChanges()
    {
    
    
      var correct = ["0","1","2","3","4","5","6"];
      var order =  $("ul#sortable").sortable("toArray");
      if (correct.equals(order)) {
        alert("correct");
      }
    
    
    
      else if (correct[0] !== order[0] )
    
      {
        $oneA="The first one is wrong";
    //$("#" + $droppedID).css("background", "red");
          alert($oneA);
    
          if (correct[1] !== order[1] )
    
         {
             alert("The second one is wrong");
    
           }
    
           if (correct[2] !== order[2] )
    
          {
              alert("The third one is wrong");
    
            }
    
            if (correct[3] !== order[3] )
    
           {
               alert("The fourth one is wrong");
    
             }
    
            if (correct[4] !== order[4] )
    
           {
               alert("The fifth one is wrong");
    
             }
    
             if (correct[5] !== order[5] )
    
            {
                alert("The sixth one is wrong");
    
              }
    
              if (correct[6] !== order[6] )
    
             {
                 alert("The seventh one is wrong");
    
               }
    
        }
    
        else if (correct[1] !== order[1] )
    
        {
           alert("The second one is wrong");
    
           if (correct[0] !== order[0] )
    
          {
              alert("The first one is wrong");
    
            }
    
            if (correct[2] !== order[2] )
    
           {
               alert("The third one is wrong");
    
             }
    
             if (correct[3] !== order[3] )
    
            {
                alert("The fourth one is wrong");
    
              }
    
             if (correct[4] !== order[4] )
    
            {
                alert("The fifth one is wrong");
    
              }
    
              if (correct[5] !== order[5] )
    
             {
                 alert("The sixth one is wrong");
    
               }
    
               if (correct[6] !== order[6] )
    
              {
                  alert("The seventh one is wrong");
    
                }}
    
    
                else if (correct[2] !== order[2] )
    
                {
                   alert("The third one is wrong");
    
                   if (correct[0] !== order[0] )
    
                  {
                      alert("The first one is wrong");
    
                    }
    
                    if (correct[1] !== order[1] )
    
                   {
                       alert("The second one is wrong");
    
                     }
    
                     if (correct[3] !== order[3] )
    
                    {
                        alert("The fourth one is wrong");
    
                      }
    
                     if (correct[4] !== order[4] )
    
                    {
                        alert("The fifth one is wrong");
    
                      }
    
                      if (correct[5] !== order[5] )
    
                     {
                         alert("The sixth one is wrong");
    
                       }
    
                       if (correct[6] !== order[6] )
    
                      {
                          alert("The seventh one is wrong");
    
                        }}
    
    
                        else if (correct[3] !== order[3] )
    
                         {
                             alert("The fourth one is wrong");
    
                             if (correct[0] !== order[0] )
    
                            {
                                alert("The first one is wrong");
    
                              }
    
                              if (correct[2] !== order[2] )
    
                             {
                                 alert("The third one is wrong");
    
                               }
    
                               if (correct[2] !== order[2] )
    
                              {
                                  alert("The third one is wrong");
    
                                }
    
                               if (correct[4] !== order[4] )
    
                              {
                                  alert("The fifth one is wrong");
    
                                }
    
                                if (correct[5] !== order[5] )
    
                               {
                                   alert("The sixth one is wrong");
    
                                 }
    
                                 if (correct[6] !== order[6] )
    
                                {
                                    alert("The seventh one is wrong");
    
                                  }}
    
    
    
                                  else if (correct[4] !== order[4] )
    
     {
         alert("The fifth one is wrong");
    
         if (correct[0] !== order[0] )
    
        {
            alert("The first one is wrong");
    
          }
    
          if (correct[2] !== order[2] )
    
         {
             alert("The third one is wrong");
    
           }
    
           if (correct[2] !== order[2] )
    
          {
              alert("The third one is wrong");
    
            }
    
           if (correct[3] !== order[3] )
    
          {
              alert("The fourth one is wrong");
    
            }
    
            if (correct[5] !== order[5] )
    
           {
               alert("The sixth one is wrong");
    
             }
    
             if (correct[6] !== order[6] )
    
            {
                alert("The seventh one is wrong");
    
              }}
              else if (correct[5] !== order[5] )
    
               {
                   alert("The sixth one is wrong");
    
                   if (correct[0] !== order[0] )
    
                  {
                      alert("The first one is wrong");
    
                    }
    
                    if (correct[2] !== order[2] )
    
                   {
                       alert("The third one is wrong");
    
                     }
    
                     if (correct[2] !== order[2] )
    
                    {
                        alert("The third one is wrong");
    
                      }
    
                     if (correct[3] !== order[3] )
    
                    {
                        alert("The fourth one is wrong");
    
                      }
    
                      if (correct[4] !== order[4] )
    
                     {
                         alert("The fifth one is wrong");
    
                       }
    
                       if (correct[6] !== order[6] )
    
                      {
                          alert("The seventh one is wrong");
    
                        }}
    
                        else if (correct[6] !== order[6] )
    
                         {
                             alert("The seventh one is wrong");
    
                             if (correct[0] !== order[0] )
    
                            {
                                alert("The first one is wrong");
    
                              }
    
                              if (correct[2] !== order[2] )
    
                             {
                                 alert("The third one is wrong");
    
                               }
    
                               if (correct[2] !== order[2] )
    
                              {
                                  alert("The third one is wrong");
    
                                }
    
                               if (correct[3] !== order[3] )
    
                              {
                                  alert("The fourth one is wrong");
    
                                }
    
                                if (correct[4] !== order[4] )
    
                               {
                                   alert("The fifth one is wrong");
    
                                 }
    
                                 if (correct[5] !== order[5] )
    
                                {
                                    alert("The sixth one is wrong");
    
                                  }}
    else {
        alert("incorrect")
      }
    
    
    
    
    
    
    //  var a = "Correct";
      //var b = "Try Again";
      $.post("update_displayorder.php?"+order,{Response1:a,Response2:b},function(theResponse){
      //$("#categorysavemessage").html(theResponse);
    
    
    
    });
    }
    </script>
    
    <ul id="sortable">
    <li id="4" class="ui-state-default">Figure out how you will get there</li>
    <li id="5" class="ui-state-default">Go to the movies</li>
    <li id="2" class="ui-state-default">Invite the friend to the movie</li>
    <li id="6" class="ui-state-default">Eat some popcorn and enjoy the movie!</li>
    <li id="3" class="ui-state-default">Find a time that works for you and your friend</li>
    <li id="1" class="ui-state-default">Decide if you want to invite others</li>
    <li id="0" class="ui-state-default">Decide on the movie you want to see. </li>
    
    </ul>
     <a href="javascript:void(0);" onClick="saveDisplayChanges();">Save</a>
     <span id="categorysavemessage"></span>

    Code:
    <?php
    
    echo "<pre>";
    
    print_r($_REQUEST); 
    
    $newOrder = $_POST['id'];
    
    $counter = 1;
    
    foreach ($newOrder as $recordIDValue) {
    	
    	echo $counter .' '. $recordIDValue .'<br/>';
    
    //echo $counter;
    
    //	if ($counter != $recordIDValue) {
    
    //		echo "no match <br />";
    
    //	} else {
    
    //		echo "match <br />";
    
    	//}
    
    	//$counter ++;
    	
    	//echo $counter;
    }
    
    ?>

  • #2
    CSS would use the 'background-color' attribute, maybe try this:
    Code:
      $('#' + $droppedID).css('background[COLOR=#ff0000]-color[/COLOR]', 'red');
    //OR THIS
      $('#' + $droppedID).css({backgroundColor: 'red'});
    Something like that may be worth a shot.

    Let me know,

    Good luck!
    Riley
    Riley-Shannon.com - My Portfolio
    FraktalServices.com - My Company

    Comment


    • #3
      Originally posted by RShannon1321 View Post
      CSS would use the 'background-color' attribute, maybe try this:
      Code:
        $('#' + $droppedID).css('background[COLOR=#ff0000]-color[/COLOR]', 'red');
      //OR THIS
        $('#' + $droppedID).css({backgroundColor: 'red'});
      Something like that may be worth a shot.

      Let me know,

      Good luck!
      Could you further elaborate? I actually had tried something like this but am unsure where to place it. FYI, my background is in education. I am doing this all on the fly so I am not quite sure what I am doing.

      Comment

      Working...
      X