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">×</a>
</div>
How can pass $passing_var from the main page to the modal window?
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');
});
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">×</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
Related
I have multiple reveal modals on the page and I trying to display the dynamic custom post type content on each modal when clicked, but the modal keeps repeating the same content on all the modals.
I am trying to initiate new modal on every click so the content doesn't repeat but for some reason it's just not working. If I remove Reveal Modal, then can view the dynamic content. Am I initiating the reveal modal properly? I am not seeing any errors on the console.
Here's my code:
<a class="modal" data-open="exampleModal">Reveal Button</a>
<div class="reveal large" id="exampleModal" data-reveal>
<!-- content -->
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<script>
jQuery(function($) {
var modal = $('#exampleModal');
$('a.modal').click(function() {
var reveal = new Foundation.Reveal(modal);
});
});
</script>
Can someone help please. Thanks in advance.
Here, when i click Go Back button it perfectly goes to back page
<script>
function goBack() {
window.history.back();
}
</script>
<div class="back">
<button onclick="goBack()" class="btn btn-voilet" > << Go Back</button>
</div>
Now if i click back to curriculum button, it doesnt go back to home page can someone help me do it,
<script>
function back_to_curriculum() {
window.history.home();
}
</script>
<div class="home">
<button onclick="back_to_curriculum()" class="btn btn-voilet" > << Back to Curriculum</button>
</div>
You can take advantage of Wordpress' home_url() function to get the Home URL of the site, then use Javascript to navigate there:
<script>
function back_to_curriculum() {
window.location.href = '<?php echo home_url(); ?>';
}
</script>
I am looking for an alternative solution to HTML Framesets and from what I have read so far, I can use DIVs with CSS to create column contents. Basically, I want my images in one column on the left and when clicked should call details.php (tagged as id=details) in the column on the right.
I have started off with the following; unfortunately, clicking links in the left column is not calling anything in the right column:
<div class="col1">
<a href="details.php?PersonID=<?php echo $PersonID; ?>" target=details> <?php echo $row['FamilyName']; ?> <?php echo $row['FirstName']; ?> </a>
</div>
<div class="col2" id="details">
<?php $file = file_get_contents('./details.php', true); ?>
</div>
I will appreciate any advise to make this work.
You can combine HTML & CSS with jQuery or any javascript libraries to load the content (details.php) asynchronously using AJAX.
$('a').on('click', function(e) {
var contentUrl = $(this).attr('href');
$('#details').load(contentUrl, function() {
console.log('the content has been loaded is appended into the div');
});
});
For more reference you can go to jQuery API - load.
I have a HTML form which is a popup. When the user click the button, form will get appear at the same page.
But this code doesn't work in Wordpress post:
<a href="javascript: void(0)" onClick="OpenPopup();">
<img border="0" src="submit.jpg">
</a>
What should I do for this?
Iexplore doesn't support onClick, may be you can do this by creating a jQuery function :
Add ID first:
<img id='image_id' border="0" src="submit.jpg"/>
Then, jQuery function:
<script>
$(document).ready(function(){
$('#image_id').click(function(){
OpenPopup();
});
});
</script>
So I need to use addthis. Please visit my page which I am trying to implement add this.
http://www.iamvishal.com/dev/node/13
The add this buttons won't show up on my page. I am able to implement it using plain html code but the drupal implementation is not working.
The js is getting loaded but I am unable to debug the problem as I am unable to find the problem why this is happening.
cheers,
Vishal
p.s - for more on addthis pls visit http://www.addthis.com/
code:
<script type="text/javascript">
(function ($) {
Drupal.behaviors.slider = {
attach:function(context) {
var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
if (window.addthis) {
window.addthis = null;
}
$.getScript(script);
}
};
}(jQuery));
</script>
<div id="sociallinks">
<div class="viewing">Request a viewing</div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->
</div><!-- end of social links -->
What worked for me in D7 was to create a new 'text format' where there were no filters enabled. For whatever reason D7 thinks that the AddThis code is faulty or incomplete.
configuration > content authoring > text formats > add text format
Give it a shot.