Vaag probleem met openen van Jquery Dialog

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Johnny Cash

Johnny Cash

21/10/2015 16:38:40
Quote Anchor link
Ik loop al 2 dagen vast door waarschijnlijk iets heel kleins, maar door de zoektochten weet ik niet meer waar ik het moet zoeken.

Ik gebruik de jquery Dialog functie voor het openen van een popup waarin een formulier wordt geladen. Dit ziet er als volgt uit:

bedrijvenlogin.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Modal form</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
</head>
<body>
<?php
echo "<a href='#' class='showpopup' data-id='11' data-cartid='22'>BEWERKEN</a>";


//dialog popup new order:
echo "<div id='dialog' class='dialog'>";
 echo "<div id='message'></div>";
echo "</div>";    
?>



</body>
</html>

  <script>
    $("a.showpopup").on("click", function(e) {
        e.preventDefault;
        $.ajax({
            url: 'edit-bedrijf.php',
            type: 'get',
            data: {id: $(this).data('id')},
            dataType: 'html'
        })
        .done(function(d) {
            $("#message").html(d);
            $("#dialog").dialog({
             height: 600,
             width: 750,
             modal: true,
             close: function(event, ui) { $('#wrap').show(); },
             title: 'Nieuwe vermelding keuren'                                
            });
        })
        .fail(function(){
            alert('Oops');
        }); // let op method chaining!!
        
        return false;
    });
    
   jQuery('body')
    .bind(
     'click',
      function(e){
       if(
        jQuery('#dialog').dialog('isOpen')
        && !jQuery(e.target).is('.ui-dialog, a')
        && !jQuery(e.target).closest('.ui-dialog').length
       ){
        jQuery('#dialog').dialog('close');
       }
      }
     );        
  </script>


Als ik dit script/file gewoon direct aanroep via de adresbalk dan werkt de popup gebeuren wel. Maar dan wordt de eigenlijke website er dus niet omheen geladen. Wanneer ik op de pagina binnen de website kom waar dit script staat werkt de popup functie niet.

Ik krijg dan de volgende foutmelding:
Oops... voorkom dat deze pagina extra dialoogvensters weergeeft

Ik kom hier echt niet meer uit. Wie heeft hier een verklaring voor...?
Gewijzigd op 21/10/2015 16:43:12 door Johnny Cash
 
PHP hulp

PHP hulp

03/12/2024 16:05:45
 
Frank Nietbelangrijk

Frank Nietbelangrijk

21/10/2015 17:36:01
Quote Anchor link
Zet je javascript eens tussen jquery's ready functie. Misschien dat dat helpt

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<script>
$( document ).ready(function() {
  // Hier de rest van je javascript
});
</script>
 
Pieter R

Pieter R

21/10/2015 20:04:18
Quote Anchor link
Heb je code lokaal getest, volgens mij word 'edit-bedrijf.php' niet gevonden.
En verder moet je script of onder in de body of in de head met:
$( document ).ready(function() (zie bij Frank)
 
Thomas van den Heuvel

Thomas van den Heuvel

21/10/2015 21:28:01
Quote Anchor link
Onderin de body, maar niet na de body (of in de head), en binnen een .ready() blok, dus zoiets:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
... je pagina hiero ...
<script type="text/javascript">
$().ready(function() {
    // je inline JavaScript code hiero...
})
</script>
</body>
</html>
Gewijzigd op 21/10/2015 21:42:04 door Thomas van den Heuvel
 
Willem Liu

Willem Liu

22/10/2015 18:57:17
Quote Anchor link
Als kleine toevoeging nog het volgende. jQuery.bind wordt ontmoedigd. In plaats daarvan raad jQuery je aan om jQuery.on te gebruiken.

Zie documentatie over jQuery.bind: http://api.jquery.com/bind/
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.