Ajax and session variables? Worksafe filter (hide hidden image)

Question

Ajax and session variables? Worksafe filter (hide hidden image)

I create a portfolio of photos. Some of my images are nudity, so I want to hide them by default until the user clicks the Toggle Worksafe Mode button.

I can do this with the standard form post (and sessions), but this causes the "submit form re-submit" errors when the user is back or reload s. I am trying to figure out an AJAX post to avoid this.

UPDATE: This is working code. Please note that this does NOT work with the jQuery thin distribution; which is one of the main reasons I had problems.

Image Index Page:

 <?php session_start(); if (!isset($_SESSION['Worksafe_Mode'] { $_SESSION['Worksafe_Mode'] = 1; } ?> <!-- other page content --> <script src="scripts/jquery-3.2.1.min.js"></script> <!-- other page content --> <button type="button" id="Worksafe_Button" name="Worksafe_Button"> Toggle Worksafe Mode </button> <script> $('#Worksafe_Button').click(function() { $.post("worksafe_mode_toggle.php") .done(function(data) { window.location.href = window.location.href; }); }); </script> <!-- other page content --> <?php $Connection = Connect(); $query = mysqli_query($Connection, 'SELECT uri, name, nsfw FROM images ORDER BY uri'); while($row = mysqli_fetch_assoc($image)) { if ($_SESSION['Worksafe_Mode'] == 1 && $row['nsfw'] == 1) { echo 'If you are over 18, toggle Worksafe Mode to view this image'; } else { echo '<img alt="'.$row['title'].'" src="../'.$row['uri'].'/s.jpg" srcset="../'.$row['uri'].'/m.jpg 2x">'; } } ?>

worksafe_mode_script:

 session_start(); if (isset($_SESSION['Worksafe_Mode'])) { if ($_SESSION['Worksafe_Mode'] == 1) { $_SESSION['Worksafe_Mode'] = 0; } else { $_SESSION['Worksafe_Mode'] = 1; } }

+5

javascript ajax php session session-variables

Lee saxon Jun 28 '17 at 15:37

source share

3 answers

There are several ways to do this, and this is related to how you hide or upload your images.

1. simple method

if you don’t need the user age and you just need to switch, you can do this with just the js variable, cookie and two versions of the link. however, you do not hide images, but download them. filtering is done on the server, where you can use a database query or a simple split of folders. eg:

 var nsfw = read_cookie('nsfw', false); // not an actual js function, search for how to read cookie in js --- read cookie value, default to false function loadImage(nsfw){ if (nsfw){ $.get('nsfw-image-list-url', function(resp){ // the url should return a json with list of image urls var list = resp; // jQuery automatically parse json with the right MIME list.forEach(function(val){ // insert image to page $('#container').append('<img src="' + val + '/>'); }); }); } else { $.get('sfw-image-list-url', function(resp){ // the url should return a json with list of image urls var list = resp; // jQuery automatically parse json with the right MIME list.forEach(function(val){ // insert image to page $('#container').append('<img src="' + val + '/>'); }); }); } }

and in the button click event:

 nsfw = !nsfw; // clear the image first if needed $('#container').empty(); loadImage(nsfw);

2. another simple method, but not as simple as # 1

you can also do this with just one link, which returns a list of images with their type, for example nsfw or other things.

note: this method still uses cookie

for example, the returned list is as follows:

 [ {"url": "some-image-1.jpg", "nsfw": "true"}, {"url": "some-image-2.jpg", "nsfw": "false"}, {"url": "some-image-3.jpg", "nsfw": "true"}, {"url": "some-image-4.jpg", "nsfw": "false"}, {"url": "some-image-5.jpg", "nsfw": "false"}, {"url": "some-image-6.jpg", "nsfw": "true"} ]

then you just visualize it when the conditions are met.

 function renderImage(nsfw){ $.get('image-list-url', function(resp){ list.forEach(function(val, key){ if (nsfw || !val.nsfw){ $('#container').append('<img src="' + val.url + '/>'); } }); }); }

and many other methods that take too long to explain, such as using Angular, React or Vue

still uses cookies to reload or back and does not take into account the age of the user.

as for a session-based approach, you only need this if you need to check users age

that is, if you have a membership function with DOB (date of birth) data on your site, if so, you can use @KScandrett's answer

+2

am05mhz Jul 04 '17 at 4:10

source share

Confirmation of the resubmission of the form occurs because you are not redirecting after the form is successfully submitted.

Take a look at this wiki page to see how to do it right. https://en.wikipedia.org/wiki/Post/Redirect/Get

0

Maksym moskvychev Jul 08 '17 at 22:14

source share

K scandrett · Accepted Answer · 2017-07-03T05:34:09+0000

I think ajax is a good approach in your case.

I could do something like display the default SFW image page as well as a toggle button.

When they click the button, it calls an ajax request for the external server, which sets / cancels the session value in toggleWorksafe.php . Finally, it starts the page refresh.

During page refresh, the PHP code checks to see if the session variable is set and either a filtered or unfiltered set of images is displayed and the button text is changed to match.

For implementation:

Include jQuery in the <head> section (jQuery makes ajax call easier):

 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> </head> <body> <?php session_start(); if (!isset($_SESSION['Worksafe_Mode'])) { $_SESSION['Worksafe_Mode'] = 'yes'; } ?> <button id="workSafe" type="button" name="Worksafe_Toggle_Button"> <?php if ($_SESSION['Worksafe_Mode'] == 'no') { echo 'Hide NSFW images'; } else { echo 'Include NSFW images'; } ?> </button> <!-- display safe images by default --> <?php if ($_SESSION['Worksafe_Mode'] == 'no') { echo '<br/><br/>Showing NSFW images'; } else { echo '<br/><br/>Showing safe images only'; } ?> <!-- any other page content here --> <script> $('#workSafe').click(function() { // ajax request to page toggling session value $.post("/toggleWorksafe.php") .done(function(data) { window.location.href = window.location.href; // trigger a page refresh }); }); </script> </body> </html>

toggleWorksafe.php

 <?php session_start(); if (isset($_SESSION['Worksafe_Mode'])) { if ($_SESSION['Worksafe_Mode'] == 'yes') { $_SESSION['Worksafe_Mode'] = 'no'; } else { $_SESSION['Worksafe_Mode'] = 'yes'; } } else { $_SESSION['Worksafe_Mode'] = 'yes'; } ?>

Ajax and session variables? Worksafe filter (hide hidden image)

1. simple method

2. another simple method, but not as simple as # 1

and many other methods that take too long to explain, such as using Angular, React or Vue

as for a session-based approach, you only need this if you need to check users age

More articles: