popup van data row

Status
Niet open voor verdere reacties.
F

Frenske123

Terugkerende gebruiker
Lid geworden
2 jul 2007
Berichten
1.260
Hallo,


Ik heb een popup script , deze moet de data uit een bepaalde cel laten zien , maar ik krijg die nu van da laagste ID te zien , maakt niet uit welke rij ik kies.
Iemand een idee waar ik de oplossing in moet zoeken.



PHP: 
<body>
  <table id="myTable" class="table">
    <thead>
      <tr>
        <th>PopUp</th>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <?php
$res = $MySQLiconn->query("SELECT *
FROM data ");
while($row=$res->fetch_array())
{
    ?>
      <tr>
        <td><div class="content_div" style="display:none">
    <?php echo $row['test']; ?>
</div><a href="#" class="popup">Popup link</a></td>
 
        <td><?php echo $row['id']; ?></td>
        <td><?php echo $row['test']; ?></td>
      </tr>
      <?php
}
?>
    </tbody>
  </table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="Popup-master/assets/js/jquery.popup.js"></script> 
<script type="text/javascript">
<!--
var options = { content : $('.content_div') };
$('a.popup').popup(options);
//-->
</script>
 
Omdat je de selector van jouw popup script op algemeen "a.popup" hebt gezet, worden alle links met klasse "popup" gezien als trigger.

Echter stel je van tevoren al in wat je content is, in plaats van dat je dat afhankelijk maakt van de link die aangeklikt wordt. Je zult dus op een event binnen popup in moeten haken zodat je dynamisch de content in kunt stellen aan de hand van de gekozen link.

Om je verder te kunnen helpen zou het handig zijn om te weten welke popup-plugin je gebruikt, dan kunnen we daar de documentatie eens van bekijken.

Aangezien dit geen PHP is maar Javascript, heb ik de vraag verplaatst.
 
Bedankt voor je antwoordt.

Het gaat om volgende

http://docs.toddish.co.uk/popup/#other-examples


Ik zal waarschijnlijk de HTML optie moeten hebben, zie html :
http://docs.toddish.co.uk/popup/demos/#basic
Ik heb al verschillende opties geprobeerd, in mijn 1e post gewoon een voorbeeld,
Met een afbeelding gaat het goed , maar hier wordt dan ook het a element in gebruikt, ik denk dat daar het probleem in zit.


Het mag ook bijv een bootstrap popup/modal zijn zou daar ervaring mee zijn.

In mijn zoektocht merk ik dat dit voor veel mensen een probleem is.

De maker had ik gemaild en antwoord:

You should be able to display the data by using the html demos on http://docs.toddish.co.uk/popup.

Just echo out the data in a hidden div and display it like in the examples.

Hope that helps!
 
Laatst bewerkt:
Probeer dit eens:
[js]$('a.popup').popup({
beforeOpen : function(type){
var popup = this;
popup.content = $(this).parent().find('.content_div').html();
}
});[/js]
 
Bedankt , maar nu werkt de pop-up niet > er verschijnt er geen.



De Google developer tool geeft melding:

Uncaught Error: Syntax error, unrecognized expression: #?test ( jQuery v1.11.2)
waar test de data is die zou moeten worden vertoond.


Dus als ik display:none weglaat staat de data goed in de cel,
alleen als ik op de pop-up link klik verschijnt in de pop-up aleen de bewuste data van het ID dat het 1e in de rij staat.
 
Laatst bewerkt:
Even debuggen dus ;)

[js]$('a.popup').popup({
beforeOpen : function(type){
var popup = this;

console.log(popup); // Zou het popup-object terug moeten geven
console.log($(this).parent()); // Zou het bovenliggende element terug moeten geven
console.log($(this).parent().find('.content_div')); // Zou het element met de tekst terug moeten geven
console.log($(this).parent().find('.content_div').html()); // Zou de tekst terug moeten geven

popup.content = $(this).parent().find('.content_div').html();
}
});
[/js]
 
Beste Tha Devil,

Helaas , de pop-up komt er niet door heen, de loading gif blijf stilstaan.

Ik zie nu geen foutmeldingen meer.

Nog maar ff de link erbij gezet, zoals ik dei in de tabel heb :


PHP: 
  <td><div class="content_div" style="display:none">
              <h2><?php echo $row['id']; ?></h2>
            </div>
            <a href="<?php echo $row['fn']; ?>" class="popup">Popup link</a></td>

Ik ben mezelf aan het afvragen of dit wel kan

PHP: 
<a href="<?php echo $row['fn']; ?>"

waar dan fn staat voor bijv. de naam jan.
.
 
Laatst bewerkt:
Je zult ook zelf iets niet zien, er moeten zaken in je console verschijnen ;)

Waarom zou je die waarde als href opgeven? Dat klinkt helemaal niet logisch. Als het geen echte link is, zou ik hem vervangen door een interne link (Dus #)
 
Ok , als ik de popup activeer via link komt melding:
Failed to load resource: the server responded with a status of 404 (Not Found)


url..../test/

Test is dan de data van een veld in de tabel.

Met # gebeurt er niks, dan komt er geen pop-up.

Het a element zal zijn voor de afbeeldingen (werkt ook goed)


Maar de data uit een veld (bijv. HTML) zal op een andere manier worden opgehaald, denk ik zo.
 
Het is lastig op te lossen zonder de daadwerkelijke code te kunnen bewerken :)

Misschien kan ik wel een opzetje maken op jsfiddle, kun je de HTML output van de pagina eens hier plaatsen?
 
Hier een minimum aan code , met een pop up die werkt maar geen data erin.
Ik denk dat er in elk geval een verwijzing naar een rij/id in moet.

PHP: 
<?php 
     define('_HOST_NAME','localhost');
     define('_DATABASE_NAME','xadmin');
     define('_DATABASE_USER_NAME','xadmin');
     define('_DATABASE_PASSWORD','000');
	
     $MySQLiconn = new MySQLi(_HOST_NAME,_DATABASE_USER_NAME,_DATABASE_PASSWORD,_DATABASE_NAME);
	 
	 if($MySQLiconn->connect_errno)
	 {
		 die("ERROR : -> ".$MySQLiconn->connect_error);
	 }
$SQL = $MySQLiconn->query("SELECT * FROM data ");
	$getROW = $SQL->fetch_array();
?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Popup test</title>
<link rel="stylesheet" type="text/css" href="Popup-master/assets/css/popup.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="Popup-master/assets/js/jquery.popup.js"></script> 
<script type="text/javascript">
<!--
var options = { content : $('.content_div') };
$('a.popup').popup({
    beforeOpen : function(type){
        var popup = this;
        popup.content = $(this).parent().find('.content_div').html();
    }
});
//-->
</script>
</head>
<body>
  <table id="myTable" class="table">
    <thead>
      <tr>
        <th>PopUp</th>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <?php
$res = $MySQLiconn->query("SELECT *
FROM data ");
while($row=$res->fetch_array())
{
    ?>
      <tr>
        <td><div class="content_div" style="display:none">
    <?php echo $row['fn']; ?>
</div><a href="#" class="popup">Popup link</a></td>
 
        <td><?php echo $row['id']; ?></td>
        <td><?php echo $row['fn']; ?></td>
      </tr>
      <?php
}
?>
    </tbody>
  </table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="Popup-master/assets/js/jquery.popup.js"></script> 
<script type="text/javascript">
<!--
var options = { content : $('.content_div') };
$('a.popup').popup(options);
//-->
</script>
</body>
</html>

maker:
http://docs.toddish.co.uk/popup/
 
Niet helemaal wat ik bedoelde, dit is nog steeds PHP en niet de HTML output maar er is wel mee te werken:

Het probleem met die callbacks is dat hij überhaupt niet afgevuurd wordt als er niet specifiek content meegegeven wordt :rolleyes:

Vervolgens kwam ik met het probleem te zitten dat ik de content niet zichtbaar in beforeOpen kan wijzigen. Het object gaf wel aan dat hij andere content had maar die werd niet getoond.

Dus dan maar direct de popup aanpassen :D
HTML: 
<table id="myTable" class="table">
    <thead>
        <tr>
            <th>PopUp</th>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="content_div" style="display:none">Jan</div><a href="#" class="popup">Popup link</a>

            </td>
            <td>1</td>
            <td>Jan</td>
        </tr>
        <tr>
            <td>
                <div class="content_div" style="display:none">Piet</div><a href="#" class="popup">Popup link</a>

            </td>
            <td>2</td>
            <td>Piet</td>
        </tr>
    </tbody>
</table>
[js]$(document).ready(function () {
$('a.popup').popup({
type: 'html',
content: '',
afterOpen: function (type) {
$('.popup_content').html( $(this.ele).parent().find('.content_div').html());
}
});
});
[/js]
http://jsfiddle.net/bc29nmew/1/
 
Mooi ,Dat werkt! hartstikke bedankt.

Om een 2e rij van pop-up te voorzien doe ik nu


PHP: 
      <td><div class="content_div2" style="display:none">
    <?php echo $row['datum']; ?>
</div><a  href="#" class="popup2">2e popup</a></td>
        <td><?php echo $row['datum']; ?></td>
      </tr>

HTML: 
$(document).ready(function () {
    $('a.popup2').popup({
        type: 'html',
        content: '',
        afterOpen: function (type) {
           $('.popup_content').html( $(this.ele).parent().find('.content_div2').html());
    }
    });
});

Heb je een betere oplossing neem ik die graag over.
 
Waarom maak je daar andere structuur voor? Zolang je de HTML hetzelfde laat, zal het Javascript op dezelfde manier blijven werken :)
 
Bedankt ,en klopt zo werkt het gewoon, ik dacht gevoelsmatig het anders te moeten doen.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan