Problems with colorbox gallery via form submit

JavaScript
,
1

Hi. I’m trying to make a gallery. In this gallery the user choose something (eg. a link, an input image) to open a certain gallery. Something like gallery of galleries. I use forms instead href. Thus a variable is sent via form submit to open some directory with php glob on another page.
I need to display images through iframes inside jquery colorbox plugin.
I’ve tried with this but I didn’t get anything.

<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>page1</title>
    <link rel="stylesheet" href="colorbox.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="../jquery.colorbox.js"></script>
    <script>
        $("#link").colorbox({ 
            inline:true, 
            href: "#msg"
        });
        $('input[type="submit"]').click(function(){
            var data = $(this).serialize();
            $.ajax({
                type: "POST",
                url: "page2.php",
                data: data,
                success: function(data){
                    $("#msg").html(data);
                    $("#link").click(); 
                    return false;
                }
            });
            return false;
        });
    </script>
</head>
<body>
    
    <div class="container">
        <form action="page2.php" method="post" id="formID">
            <input type="hidden" name="var" value="directory">
            <input type="submit" value="portfolio">
        </form>   
    </div>
    
    <a id="link" style="display:none"></a>
    <div id="msg" style="display:none;"></div>
    
</body>
</html>

<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>page2</title>
</head>
    
<body>
<?php
$variable = $_POST['var'];
$img_dir = $variable . "/";
foreach(glob($img_dir . '*.jpg') as $image) {
echo '<img src="'.$image.'">';
}
?>
</body>
</html>

Thanks in advance.

2

Hi @master_39, one problem is that the JS gets executed before the DOM is ready, so your jQuery objects are all empty. To fix this, just put your JS right at the end before the </body> tag.

Another issue is that you’re attempting to serialize the submit button, not the actual form. Try something like

$('form').submit(function () {
  const data = $(this).serialize()
  const url = this.action

  $.ajax({
    type: 'POST',
    url,
    data,
    success (data) {
      $('#msg').html(data)
      $('#link').click()
    }
  })

  return false
})

BTW, if you’re only using the form to hold values that are fixed and sent with AJAX anyway, you can do this with a link just as well by storing the values as data attributes, like e.g.

<a
  class="gallery"
  href="page.php"
  data-var="directory">
  Portfolio
</a>

$('.gallery').click(function (event) {
  const data = this.dataset // { var: "directory" }
  const url = this.href

  event.preventDefault()
  $.ajax(/* etc... */)
})

PS: Or actually, you might just use a plain old query string on the href attribute. :-P

3

Thank @m3g4p0p for your help. I have fixed my code.
Although I got a modal window I can’t display the page2.php content in this, as if the directory folder were empty.
I would really like to use dynamic value more than fixed values. In this way the information is updated by itself. Something like this:

 <?php 
    $path = "thumb/";
    $files = scandir($path);
    $num_files = count($files)-2;
    ?>
    
    <div class="container">
        <?php
        for($a = 0; $a < $num_files; $a++) :
        ?>
        <form method="post" >
            <input type="hidden" name="var" value="<?php echo $a; ?>">
            <input type="image" name="imagen" src="thumb/gA<?php echo $a; ?>.jpg" height=100>
        </form>   
        <?php
        endfor; ?>
    </div>

I’ve tried to find out why the modal window does’t display the folder content. Also I have tried with this:

    <script>
        $(function() { 
            $("#formID").submit(function() {
                $.post($(this).attr("action"), $(this).serialize(), function(data) {
                    $.colorbox({
                        html:data,
                        rel:'group1'
                    });
                },
                       'html');
                return false;
            });
        });
    </script>

In this way I can display the content, but I don’t know why the link needs to be clicked several times

4

With fixed I just meant that the user isn’t supposed to change them; you can then create dynamic links equally well, like

<?php
for($a = 0; $a < $num_files; $a++) :
?>
<a
  data-var="<?php echo $a; ?>"
  data-imagen="<?php echo 'thumb/gA' . $a . '.jpg'; ?>"
  href="page2.php">
  Click me
</a>   
<?php
endfor; 
?>

BTW an input element doesn’t have a src attribute… could that be the error?

As for the missing content, a first step would be to check what response is actually received (if any). You might log the data in the success method, or even better check the network panel in the dev tools of your browser. If you have it opened while sending the request, the response will appear there, including headers and the entire body. And with the status could you could rule out internal server errors (500) or not found (404).

5

You’re right. In any case I used forms instead of href as it gives me more security when I send data through the url.
For the missing content I have checked the network panel but I did not find any errors in this. In fact I can see the .jpg files in the network panel but not in the modal window.

1679×969 71.3 KB

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.