CODEWITHSUNDEEP
javascriptjquerydialog
Wouter
Wouter

Reputation: 137

JQUERY using one Dialog open form with corresponding button

I hope you can all help me / give me a shove in the right direction. The situation is as follows. I have several forms which should pop up (inpage) when clicked upon. To achieve this i am using the Dialog fuction of JQUERY which works perfectly. The only problem is my page is starting to contain a lot of code since i am giving every form its own dialog. Is there a way to combine the function to use 1 dialog? (so put everything in one function? - or load the form into the dialog depending on which button is pushed? I have done a lot of searching on the web but i cannot find anything which gives me a push in the right direction....hope yall are willing and able to help me. Anyways thanks in advance. (i only showed the first 2 functions ... i have around 6 more of these )

<script>
    $(function(c) {
        $( "#dialog" ).dialog({
            autoOpen: false,
            maxWidth:260,
            maxHeight: 85,
            width: 260,
            height: 85,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });

        $( "#dialog" ).dialog({
            position: { 
                my: 'left, top',
                at: 'right, top',
                of: $('#opener')
            }
        });
        $( "#opener" ).click(function() {
            $( "#dialog" ).dialog( "open" );
        });
    });

    $(function(s) {
        $( "#dialog2" ).dialog({
            autoOpen: false,
            maxWidth:300,
            maxHeight: 85,
            width: 300,
            height: 85,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });

       $( "#dialog2" ).dialog({
           position: { 
               my: 'left, top',
               at: 'right, top',
               of: $('#opener2')
           }
       });

       $( "#opener2" ).click(function() {
           $( "#dialog2" ).dialog( "open" );
       });
 </script>
 <body>
  <?php
    if(!empty($row['voornaam'])){
            ?>
            <div  id="dialog" >Naam<br>
                <p><form method="post"  id="naam"> <input type="text" value="<?php echo $row['voornaam'];?>" name="voornaam"  size="8"/> <input type="text" value="<?php echo $row['achternaam'];?>" name="achternaam"  size="8"/>&nbsp;<input type="submit" value="opslaan" > </form> 
            </div>
        <button id="opener" border="0" color="white"> <?php echo $row['voornaam'] . " " . $row['achternaam']  ;?> &nbsp; <img src="edit.png" width="10" height="10"></button>

        <?php
        } ?>
<?php
    if(!empty($row['gebooredatum'])){
        ?><div id="dialog2" >Geboortedatum<br>
        <p><form method="post" id="leeftijd" > <input type="text" value="" name="geboortedatum" placeholder="<?php echo $row['gebooredatum'];?>" size="11"/> &nbsp;<input type="submit" value="opslaan" > </form> 
        </div>
        <button id="opener2" border="0" color="white"> <?php echo $leeftijd   ;?>&nbsp; Jaar &nbsp; <img src="edit.png" width="10" height="10"></button>


        <?php
    } else {?>
<div  id="dialog2">Geboortedatum<br>
  <p><form method="post" id="leeftijd"> <input type="text" name="geboortedatum" placeholder="dd-mm-jjjj" size="11"/>  <input type="submit" value="opslaan" "size="3"></form></p>
</div>
<button id="opener2" border="0" color="white"><?php echo "Voeg je geboortedatum toe";?> &nbsp;<img src="edit.png" width="10" height="10"></button>
    <?php } ?>

</body>
</html>

Upvotes: 0

Views: 74

Answers (1)

AtheistP3ace
AtheistP3ace

Reputation: 9691

You could use the open event provided by the jquery widget. Inside this event is where you can place some logic that would determine what you want to show in the dialog.

http://api.jqueryui.com/dialog/#event-open

Upvotes: 1

Related Questions