Wordpress Bootstrap Modal WordPress

• SOLVED

Currently using the bootstrap.js to produce some modals but having some difficulty.

I want to load a post into the modal window when clicked.

I've got the following code so far:

JS:
<script type="text/javascript">
$(function() {
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
if (href.indexOf('#') == 0) {
$(href).modal('open');
} else {
$.get(href, function(data) {
$('<div class="modal">' + data + '</div>').modal();
});
}
});
});
</script>

Link which loads the modal:
<a href="<?php bloginfo('template_url');?>/modal.php?ID=<?php the_ID(); ?>" data-toggle="modal">Modal</a>

And modal.php:


<div class="modal-header">
<a class="close" data-dismiss="modal">&times;</a>
<h3>Modal header 2</h3>
</div>
<div class="modal-body">

<?php
$post_id = $_GET['ID'];
$queried_post = get_post($post_id);
$title = $queried_post->post_title;
echo $title;
echo $queried_post->post_content;
?>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
</div>

When the Link is clicked the modal opens and the following error appears.

<strong>Fatal error: Call to undefined function </strong>

How do I get around this and load the content from the specified post?

Answers (3)

2013-01-23

Arnav Joy answers:

try adding following lines at top of modal.php

if (!function_exists('get_option'))
require_once('../../../wp-config.php');

correct path if it is not correct..

---

floy comments:

Thanks Arnav! That worked!

---

floy comments:

Is there anyway to get it to output the post data using the following?

<?php
query_posts('p=SOMEPOSTIDHERE');
while (have_posts()): the_post();
the_title();
the_content();
endwhile;
?>


Returns nothing.

2013-01-23

John Cotton answers:

You shouldn't do an ajax call to WordPress like that.

For a start, (although I can't see what other code you have) you're probably not loading WordPress it's self and it's probably get_post that's causing the error.

There's a really good explanation of how ajax works with WordPress here:

http://codex.wordpress.org/AJAX

Have a read and then ask any questions you have as a follow-up

JC

PS Big Clue: you need to hook in to the wp_ajax_...hook and return your HTML through that. See the code on this page:

http://codex.wordpress.org/AJAX_in_Plugins

---

John Cotton comments:

Client side



<script type="text/javascript">

$(function() {

$('[data-toggle="modal"]').click(function(e) {

e.preventDefault();

var href = $(this).attr('href');

if (href.indexOf('#') == 0) {

$(href).modal('open');

} else {
data.action = 'my_modal_box';
data.ID =$(this).data('ID');

$.get(href, data, function(response) {

$('<div class="modal">' + response+ '</div>').modal();

});

}

});

});

</script>


Server side
<a href="<?php admin_url( 'admin-ajax.php' ) ;?>" data-ID=<?php the_ID(); ?>" data-toggle="modal">Modal</a>






function my_modal_box() {



}



add_action('wp_ajax_my_modal_box', 'my_modal_box');
add_action('wp_ajax_nopriv_my_modal_box', 'my_modal_box');

2013-01-23

Sébastien | French WordpressDesigner answers:

what is that ? : $post_id = $_GET['ID'];

if you want to use the ID of the current post you must use $post->ID

edit :
there is no get_variable "ID"... you have a get_variable "ID" ?
Have you test this $_GET['ID'] ?
This code return everything ?

if you want to return the ID of the current post you must to use $post->ID or the function get_the_ID()

---

floy comments:

Passing the ID of the post to be pulled into the modal window between the page and modal.php....

---

floy comments:

It works with Arnavs solution.

Your not understanding the question.