Menu icon Foundation
Modal Reveal and PHP

Hello Everyone,

I having a hard time trying to figure out how get so data I have loaded into a Modal.

I'll break down what happens,

Page loads and it loads the last 10 items user uploaded. Then if I would like to delete this item there is a button that is suppose to launch a Modal with the content of item in. I use the id to get the information from database like so ?id=2. How can I send the information from page.php to the modal I trigger on the same page?

This is the div that displays the uploaded items.

<div class="row">
      <div class="large-3 column musicup">
        <p><?php echo $row_m['title']; ?></p>
      </div>
      <div class="large-3 column musicup">
        <div class="button <?php echo $row_m['status']; ?>"><?php echo $row_m['status']; ?></div>
      </div>
      <div class="large-4 column musicup">
        <p><?php echo date('l, F j Y',strtotime($row_m['uploaded'])); ?></p>
      </div>
      <div class="large-1 column musicup">
        <p><a href="#?id=<?php echo $row_m['status']; ?>" data-reveal-id="deleteMusic" style="font-weight:bold">X</a></p>
      </div>
    </div>
            

         

And this is my Modal. Please don't comment on the outdated mysql_ functions, i know already...

<!-- DELETE MUSIC MODAL -->

<div id="deleteMusic" class="reveal-modal" data-reveal>
<?php
    $id = $_GET['id']; 
	$query = "SELECT * FROM songs WHERE song_id = $id";
	$result = mysql_query($query);
	$row = mysql_fetch_array($result);
?>
  <h2><?php echo $row['title'] ?></h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

<!-- END DELETE MUSIC MODAL -->
            

         

this obviously doesn't work, but this is the idea I had in my head and the easiest way to explain what I am looking to do with it.

P.S. I know zero about javascript and jquery hence why I chose a framework. I am willing to learn a bit but please be thorough so I don't ask a bunch more stupid ones.

Thank you all in advance,

Vincent Cerone

modalrevealPHPjavascriptjquery

Hello Everyone,

I having a hard time trying to figure out how get so data I have loaded into a Modal.

I'll break down what happens,

Page loads and it loads the last 10 items user uploaded. Then if I would like to delete this item there is a button that is suppose to launch a Modal with the content of item in. I use the id to get the information from database like so ?id=2. How can I send the information from page.php to the modal I trigger on the same page?

This is the div that displays the uploaded items.

<div class="row">
      <div class="large-3 column musicup">
        <p><?php echo $row_m['title']; ?></p>
      </div>
      <div class="large-3 column musicup">
        <div class="button <?php echo $row_m['status']; ?>"><?php echo $row_m['status']; ?></div>
      </div>
      <div class="large-4 column musicup">
        <p><?php echo date('l, F j Y',strtotime($row_m['uploaded'])); ?></p>
      </div>
      <div class="large-1 column musicup">
        <p><a href="#?id=<?php echo $row_m['status']; ?>" data-reveal-id="deleteMusic" style="font-weight:bold">X</a></p>
      </div>
    </div>
            

         

And this is my Modal. Please don't comment on the outdated mysql_ functions, i know already...

<!-- DELETE MUSIC MODAL -->

<div id="deleteMusic" class="reveal-modal" data-reveal>
<?php
    $id = $_GET['id']; 
	$query = "SELECT * FROM songs WHERE song_id = $id";
	$result = mysql_query($query);
	$row = mysql_fetch_array($result);
?>
  <h2><?php echo $row['title'] ?></h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

<!-- END DELETE MUSIC MODAL -->
            

         

this obviously doesn't work, but this is the idea I had in my head and the easiest way to explain what I am looking to do with it.

P.S. I know zero about javascript and jquery hence why I chose a framework. I am willing to learn a bit but please be thorough so I don't ask a bunch more stupid ones.

Thank you all in advance,

Vincent Cerone

John Wicks about 5 years ago

Vincent,

I would suggest using ajax to load the data into the modal.

<a href="/deleteMusic.php?id=<?php echo $row_m['song_id']; ?>" data-reveal-ajax="true" data-reveal-id="deleteMusic" style="font-weight:bold">X</a>
$(document).on('opened', '[data-reveal]', function () {
  var modal = $(this);

  if(modal.attr('id') == 'deleteMusic'){
    $('#deleteMusic').on('submit', 'form', Foundation.utils.debounce(function(e){
    }, 300, true));
  }
}); 

<!-- DELETE MUSIC MODAL -->

<div id="deleteMusic" class="reveal-modal" data-reveal>
<?php
    $id = $_GET['id']; 
  $query = "SELECT * FROM songs WHERE song_id = $id";
  $result = mysql_query($query);
  $row = mysql_fetch_array($result);
?>
  <h2><?php echo $row['title'] ?></h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>

<!-- END DELETE MUSIC MODAL --> 
<form action="/deletMusic.php">
   <input type="hidden" name="id" value="<?php echo $id; ?>"/>
   <input type="hidden" name="action" value="delete"/>
   <button class="button">Submit</button>
</form>
</div>

Then when the user clicks the submit button you can handle the delete action...

Jw

Teguh about 4 years ago

Any one have some crud script with modal, please.....