append html data from mySQL by JQuery append function

Question

I want to load content data from MySQL database but I have one problem. I can echo title, link and date but I can't write article content.

My MySQL data (stored in text type column):

<div id="player"></div> 
    <p>21.06.2013 r. jak co roku obchodziliśmy w naszej szkole Dzień Patrona. W tym roku po raz pierwszy z tej okazji odbył się rajd rowerowy oraz pieszy urozmaicony międzyklasową rywalizacją.</p>
    <p>Każda klasa niezależnie od wybranego typu rajdu, musiała zmierzyć się z postawionymi przed nią zadaniami, do których należały: klasowy okrzyk, quiz o Norwegii, zawody pływacko-kajakowe, wykonanie zdjęcia z krową oraz zawody strzeleckie.</p>
    <p>W tym roku rywalizację wygrała klasa 3aTI. Drugie i trzecie miejsce zajęły kolejno klasy 1bLO i 3SL.</p>

    <script>
    $(document).ready(function(){
        $('#player').youTubeEmbed({
            video: 'http://www.youtube.com/watch?v=-VprJHEmmJk',
            width: 500,         // Height is calculated automatically
            progressBar: true       // Hide the progress bar
        });
    });
    </script>

JQuery 1 data which works well:

$("#dates").append('<li><a href="#"><?php echo date("j.m", strtotime($tresc[1])) ?></a></li>');

and JQuery 2 data which does not work:

$("#issues").append('<li id="date<?php echo $i ?>"> <h1> <a href="<?php echo $tresc[5] ?>"> <?php echo $tresc[2] ?> </a> </h1> <p> <?php echo $tresc[3]; ?> </p> </li>');

My website displays:

'); $("#dates").append('
21.06
');

instead of stored in db data.

when I remove

<p> <?php echo $tresc[3]; ?> </p>

rest of code works well.

Full PHP file

<h2 style="position: relative; top:-22px;">Aktualności</h2>
<div id="timeline">
    <ul id="dates">
    </ul>
    <ul id="issues">
    </ul>
    <a href="#" id="next">+</a> <!-- optional -->
    <a href="#" id="prev">-</a> <!-- optional -->
</div>

<script>
<?php
    $i = 1;
    if(isset($rok) && isset($miesiac)) 
    {
        $d1 = $rok.'-'.$miesiac.'-01';
        $d2 = $rok.'-'.$miesiac.'-31';
        $SQL = "SELECT * FROM news WHERE data >'" . $d1 . "' AND data <'" . $d2 . "' ORDER BY data DESC";
    } else {
        $SQL = "SELECT * FROM news ORDER BY data DESC LIMIT 10";
    }
    $q=mysql_query($SQL);
    $ilosc=mysql_num_rows($q);//ile jest takich stron w bazie 0 czy 1
    while( $tresc=mysql_fetch_row($q) ) 
    {
        if($tresc[7]==1) {
        ?> 
            $("#issues").append('<li id="date<?php echo $i ?>"> <h1> <a href="<?php echo $tresc[5] ?>"> <?php echo $tresc[2] ?> </a> </h1> <p> <?php echo $tresc[3]; ?> </p> </li>');
            $("#dates").append('<li><a href="#"><?php echo date("j.m", strtotime($tresc[1])) ?></a></li>');         
        <?php
            $i++;
        }
    }
    mysql_free_result($q);
?>

</script>

EDIT If i have this two lines:

$("#issues").append('<li id="date<?php echo $i ?>"> <h1> <a href="<?php echo $tresc[5] ?>"> <?php echo $tresc[2] ?> </a> </h1> <p> <?php echo $tresc[3]; ?> </p> </li>');
$("#issues").append('<li id="date<?php echo $i ?>"> <h1> <a href="<?php echo $tresc[5]; ?>"> <?php echo $tresc[2]; ?> </a> </h1> <p> <?php echo $tresc[3]; ?> </p> </li>');

It displays data from mySQL but when i remove one of them i receive only ');

could you please include the code as a full block as it is in your php script? — Tim Bodeit
– Tim Bodeit, Commented Sep 8, 2013 at 23:12
It looks to me like you didn't put this code inside <script>, so the Javascript is being displayed as page content. — Barmar
– Barmar, Commented Sep 8, 2013 at 23:13
You didn't really need to paste your full php file. Sometimes people like to hit-and-run comments without thinking about the question. Your original question was just fine. — 000
– 000, Commented Sep 8, 2013 at 23:20
first code block contains that, what i want to display. Barmar: It's inside <script> tag — Maciej Czekaj
– Maciej Czekaj, Commented Sep 8, 2013 at 23:23

000 · Accepted Answer · 2013-09-08 23:13:50Z

1

Your string in mysql contains line-breaks, which are not valid in javascript strings. For example, the following javascript is invalid:

var foo = 'This is a multi
line string';

To work around this, echo your multi-line html into a "template" div which is hidden, then in jquery move that template div into place where you need it.

For example:

<div id="dates-template" style="display:none">
    <li id="date<?php echo $i ?>">
        <h1><a href="<?php echo $tresc[5] ?>"> <?php echo $tresc[2] ?> </a></h1>
        <p> <?php echo $tresc[3]; ?> </p>
    </li>
</div>

then in js:

$('#dates').append($('#dates-template > *'));

answered Sep 8, 2013 at 23:13

000

27.3k10 gold badges74 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

000 Over a year ago

That comment is not useful.

Maciej Czekaj Over a year ago

After longer trying your solve it works ;) I only had to add nl2br before $tresc[3]. thanks for help for everyone :)

Pete · Accepted Answer · 2013-09-08 23:18:21Z

1

It looks like it's because your code contains line breaks. Try using <?php echo json_encode($tresc[3]); ?>

answered Sep 8, 2013 at 23:18

Pete

4657 silver badges20 bronze badges

Comments

Mahmoud Samy · Accepted Answer · 2013-09-08 23:26:45Z

-1

i think

$("#issues").append('<li id="date<?php echo $i ?>"> <h1> <a href="<?php echo $tresc[5]; ?>"> <?php echo $tresc[2]; ?> </a> </h1> <p> <?php echo $tresc[3]; ?> </p> </li>');

change

 <?php echo $tresc[3] ?>

to

 <?php echo $tresc[3]; ?>

answered Sep 8, 2013 at 23:26

Mahmoud Samy

2703 silver badges11 bronze badges

2 Comments

000 Over a year ago

Trailing semicolons are not required in blocks like that.

Maciej Czekaj Over a year ago

It looks better now. Joe: but it looks better now. i don't know why

Collectives™ on Stack Overflow

append html data from mySQL by JQuery append function

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related