0

I have some problem with my animation script after page call with AJAX. In this case I load that page if opened in mobile screen browser. I have 2 files called index.php and mobile.php. I put AJAX in index.php so when user openend www.example.com it will load index.php first and then check if user open that page in mobile browser it will make AJAX call to load mobile.php. In mobile.php there is some carousel slider animation and when it load with AJAX the slider animation not working anymore. It's maybe the JQuery not initialized when onload is triggered.

This is my AJAX in index.php :

    <script>
        window.mobilecheck = function() {
           var check = false;
           if(window.innerWidth<768){
               check=true;
           }
           return check;
         }
         if(window.mobilecheck()){
             $.ajax({
                    'type': 'POST',
                    'url': 'mobile.php',
                    'data': {test:'test'},
                    'success': function(response) {
                        //alert(response);
                        $("html").html(response);
                    }
                });
        }
    </script>

And this is my mobile.php :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">
        body {
            background-color: #eaeaea;
        }
    </style>
</head>
<body>
<div class="container">
  <h2>Carousel Example</h2>  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="1.png" alt="Los Angeles" style="width:25%;">
      </div>

      <div class="item">
        <img src="2.png" alt="Chicago" style="width:25%;">
      </div>

      <div class="item">
        <img src="3.png" alt="New york" style="width:25%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</body>
</html>

I don't know why when mobile.php load with AJAX the animation not working. Please anyone can give me some advise to solve this. Thanks.

Antonio
  • 755
  • 4
  • 14
  • 35
  • @AnthonyMcGrath It's not working. With that code `mobile.php` not load. – Antonio Feb 10 '18 at 04:11
  • I think, that putting all page with html and everything inside html tags using jquery will bring unforeseeable problems depending of what your new content contains. You should only replace body contents or even less, or alternatively redirect user to mobile version of page and get a nice working page. – Rauli Rajande Feb 10 '18 at 04:11
  • @RauliRajande That's just I can do. They not want to redirecting. – Antonio Feb 10 '18 at 04:13
  • You can read answers here: https://stackoverflow.com/questions/1236360/how-do-i-replace-the-entire-html-node-using-jquery and here: https://stackoverflow.com/questions/2825586/replace-entire-html-document-in-place – Rauli Rajande Feb 10 '18 at 04:14
  • @RauliRajande I tried first answer but the style and jqery still not working. It gives me plain html without style. – Antonio Feb 10 '18 at 04:18
  • Who are they? Basically you are trying to redirect - loading a whole new page and replacing this inside browser window, destroying everything what was there before, but you are redirecting in a more complicated and broken way than just a redirect. – Rauli Rajande Feb 10 '18 at 04:18
  • Yes, that's what they say there, when you READ the answers there, instead of copy-paste :) – Rauli Rajande Feb 10 '18 at 04:19
  • 1
    Possible duplicate of [Replace entire HTML document in-place](https://stackoverflow.com/questions/2825586/replace-entire-html-document-in-place) – Rauli Rajande Feb 10 '18 at 04:22
  • @RauliRajande I don't get the answer from that. So please remove that. – Antonio Feb 10 '18 at 04:23

1 Answers1

0

You need to redirect the page if you found user using mobile like below. One more thing, You have not added Carousel jquery plugin in mobile.php

<script>
        window.mobilecheck = function() {
           var check = false;
           if(window.innerWidth<768){
               check=true;
           }
           return check;
         }
         if(window.mobilecheck()){
             window.location.href = 'mobile.php';             
         }
</script>
Viral Prajapati
  • 21
  • 6