How to make my working wordpress modal open remotely WordPress
I have working modals on an archive page that I open like this:
(inside the loop)
<a class="btn" href="#upload-<?php echo $cat[0]->cat_ID; ?>" title="Upload new <?php echo $cat[0]->cat_name; ?> pic" data-toggle="modal" data-target=".upload-modal-lg">+ Upload</a>
(after the loop)
<?php get_template_part('content', 'upload'); ?>
my file contents of content-upload.php
<?php
global $cat;
$cat = get_the_category();
global $post;
?>
<div id="upload-<?php echo $cat_id; ?>" class="modal fade upload-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-lg"> <div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h2>Upload Pic</h2>
</div>
<div class="modal-body">
<div align="center">
<form class="form" name="upload" method="POST" action="http://www.starstyle.com/upload.php?cat_id=<?php echo $cat[0]->cat_ID; ?>" enctype="multipart/form-data">
modal body html blah blah blah
</div>
</div>
<div class="modal-footer">
<input class="btn btn-lg" type="submit" name="submit" value="Upload" />
</form> </div>
</div>
</div> </div>
how would I open this modal remotely (I think is what I want) instead of having the contents of content-upload load at the bottom of every archive page no matter what
I am using a certain category ID in the button, the modal, and the form URL in the modal which was ALOT of trial and error
Answers (2)
Luis Abarca answers:
Well, an idea for a quick solution is to create a custom template for your current form.
Then call the page via AJAX, like http://www.starstyle.com/custom-page-upload?cat=1234
Your normal archive template
... your code
<!-- footer -->
<div class="modal-windows"></div>
JS script
$( ".modal-window" ).load( "http://www.starstyle.com/custom-page-upload?cat=1234");
Katie comments:
when you say custom template you mean custom page right?
how do code the variable cat id to the js script?
$( ".modal-window" ).load( "http://www.starstyle.com/custom-page-upload?THISPART");
and that goes goes into archive page or the new custom page?
and then would I need to put something like this inside the new page custom-page-upload
if (isset($_GET['cat_id'])) {
$cat_id = intval($_GET['cat_id']);
}
Luis Abarca comments:
Yeah, custom page template, well, you can add the ID to the link and then read it via jQuery.
<a class="btn modal-windown-link" id="<?php echo $cat[0]->cat_ID; ?>" href="#upload-<?php echo $cat[0]->cat_ID; ?>" title="Upload new <?php echo $cat[0]->cat_name; ?> pic" data-toggle="modal" data-target=".upload-modal-lg">+ Upload</a>
jQuery
var cat_id = $('.modal-window-link').attr('id');
// Custom page template
$cat_id = get_query_var('cat_id');
Have a look to the Jhon recommendation too.
John Cotton answers:
You could use the WP ajax functions.
In your theme or plugin file put this:
function my_modal() {
get_template_part('content', 'upload');
}
add_action( 'wp_ajax_my_remote_modal', 'my_modal' );
And your link should be this:
<a class="btn" href="#upload-<?php echo $cat[0]->cat_ID; ?>" title="Upload new <?php echo $cat[0]->cat_name; ?> pic" data-toggle="modal" data-target=".upload-modal-lg" data-remote="<?php echo admin_url( 'admin-ajax.php?action=my_remote_modal' ); ?>">+ Upload</a>
You might need to tweak the content of content-upload.php to get exactly the HTML you want, but the principle will work.
Katie comments:
I like this approach but I tried and the modal doesn't open - maybe I need to change the href part??
John Cotton comments:
You could try that. Also, check that the correct url in the data-remote tag. And try calling it directly (remember that you will need a nopriv action for the ajax if you want unauthenticated users to be able to see the pop-up.
You are using the bootstrap modal aren't you?
Katie comments:
Do I need to enqueue ajax to load in functions.php somehow
function my_modal() {
get_template_part('content', 'upload');
}
add_action( 'wp_ajax_my_remote_modal', 'my_modal' );
Katie comments:
yes I am using bootstrap
Katie comments:
the href url looks correct - this is a sample page where im doing this
http://www.starstyle.com/valentino-noir-rockstud-all-over-leather-crossbody-bag-sp171241/
see the upload button
Katie comments:
function my_modal() {
get_template_part('content', 'upload');
}
add_action( 'wp_ajax_nopriv_{what is my action???}', 'my_modal' );
Katie comments:
I put
function my_modal() {
get_template_part('content', 'upload');
}
add_action( 'wp_ajax_nopriv_my_remote_modal', 'my_modal' );
John Cotton comments:
add_action( 'wp_ajax_nopriv_my_remote_modal', 'my_modal' );
John Cotton comments:
This is the HTML I see on that page:
<a class="btn" href="#upload-474" title="Upload new Ashley Tisdale Bags pic" data-toggle="modal" data-target=".upload-modal-lg">+ Upload</a>
Katie comments:
I turned of the page cache now you should see the ajax remote part - when I load the url directly
http://www.starstyle.com/wp-admin/admin-ajax.php?action=my_remote_modal
I get a page with a 0 on it
John Cotton comments:
function my_modal() {
get_template_part('content', 'upload');
exit();
}
will get rid of the 0.
So does that work as a pop up now?
John Cotton comments:
You've got an href AND the data-remote in there.
Remove the href and it should work.
Katie comments:
it still has 0 when I load directly and no pop up
http://www.starstyle.com/wp-admin/admin-ajax.php?action=my_remote_modal
Katie comments:
took out the hfref still wont open :(
Katie comments:
href
John Cotton comments:
<blockquote>it still has 0 when I load directly and no pop up</blockquote>
It doesn't if you put something random on the url which means you are looking at a cached version.
You need to switch caching off will you get this right.
I think it's not working because you have a javascript error. infinitescroll in custom.js is not defined.
Fix that and it will work.
John Cotton comments:
<blockquote>it still has 0 when I load directly and no pop up</blockquote>
It doesn't if you put something random on the url which means you are looking at a cached version.
You need to switch caching off will you get this right.
I think it's not working because you have a javascript error. infinitescroll in custom.js is not defined.
Fix that and it will work.
John Cotton comments:
<blockquote>it still has 0 when I load directly and no pop up</blockquote>
It doesn't if you put something random on the url which means you are looking at a cached version.
You need to switch caching off will you get this right.
I think it's not working because you have a javascript error. infinitescroll in custom.js is not defined.
Fix that and it will work.
John Cotton comments:
<blockquote>it still has 0 when I load directly and no pop up</blockquote>
It doesn't if you put something random on the url which means you are looking at a cached version.
You need to switch caching off will you get this right.
I think it's not working because you have a javascript error. infinitescroll in custom.js is not defined.
Fix that and it will work.
Katie comments:
I added a line in functions.php and 0 has gone away now
function my_modal() {
get_template_part('content', 'upload');
exit;
}
add_action('wp_ajax_my_remote_modal', 'my_modal');
add_action('wp_ajax_nopriv_my_remote_modal', 'my_modal' );
fixed the js infinite scroll error - still no pop up! dang it
Katie comments:
Im giving up for now - im putting the old way back in
John Cotton comments:
You still had another js error.
The bootstrap js won't work until you fix your other js problems.