CODEWITHSUNDEEP
wordpressreveal.jszurb-foundation-5
Alex
Alex

Reputation: 21

How to pass a variable to reveal modal

Hello i am developing my own functionality plugin on wordpress and i am stuck on trying to pass a variable from a page to a modal that opens after a link is clicked displaying a delete confirm dialog

The link opening the modal is

<a href="<?php echo $passing_var?>" data-reveal-id="deleteModal" class="deleteLink">
    <i class="fi-trash size-24 icolored"></i>
</a>

The Modal window code 

<div id="deleteModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <h2>Are you sure you want to DELETE? <?php echo get_the_title( $passing_var ); ?>  </h2>
    <p class="lead">This cannot be undone</p>
    <a class="deleteButton button" href="#">delete</a>
    <a class="close-reveal-modal">&#215;</a>
</div>

How can pass $passing_var from the main page to the modal window?

Upvotes: 2

Views: 2398

Answers (2)

Alex
Alex

Reputation: 21

Finally got it working after a lot of trial and error and google research... nothing unexpected here... :(

So if anybody in the future needs to pass a variable from a page to a modal must follow three steps...

1.Create the modal button

<button data-reveal-id="myModal" data-my-number="1">First One</button>

2.Add the Modal Dialog

<div id="myModal" class="reveal-modal"><h2>Awesome. I have it.</h2><p class="lead">The <span class="buttonText"></span>.  It is mine.</p><a class="close-reveal-modal">&#215;</a></div>

3.Add the Javascript

$(document).foundation();$('[data-reveal-id]').on('click', function() {var targetModal = $('#' + $(this).data('revealId'));var newText = $(this).text() +' (' + $(this).data('myNumber') + ')';targetModal.find('.buttonText').text(newText);});

Please visit this link if you want to see a working example... thank you all

Upvotes: 0

Pardeep Dhingra
Pardeep Dhingra

Reputation: 3946

Set Data Attibute

<a data-id="<?php echo $passing_var?>" class="deleteLink">
    <i class="fi-trash size-24 icolored"></i>
</a>

Read data attribute to use in modal

$(document).on("click", ".deleteLink", function () {
     var dataId = $(this).data('id');
     $('#deleteModal').modal('show');
});

Upvotes: 2

Related Questions