0

I have a custom page that I'm using that lets users transcribe archival document and upload them to a relational database (for history research stuff).

What I'm trying to do at the moment is add a function so that they can select the photo (already uploaded to the Media Library) of the report that they are transcribing, so it can be displayed when researchers look at the report.

I followed https://dobsondev.com/2015/01/23/using-the-wordpress-media-uploader/ this tutorial, pretty much copying the code exactly, except for also using https://www.smashingmagazine.com/2011/10/how-to-use-ajax-in-wordpress/.

I'm not writing a plugin- just using a custom page template (modifying one from Bangkok Press template, anyways). The problem is- while the button appears (I mean, that's simple, it's just an HTML button)- when I click on it, nothing happens, and the Wordpress Media library manager/add whatever dialogue doesn't happen (which is what i'm trying to do)

Code follows

 /* Add the media uploader script */
  function my_media_lib_uploader_enqueue() {
    wp_enqueue_media();
    wp_register_script( 'media-lib-uploader-js', plugins_url( 'media-lib-uploader.js' , __FILE__ ), array('jquery') );
    wp_enqueue_script( 'media-lib-uploader-js' );
  }

  add_action("wp_ajax_admin_enqueue_scripts", "my_media_lib_uploader_enqueue");
  add_action("wp_ajax_nopriv_admin_enqueue_scripts", "my_media_lib_uploader_enqueue");

is what I put in my functions file- not modifying a file from the theme, but it's just the functions that I've written to work with the DB/create the transcription interface.

The .js file I've used is as follows

jQuery(document).ready(function($){

  var mediaUploader;

  $('#upload-button').click(function(e) {
    e.preventDefault();
    // If the uploader object has already been created, reopen the dialog
      if (mediaUploader) {
      mediaUploader.open();
      return;
    }
    // Extend the wp.media object
    mediaUploader = wp.media.frames.file_frame = wp.media({
      title: 'Choose Image',
      button: {
      text: 'Choose Image'
    }, multiple: false });

    // When a file is selected, grab the URL and set it as the text field's value
    mediaUploader.on('select', function() {
      var attachment = mediaUploader.state().get('selection').first().toJSON();
      $('#image-url').val(attachment.url);
    });
    // Open the uploader dialog
    mediaUploader.open();
  });

});

and the following is what I've put into the page itself,- in the demo,it's in a form on it's own- but for me, it's part of an existing form (so that the image URL can be passed to the next page through $_POST like all of the other data and inserted into the DB.

<input id="image-url" type="text" name="image" />
                        <input id="upload-button" type="button" class="button" value="Choose Image" />

If you want to see the problem itself, http://globalmaritimehistory.com/adm-8-database-project/adm-8-report-transcription-interface/ is the link- (this page is fine)- if you click on "Choose REport Type" (with Deployment Report)- and at the bottom of is the 'Choose Image' button- which is the part that doesn't work.

I'd very much appreciate any help with this.

  • I see you're using the old WP-Admin AJAX file, is there a reason you don't make AJAX requests to the modern REST API endpoints? – Tom J Nowell Jan 29 at 16:48
  • Yes, b/c I didn't know they exist? The tutorials I'm using are all several years old. – Sam McLean Jan 29 at 17:10
  • also, I think "use" is a loosely applied word- I'm not successfully doing anything yet. – Sam McLean Jan 29 at 17:11
0

I think there's a misunderstanding here about how browser page requests work, and how PHP loads and runs WordPress

When you make a request to WordPress, PHP loads WordPress and processes the page, then it's all cleaned up and thrown away. Unlike other platforms such as Java or Python, there is no continuously running program in the background. Each request loads WordPress from scratch. For things to carry over to the next request you have to save things in the database or the filesystem.

The same is true of browser requests. Your browser sends a HTTP request to the server, and it generates a HTML document and sends it back.

Which leads us to your code. An AJAX request is another request, sent by the browser, that loads WordPress from scratch. It can't go back in time to modify the scripts and styles in the previous request to add the media library.

For enquing scripts to work, you need to do it on the same request that generates the page, and that page needs to call wp_head. So, it can never be done on an AJAX request as there is no header to print the tags out in.

TLDR: You can't use AJAX queries to enqueue scripts and styles, that's not how it works, and you can't use AJAX to change what happened in PHP on a previous request

If you want to enqueue those things on your page, you need to do it in your theme, on the appropriate hook, not in an admin AJAX handler. There's an example of this in the tutorial you're following that can be copy pasted as is, just keep in mind all the tutorials you'll find will assume you're wanting to do this in WP Admin, not the frontend

| improve this answer | |
  • THank you, this is really helpful. Is it even possible to do what I want to do (from the front end, I guess?) I don't object to opening/editing other files/core files- I'm just not sure which ones to go into – Sam McLean Jan 29 at 18:25
  • So reading through- do I need to call the function the enqueues the thing, eg ``` my_media_lib_uploader_enqueue() ``` that goes on the previous page? – Sam McLean Jan 29 at 19:12
  • I've found the file where wp_head is called. What do I add this file? – Sam McLean Jan 29 at 20:18
  • You don't add anything to that file, wp_head calls a lot of things, I think maybe you've dug a little too far in this particular direction and need to return back to the problem, and ask a new question "How do I show the media uploader on the frontend?", right now it would be easier to answer that and explain how it should be done, than it would be to fix your attempt and explain the misunderstandings – Tom J Nowell Jan 30 at 10:17
  • I certainly don't object to that. What aspects of the code do you need to see in order to fix things? (I mean, my code's not secret or anything) – Sam McLean Jan 30 at 18:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.