CODEWITHSUNDEEP
javascriptphpjqueryhtml
Yugraaj Sandhu
Yugraaj Sandhu

Reputation: 434

appending elements in jquery

i am trying to append a div to other div here :

 <script>if($(window).width()>500){
            $("body").append("<?php include('includes/middle.php') ?>");
    }
    </script>

Which becomes:

<script>if($(window).width()>500){
            $("body").append("<div class='middle'>
                <div class='middleOne'>

             <a href='http://localhost/jhandwa/story/11-illustrations-that-perfectly-capture-how-life-changes-when-we-grow-up'>
               <img src='https://files.brightside.me/files/news/part_31/310360/12086810-10111660-1-0-1487765591-1487765607-0-1488442321-0-1488458395-1488458410-650-1-1488458410-650-0c369e17e2-1488484030.jpg'>
               <div class='miniTitle'>11 Illustrations That Perfectly Capture How Life Changes When We Grow Up<br /><span>2017-03-17 17:12:36</span></div>
            </a>
        </div>
               <div class='middleOne'>

             <a href='http://localhost/jhandwa/story/10-things-you-didnt-know-about-the-us-secret-service'>
               <img src='https://www.whitehouse.gov/sites/whitehouse.gov/files/images/first-family/44_barack_obama%5B1%5D.jpg'>
               <div class='miniTitle'>10 Things You Didn't Know About<br /><span>2017-03-17 15:15:29</span></div>
            </a>
        </div>
               <div class='middleOne'>

             <a href='http://localhost/jhandwa/story/who-is-actually-dumb-and-dumber-after-watching-these-crime-serials'>
               <img src='https://s-media-cache-ak0.pinimg.com/originals/36/45/e6/3645e66b26b611a30fabf923f7247d23.jpg'>
               <div class='miniTitle'>Who is Actually 'dumb' and 'dumber' after this? <br /><span>2017-02-28 00:00:00</span></div>
            </a>
        </div>

   </div>");
    }
    </script>

what am i doing wrong here? i feel its something wrong because of double or single quotes.why isn't it working?

Upvotes: 1

Views: 54

Answers (4)

Hyder B.
Hyder B.

Reputation: 12216

Updating my original answer:

First, you need to wrap your code in document.ready(). It should append when the dom is ready.

Second, it is not working because your outputted HTML is on multiple lines. If you look at your console, you would see the following errors:

Uncaught SyntaxError: Invalid or unexpected token

There are many ways to solve this issue, the simplest would be to use template literals, this means you should wrap your code within backtick.

$(document).ready(function () {
    if ($(window).width() > 500) {
        $("body").append(`<?php include('includes/middle.php') ?>`);
    }
});

However, this solution may not be compatible with all browsers as this feature has been introduced in ES6.

A much better way would be to call the sidebar.php via ajax.

$(document).ready(function () {
    if ($(window).width() > 500) {
        $.get("includes/middle.php", function (data, status) {
            $("body").append(data);

        })
    }
});

Upvotes: 1

Hossam
Hossam

Reputation: 1146

Based on this answer and as you directly echo inside the included page, you can use backtick (`) to wrap multiline string in js properly.

 <script>
 $(document).ready(function() {
     if($(window).width()>500){
         $("body").append(`<?php include('includes/middle.php'); ?>`);
     }
 });
 </script>

Upvotes: 0

Rajesh Karunakaran
Rajesh Karunakaran

Reputation: 169

Try this:

if($(window).width()>500){
    $.ajax({
       url: 'includes/middle.php',
       success: function(html) {
          $("body").append(html);
       }
    });
}

Upvotes: 0

Sang Lu
Sang Lu

Reputation: 308

This script can not execute because your PHP file have multiple line. And multiple line will make your JS syntax wrong.

You need include this php file in a hidden script, and use jQuery to get this div content and append into body.

And as @Hyder B say, you need put this script execute when document has been ready.

You can try this way:

<div id="included_content" style="display:none">
    <?php include('includes/middle.php') ?>
</div>

<script>
$(document).ready(function() {
    if($(window).width() > 500){
            $("body").append($("#included_content").html());
    }
});
</script>

Upvotes: 0

Related Questions