Ajax and multiple nonces

  • Resolved redrocksrover2

    (@redrocksrover2)


    12 years, 1 month ago

    I have a challenge that may be more complex than this board can help with…

    I’m writing a plugin that allows people to add or remove photos to a “Lightbox” that gets attached to their user metadata – sort of like a “favorite posts” function that stores the post IDs of photos in an array. The Lightbox is binary: if the photo isn’t in the Lightbox it gets added, if the photo is in the Lightbox, it gets removed. The user metadata is updated each time accordingly.

    I’ve built a graceful degrade that processes the add and remove functions with or without Ajax. The huge problem I’m having is that when the actions are performed and processed via Ajax, the Javascript has to be updated dynamically to regenerate the nonces that go along with the add and remove actions. To make it even more challenging, sometimes photos are displayed individually, and other times thumbnails of photos are displayed in a grid, and I’d like users to be able to add/remove photos to their Lightbox from the grid as well as on the individual photo pages. In this sense there could be multiple add/remove actions at any time on one page.

    Currently I can’t figure out how to dynamically update and regenerate the nonces for the add and remove functions for the Ajax calls.

    This is where I’m hoping to get some tips– how does one request a new nonce in the receiving php, assign the Ajax js object that variable, and then send it back to the requesting page for the “next” ajax sequence(s)?

    I’ve read these suggestions and tips – the first link has been the most helpful in terms of the concept of requesting a new nonce in the receiving PHP function(s), but I still can’t figure out how to dynamically regenerate the Javascript object variables accordingly:

    1) https://wordpress.stackexchange.com/questions/19826/multiple-ajax-nonce-requests

    2) https://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/

    3) https://wp.tutsplus.com/tutorials/creative-coding/capabilities-and-nonces/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    I’ve implemented something similar. It’s also binary, except I’m toggling a user setting on and off. This a a moderator only function to change user settings on request. The setting is related to the ability for a user/commenter to select to have any replies to their comment emailed to them.

    So we have a number of comment elements that could be toggled at any time, in any order, all by the same function, using one nonce at a time. When an item is first clicked to toggle it, the AJAX request is sent with the nonce stored when the page was served. The server responds with the new setting, along with a new nonce. The jquery callback takes that nonce out of the response and saves it to use for the next request.

    My relevant code is in pastebin.

    Thread Starter redrocksrover2

    (@redrocksrover2)

    Thanks for sharing- this helps me a lot- particularly how you regenerate the nonce and send it back.

    I’m curious how you’re storing & referencing your ‘hidden comment ID field’ on the front-end PHP page? Looking at your .js example, I understand the data.split(‘,’) to get the new nonce, but it’s not clear to me what you’re doing in the very last step where you’ve got the ‘replace current value with new…” comment. This last bit is where I’ve been chasing my tail in my own system.

    Moderator bcworkz

    (@bcworkz)

    Wow, that is confusing without seeing the HTML! And I only worked on this a few weeks ago! I had to grab a snippet for myself to re-understand, so this is it:
    <td class='email column-email'>x<input type='hidden' value='220' class='commentid' /></td>
    As you can see, the comment ID is 220. (It’s a test platform, so little content) The code after the “// replace current value…” comment is just my way of inserting the value sent by the server in place of the current value. In the above snippet, the current value is ‘x’, so the server’s response would be either ‘Yes’ or ‘!’ if there was a error updating the meta table. All else is just rebuilding the original content.

    Another confusing thing is the jquery selector of the last line is actually “this”, not the table cell “‘td'”. I will confess to not being a genius coder and was playing around with different things to get it working. At one point I thought I had a scope issue so assigned ‘this’ to ‘td’, and never went back to take it out. It seemed clever at the time, now it’s just confusing. Something finally supporting PHP’s insistence all variables start with ‘$’.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Ajax and multiple nonces’ is closed to new replies.

Tags