Dialog popup Jquery
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$(function () {
$('<div>').dialog({
modal: true,
open: function ()
{
$(this).load('test.php');
},
height: 400,
width: 400,
title: 'Titel van het bericht'
});
});
$('<div>').dialog({
modal: true,
open: function ()
{
$(this).load('test.php');
},
height: 400,
width: 400,
title: 'Titel van het bericht'
});
});
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>Text in de dialog</p>
</div>
$(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).
Selecteren van element op tag:
Code (js)
1
$('div').html('PHP Hulp'); // dus geen $('<div>')
Selecteren van element op tag met een bepaalde class:
Code (js)
1
$('div.phphulp').html('PHP Hulp');
Let op dat hiermee meerdere divs mee beïnvloed kunnen worden
Selecteren van element op id:
Code (js)
1
$('#phphulp').html('PHP Hulp'); // dus geen $('<div>')
Let op dat er een verschil bestaat tussen DOM objecten en JQuery objecten:
Code (js)
1
2
3
4
5
6
7
2
3
4
5
6
7
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
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
Terug naar je vraag zou ik het als volgt doen:
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- html -->
<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 -->
<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>
<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 -->
<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>
Gewijzigd op 12/11/2014 19:34:01 door Ger van Steenderen
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?
Code (js)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$.ajax({
url: 'news.php',
type: 'post',
dataType: 'html',
data: $("#news_form).serialize()
})
.done(function(h) {
alert(h);
});
url: 'news.php',
type: 'post',
dataType: 'html',
data: $("#news_form).serialize()
})
.done(function(h) {
alert(h);
});
Dus een id aan je formulier hangen en dit aan een klik event van een button (met type="button") of een a toekennen.
Gewijzigd op 13/11/2014 17:15:22 door Ger van Steenderen