Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2014-08-21

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.

2014-08-21

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.