Dialog popup Jquery

Door Johnny Cash op 11-11-2014 18:19

1.779 views

Goedenavond,

Op twee eerdere posts heb ik helaas geen reactie ontvangen. Ik hoop dat iemand wel kan helpen met dit probleem voor mij. Mijn kennis van javascript/jquery is helaas nog niet goed genoeg dergelijke simpele issues op te lossen.

Ik heb verschillende links waarop geklikt kan worden.
Wanneer erop geklikt wordt moet er het bekende Dialog popup venstertje aangeroepen worden.
De links hebben een unique nummer. Dit nummer moet via jquery meegestuurd worden naar test.php zodat ik daarmee een juist bericht kan ophalen.

Mijn links:
<a id='clicker' href='#' class='22'>Titel van bericht 22</a>
<a id='clicker' href='#' class='23'>Titel van bericht 23</a>
<a id='clicker' href='#' class='24'>Titel van bericht 24</a>

Het dialog venster wordt met onderstaande code het venster direct geopend, en dat moet dus pas na een click event op de a href.


    $(function ()    {
        $('<div>').dialog({
            modal: true,
            open: function ()
            {
                $(this).load('test.php');
            },         
            height: 400,
            width: 400,
            title: 'Titel van het bericht'
        });
    });

Peter K

11-11-2014 18:47

Een voorbeeld van de jQuery UI:


 <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
 
<div id="dialog" title="Basic dialog">
  <p>Text in de dialog</p>
</div>

Probeer eerst eens om meerdere dialogs te maken op 1 pagina met behulp van een loop. Zodra je dit onder de knie hebt kun je verder gaan kijken naar b.v. het handmatig openen van een dialog (http://jqueryui.com/dialog/#modal-form dit is een mooi voorbeeld, alles er uit slopen wat je niet nodig hebt en dan eens lezen wat je nog over hebt).

Ger van Steenderen

12-11-2014 19:29 gewijzigd op 12-11-2014 19:34

Een paar basics over de JQuery selector:

Selecteren van element op tag:[code lang="js"]
$('div').html('PHP Hulp'); // dus geen $('<div>')
[/code]
Selecteren van element op tag met een bepaalde class:[code lang="js"]
$('div.phphulp').html('PHP Hulp');
[/code]
Let op dat hiermee meerdere divs mee beïnvloed kunnen worden

Selecteren van element op id: [code lang="js"]
$('#phphulp').html('PHP Hulp'); // dus geen $('<div>')
[/code]

Let op dat er een verschil bestaat tussen DOM objecten en JQuery objecten:
[code lang="js"]
el = document.createElement('div');
el.html('PHP Hulp verkleed als ...');
$("#content").append(el); // --> gaat niet werken

el = $(document.createElement('div'));
el.html('PHP Hulp verkleed als ...');
$("#content").append(el); // --> wel
[/code]

Terug naar je vraag zou ik het als volgt doen:
[code lang="js"]

<a href="#" class="show" data-id="1">Bericht 1</a>
<a href="#" class="show" data-id="2">Bericht 2</a>
<div id="dialog" class="dialog">
<div id="message">
</div>
</div>


<script type="text/javascript">
$("a.show").on("click", function(e) {
e.preventDefault;
$.ajax({
url: 'test.php',
type: 'get',
data: {id: $(this).data('id')},
dataType: 'html'
})
.done(function(d) {
$("#message").html(d);
$("#dialog").dialog();
})
.fail(function(){
alert('Oops');
}); // let op method chaining!!

return false;
});
</script>
[/code]

Johnny Cash

12-11-2014 21:16

Bedankt Ger voor je heldere uitleg!!

Het werkt zoals je hebt geschetst. Ik heb er even met geëxperimenteerd.
Op die test.php pagina die ingeladen wordt wil ik nu ook een eenvoudig nieuwsbrief formulier plaatsen waarbij de afhandeling van het formulier dan weer via Ajax gebeurd zodat een gebruiker gewoon op de pagina blijft.

In welke functie zet ik dan deze post request naar het afhandelingsscript?

Ger van Steenderen

13-11-2014 17:14 gewijzigd op 13-11-2014 17:15

Ook in [pre]$.ajax()[/pre], je verandert dan alleen het type en eventueel de url:
[code lang="js"]
$.ajax({
url: 'news.php',
type: 'post',
dataType: 'html',
data: $("#news_form).serialize()
})
.done(function(h) {
alert(h);
});
[/code]
Dus een id aan je formulier hangen en dit aan een klik event van een button (met type="button") of een a toekennen.

Reageren

Inloggen om te reageren