Variabele doorgeven JQuery Dialog Box

Door Dimitri Van Reeth op 05-07-2013 11:25 gewijzigd op 05-07-2013 11:48

2.077 views

Hallo iedereen,

Ik ben bezig met een database te maken van alle apparaten in het bedrijf.

De apparaten worden weergegeven d.m.v. de accordion widget van JQuery & in elke tab staat de informatie van een apparaat + de optie om de informatie te wijzigen en de optie om het apparaat uit de database te verwijderen.

Maar nu zit ik met het probleem dat als ik bijvoorbeeld een GET variabele wil meegeven bij de link waarmee dat de dialog open gaat dat dat niet werkt.
De URL blijft gewoon: index.php

Hier is de code om het een beetje duidelijker te maken:


<?php
//Delete Dialog
echo('<div id="delete" style="display:none;" title="Delete Device">
<form method="post" >
<div class="ui-widget" style="text-align: center;">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: none; margin-right: .3em;"></span>
<strong>Are you sure you want to delete this device?</strong><br />This action can\'t be undone! </p>
</div>
</div>
<br />
<div class="center"><button name="deleteConfirmed">Yes, Delete Device</button>
<button id="closeDelete">No, Close Window</button></div>
</form></div>');

//If Delete form has been submitted
if(isset($_POST['deleteConfirmed'])){
if(isset($_GET['deleteID'])){
$query="DELETE FROM information WHERE id='".$_GET['deleteID']."'";
mysql_query($query) or die(mysql_error());

echo('<div id="succesfull" title="Succesfully Deleted!">
<div class="ui-widget" style="text-align: center;">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em; text-align: center;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>The device has succesfully been deleted!</strong><br />You will be redirected in 3 seconds <br /> or click <a href="index.php">here</a>.</p>
</div>
</div> <meta HTTP-EQUIV="REFRESH" content="3; url=index.php">');

}else{
echo('ERROR! There was no delete ID defined!');
}
echo('</div>');
}

-----------------------------------------------------------------------------

<h3><a href='#'><?php echo($row['name']); ?></a></h3>
<div id="tabs-<?php echo($row['id']); ?>">

<table style="width: 95%;">
<tr><td rowspan="12"><img src="<?php echo ($row['type_image']);?>" width="200" height="180" /></td></tr>

<tr><td colspan="2"><b><u>Device Information:</u></b></td></tr>
-------------------------------------------------------------------
</table>
<p style="position: relative; margin-left: 550px; margin-top:-20px; display: block;"><a style="text-decoration: none;" id="openEdit" href="?editID=<?php echo $row['id']; ?>"><img src="style/edit.png" style="width: 50px; height: 50px" /></a>
<a style="text-decoration: none;" id="openDelete" href="?deleteID=<?php echo $row['id']; ?>"><img src="style/delete.png" style="width: 50px; height: 50px" /></a>
<a style="text-decoration: none;" href="#" onClick="window.open('print.php?id=<?php echo($row['id']); ?>', 'Print Barcode', 'status,width=300,height=130'); return false"><img alt="Print the barcode information" src="style/print.png" style="width:50px; height: 50px;"></a>

</p>
</div>

<?php
}
echo("</div>");
}
}

mysql_close($con);

?>

Kris Peeters

05-07-2013 12:31 gewijzigd op 05-07-2013 12:34

Dimitri Van Reeth op 05/07/2013 11:25:22

als ik bijvoorbeeld een GET variabele wil meegeven bij de link waarmee dat de dialog open gaat dat dat niet werkt.
De URL blijft gewoon: index.php

Toon daar eens code van.
Toon eens hoe die link er uit ziet, en hoe daarmee een dialog geöpend wordt.
Is dat met jQuery-ui dialog ( http://jqueryui.com/dialog/ )?
Toon ook die javascript code

Dimitri Van Reeth

05-07-2013 13:41 gewijzigd op 05-07-2013 13:42

Kris Peeters op 05/07/2013 12:31:36

[quote="Dimitri Van Reeth op 05/07/2013 11:25:22"]
als ik bijvoorbeeld een GET variabele wil meegeven bij de link waarmee dat de dialog open gaat dat dat niet werkt.
De URL blijft gewoon: index.php

Toon daar eens code van.
Toon eens hoe die link er uit ziet, en hoe daarmee een dialog geöpend wordt.
Is dat met jQuery-ui dialog ( http://jqueryui.com/dialog/ )?
Toon ook die javascript code

[/quote]
De informatie van alle devices word opgeroepen uit de database en dan in een accordian widget van JQuery toegevoegd.


<?php

$result = mysql_query("SELECT * FROM information WHERE (name LIKE '%".$zoekcriteria."%' OR type LIKE '%".$zoekcriteria."%' OR serial LIKE '%".$zoekcriteria."%' OR date LIKE '%".$zoekcriteria."%' OR owner LIKE '%".$zoekcriteria."%')") ;
	 
	If(mysql_num_rows($result) !== 0){
	echo("<div id='accordion'>");
while($row = mysql_fetch_array($result))
   {
   ?>
   <h3><a href='#'><?php echo($row['name']); ?></a></h3>
   <div id="tabs-<?php echo($row['id']); ?>">
	
   <table style="width: 95%;">
   <tr><td rowspan="12"><img src="<?php echo ($row['type_image']);?>" width="200" height="180" /></td></tr>

        <tr><td colspan="2"><b><u>Device Information:</u></b></td></tr>
        <tr><td colspan="2"></td></tr>
		<tr><td><b>Device Name:</b></td><td style="text-align:left;"><i><?php echo ($row['name']);?></i></td></tr>
        <tr><td><b>Type:</b></td><td style="text-align:left;"><i><?php echo ($row['type']);?></i></td></tr>
		<tr><td><b>Serial:</b></td><td style="text-align:left;"><i><?php echo ($row['serial']);?></i></td></tr>
		<tr><td><b>Date:</b></td><td style="text-align:left;"><i><?php echo ($row['date']);?></i></td></tr>
		<tr><td><b>Owner:</b></td><td style="text-align:left;"><i><?php echo ($row['owner']);?></i></td></tr>
		<tr><td colspan="2"></td></tr>
		<tr><td><b>Barcode:</b></td><td><i>Press the print button to view the barcode.</i></td></tr>
		
        </table>
		<a style="text-decoration: none;" class="openDelete" href="?deleteID=<?php echo $row['id']; ?>"><img src="style/delete.png" style="width: 50px; height: 50px" /></a>
</div>
   <?php
   }
   echo("</div>");  
   }
?>

Elke Deleteknop van elk device heeft nu dus een eigen value gekregen met de ID van het device.


<a style="text-decoration: none;" class="openDelete" href="?deleteID=<?php echo $row['id']; ?>"><img src="style/delete.png" /></a>

Als er op die link geklikt wordt dan word deze JavaScript code uitgevoerd van Jquery UI:


<script type="text/javascript">
			$(function(){
				$("#delete").dialog({
					modal: true,
					width: 450,
					height: 220,
					autoOpen: false
				});
				
				$('.openDelete').click(function(){
            	                  $('#delete').dialog('open');
            	                  return false;
				});

                                $("#accordion").accordion({
				collapsible: true,active:300,header: "h3", autoHeight: false
				});
			
			
		</script>

Deze Javascript code opent dan deze Dialog Box:

<div id="delete" style="display:none;" title="Delete Device">
			<form method="post" >
			<div class="ui-widget" style="text-align: center;">
			<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
				<p><span class="ui-icon ui-icon-alert" style="float: none; margin-right: .3em;"></span>
				<strong>Are you sure you want to delete this device?</strong><br />This action can\'t be undone! </p>
			</div>
			</div>
			<br />
			<div class="center"><button name="deleteConfirmed">Yes, Delete Device</button>
			</div>
			</form></div>

Als er in die DialogBox op deleteConfirmed wordt geklikt dan wordt dit scriptje gerunt om de waarde ervan te verwijderen uit de database:

<?php
if(isset($_POST['deleteConfirmed'])){
if(isset($_GET['deleteID'])){
$query="DELETE FROM information WHERE id='".$_GET['deleteID']."'";
mysql_query($query) or die(mysql_error());

echo('<div id="succesfull" title="Succesfully Deleted!">
<div class="ui-widget" style="text-align: center;">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em; text-align: center;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>The device has succesfully been deleted!</strong><br />You will be redirected in 3 seconds <br /> or click <a href="index.php">here</a>.</p>
</div>
</div> <meta HTTP-EQUIV="REFRESH" content="3; url=index.php">');

}else{
echo('ERROR! There was no delete ID defined!');
}
echo('</div>');
} ?>

Hoe kan ik dus de $row['id'] meegeven naar de JQuery Dialog van de link waarop is geklikt?

Kris Peeters

05-07-2013 14:23 gewijzigd op 05-07-2013 14:51

Okay, dat is duidelijk.

TO DO's voor jou:
- Maak links op deze manier:

<?php
echo '<a class="openDelete" data-id="' . $row['id'] . '">' . $row['name'] . '</a>';
?>
(EDIT: o ja, jij zet daar een delete <img>. Dat mag uiteraard ook. )

Bij het klikken op de link wordt eerst het data-id attribute gelezen. Die zetten we dan in een <input type="hidden">

Dat wordt dus mee gestuurd met het formulier en vind jij dus terug als $_POST['id']

- Vergeet niet die hidden input toe te voegen

<input type="hidden" name="id" id="item_id">

- Zie mijn javascript ...

Hier een uitgewerkt voorbeeld.
Je kan dit copy/pasten en testen as is.


<?php
// controleren of de id is meegegeven
if($_SERVER['REQUEST_METHOD'] === 'POST') {
  echo 'id van het item dat je wil deleten: ' . $_POST['id'] .'<br>';
}
?>
<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script language="Javascript">
    $(function(){
      $("#delete").dialog({
          modal: true,
          width: 450,
          height: 220,
          autoOpen: false
      });
      $('.openDelete').click(function(e) {
        // we lezen de id van de link, die in data-id="..." staat.
        var id= $(this).data('id');
        // We steken die id in een hidden <input>
        $('#item_id').val(id);
        // en dan openen we de dialog
        $('#delete').dialog('open');
        // return false;   // dit werkt niet in jQuery
         e.preventDefault(); // dit werkt wel.
      });
      $("#accordion").accordion({
        collapsible: true,active:300,header: "h3", autoHeight: false
      });
        
    });
    </script>
  </head>
  <body>
  
  <a class="openDelete" data-id="5">Foo</a><br>
  <a class="openDelete" data-id="8">Bar</a><br>
  <a class="openDelete" data-id="10">Hello</a><br>

  <div id="delete" style="display:none;" title="Delete Device">
    
    <form method="post" >
      <input type="hidden" name="id" id="item_id">
      <div class="ui-widget" style="text-align: center;">
        <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
          <p><span class="ui-icon ui-icon-alert" style="float: none; margin-right: .3em;"></span>
          <strong>Are you sure you want to delete this device?</strong><br />This action can\'t be undone! </p>
        </div>
      </div>
      <br />
      <div class="center"><button name="deleteConfirmed">Yes, Delete Device</button></div>
    </form>
    
  </div>
  
  </body>
</html>

Zal dat lukken?

Dimitri Van Reeth

08-07-2013 09:58

Bedankt het is gelukt!

Nu heb ik nog 1 vraag. Hoe kan ik deze variabele rechtstreeks oproepen in PHP?

var id= $(this).data('id');

[size=xsmall]Toevoeging op 08/07/2013 10:07:28:[/size]

Om het misschien iets duidelijker te maken:

Ik heb nu ook een knop om te inhoud te wijzigen. Maa rnu heb ik die id nodig om het formulier op te vullen met de waarden ervan.

Dus ik wil de id gebruiken om een SELECT query uit te voeren.

<?php
<div id="edit" style="display:none;" title="Edit Device Information">
<form method="post">
<?php $query5 = "SELECT * FROM information WHERE id='?????????'";
mysql_query($query5);

<table style="width: 95%;">
<tr><td colspan="2"><b><u>Device Information:</u></b></td></tr>
<tr><td><b>Device Name:</b></td><td style="text-align:left;"><input autofocus="autofocus" value="<?php echo $row1['deviceName']; ?>" class="register_field" type="text" name="deviceName" /></td></tr>
<tr><td><b>Type:</b></td><td style="text-align:left;"><input value="<?php echo $row1['type']; ?>" id="autocomplete" style="width: 250px; margin-right:-100px; text-align: center;" type="text" name="type" /></td></tr>
<tr><td><b>Type Image:</b></td><td><input class="register_field" style="cursor:pointer;" onClick="openKCFinder(this);" readonly="readonly" value="<?php echo $_row1['type_image']; ?>" type="text" name="type_image" /></td></tr>
<tr><td><b>Serial:</b></td><td style="text-align:left;"><input value="<?php echo $row1['serial']; ?>" class="register_field" type="text" name="serial" /></td></tr>
<tr><td><b>Date:</b></td><td style="text-align:left;"><input value="<?php echo $row1['date']; ?>" class="register_field" type="text" name="date" /></td></tr>
<tr><td><b>Owner:</b></td><td style="text-align:left;"><input value="<?php echo $row1['owner']; ?>" class="register_field" type="text" name="owner" /></td></tr>
<tr><td><b>Description:</b></td><td style="text-align:left;"><textarea value="<?php echo $row1['description']; ?>" name="description" rows="4" cols="30" style="margin-right:-110px;"></textarea></td></tr>

</table>
<div class="center"><button name="editConfirmed">Save!</button>
</div>
</form></div> ?>

Kris Peeters

08-07-2013 11:15

Wat gebeurt er als de gebruiker op die knop duwt?

Het simpelse is om daar een <a> van te maken

<a href="index.php?action=update&id=' . $_row['id'] . '"><img src="edit.png"></a>
Dan vind je die terug als$_GET['id']

Reageren

Inloggen om te reageren