Autor Zpráva
Magna
Profil *
Dobrý den všem.

Potřeboval bych poradit jak upravit následující script.:

function myFunction(e) {
    var dataString = 'id1=' + e.getAttribute("data-id");
 
    $.ajax({
        type: "POST",
        url: "lyrics.php",
        data: dataString,
        cache: false,
        success: function(data) {
            $("#test").html(data);
        }
    });
 
    return false;

Potřeboval bych aby se načtený text zobrazoval v popup okně (lightbox)
Můžete mi prosím poupravit script případně nějak poradit?
Děkuji.


Na webu už lightbox používám pro obrázky a to pomocí že přidávám k obrázkům class="lightbox"
Taps
Profil
Magna:
Pomocí klasického lightboxu zobrazíš jen klasické obrázky. Pro zobrazení textu musíš použít nějaký jiný druhl lightboxu- např. http://jecas.cz/magnific-popup
Magna
Profil *
Taps:
Tak jsem na to kouknul ale nevím jak na to.
Ty data které chci mít v popup okně, tahám přes ajax a po té je na stránce zobrazuji pomocí <div id="test"></div>
A právě místo tohoto zobrazení bych chtěl aby se to ukázalo v popup okně.

Script který ty data načítá z db je:
lyrics.php:
$promena = mysql_real_escape_string($_POST['id1']);
 $query = "SELECT `skladba` FROM `lyrics` WHERE text_id = '".$promena."'";
$result = mysql_query($query) or die(Mysql_error());
While($results=MySQL_Fetch_Assoc($result))                  
{     
echo '<div class="prvek-obalka"><div class="prvek2">'.$results['skladba'].'</div></div>';

 }
Taps
Profil
Magna:
Díval ses i do nápovědy? viz http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax-type

Ve tvém připadě by měl odkaz směřovat na lyrics.php + přidat do odkazu class="ajax-popup-link"

a samozřejmě nesmí chybět kod
$('.ajax-popup-link').magnificPopup({
  type: 'ajax'
});
Magna
Profil *
Taps:
Nějak takto:
<script type="text/javascript">
$('.ajax-popup-link').magnificPopup({
  type: 'ajax'
});
function myFunction(e) {
    var dataString = 'id1=' + e.getAttribute("data-id");
 
    $.ajax({
        type: "POST",
        url: "lyrics.php",
        data: dataString,
        cache: false,
        success: function(data) {
            $("#test").html(data);
        }
    });
 
    return false;
}
</script> 

echo "<a onclick='myFunction(this)' class='ajax-popup-link' data-id='".$result['id']."'><img width='20' height='20' src='img/lupa.png'></a>";

Takto mi to ovšem nejde.
Taps
Profil
Magna:
ne, mělo by to stačit takto
<a href="lyrics.php" class="ajax-popup-link"><img width='20' height='20' src='img/lupa.png'></a>
a pak stačí přidat jen ten javascript
<script type="text/javascript">
$('.ajax-popup-link').magnificPopup({
  type: 'ajax'
});
</script>
Magna
Profil *
Vyzkoušeno takto:

function myFunction(e) {
     var dataString = 'id1=' + e.getAttribute("data-id");

     $.ajax({
         type: "POST",
         url: "lyrics.php",
         data: dataString,
         cache: false,
         success: function(data) {
             var w = window.open("", "", "width=700,height=500");
             w.document.write(data);
         }
     });
 }

Ale problém je že se to otvírá v novém okně prohlížeče.
Mělo by to vypadat spíše takto: http://codepen.io/IronFeast/pen/fLovn


Taps:
ne, mělo by to stačit takto
>
<a href="lyrics.php" class="ajax-popup-link"><img width='20' height='20' src='img/lupa.png'></a>
>
a pak stačí přidat jen ten javascript

<script type="text/javascript">
$('.ajax-popup-link').magnificPopup({
type: 'ajax'
});
</script>


To mi nezachová načítání dat ajaxem.
Taps
Profil
Magna:
to id přeci můžeš dosazovat přímo do odkazu, a url v odkaze se načte do lightboxu
Magna
Profil *
Taps:
Tak jsem to udělal přesně podle tvého a krom toho že mě to přesměruje na stránku lyrics.php s příslušným id to neudělá to co chci


Živá ukázka Stačí kliknout na ten mikrofon v tabulce
Magna
Profil *
Vyřešeno pomocí:
<script type="text/javascript">
$("a").click(function(){
    var dataString = 'id1=' + $(this).attr("data-id");
    $.ajax({
         type: "POST",
         url: "lyrics.php",
         data: dataString,
         cache: false,
         success: function(data) {
             $("#hide").show();
             $("#popup").html(data).show();
         }
    });
});

$("#hide").click(function(){
    $(this).hide();
    $("#popup").hide();
});
</script> 

+ dalších malých úprav

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: