how to manage ajax code to display image and video using switch case on HTML

I have 2 tables(image and video). In my HTML code I have three buttons, named slide_image, video, ans single_image. Here I use iframe to load image and video, I am in a single page I can see video/image. so when I will click in slide_image button it will show image one by one in a web page, and when I click video it display video. up to this is ok but when I click single_image button it doesn’t display anything, because of the iframe ans switch case. I want when I clcik single_image button, it only display 3rd image.

I am using the AJAX to check and load the page only I get new data. but my image table is only one and I load data in iframe. Note that; I can’t refresh the page until I get net content, for example now I its displaying video but when only slide_image button clicked then new page will load in iframe. I think I need to modify AJAX code or in the case statement.

<!DOCTYPE html>
<html>
<head>

<title> View</title>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
    var lastData = '';
    function values(){
        $.ajax({
            type: "GET", 
            url: "task.php",
            success: function(data){
                if (data != lastData) {
                    $('div#myFrame').html(data);
                    lastData = data;
                }
            }
        });
    };
    setInterval(values, 5000);
});
</script>

</head>
<body>
<a>
    <div id="myFrame">
    <?php

    include "task.php";  
    ?>
    </div>
</a>
</body>
</html>

task.php

<?php    

//connect database and find

switch ($ID) {
case 1:
    echo '<div>';
    echo '<iframe src="../image/index.php" id="imgiframe"></iframe>';
    echo '</div>';                          
    break;
case 2:     
    echo '<div>';
    echo '<iframe src="../video/index.php" id="imgiframe"></iframe>';
    echo '</div>';
    break;                    
default:
    echo "NO VIDEO";
    break;
}  
?>

Answer

So… that is actually really hard to read.. Only because I don’t think you fully understand what your ajax is doing. Which in reality is confusing at first until you read everything and do it a couple of times…

So… data is going to be something like “NO VIDEO” and never be == lastData … data is the RETURN from success…

However… we can have some fun with this.. You can start with a single ID..

<script>
  $(function(){
    var lastData = 0; // set your data to 0 as that is the real original

    values(); // Go ahead and call the function on initialization so you can see it instantly.
    function values(){
      lastData += 1 // always increment by 1 if it is always one. You may need to fit this better for your situation.
      $.ajax({
        type: "POST", // You had GET 
        url: "task.php",
        data: {ID: lastData}, // You did not have this
        success: function(data){
          $('#myFrame').html(data);
          // if you have a better way to return lastData then do that here, but you will need to use json to get a better splitting of data.
        }
      });

   }
   setInterval(values, 5000);
  })(jQuery);
</script>

This should give you a better realization as to what is happening. You have to send data to actually read and then when you are in your PHP document you would use $_REQUEST['ID'] and do what you will with it.

Look up ajax and json encoding and get more familiar with the layout and how you should do this.

Honestly I wouldn’t approach video / image slide show this way. I would use <img src="..."> and replace the source or do something very similar with the HTML5 <video> tag as it would handle most of my needs. I’m not sure if it will yours.

So yea.. Try something along those lines and hopefully it helps you..

This is by no means a full solution. I do not have a full project overview to get you to the final and the use of iframes does not make sense to me. I did not touch on that for a reason.

Leave a Reply

Your email address will not be published. Required fields are marked *