laravel mews captcha_img() does not return on refresh

I have wracked my brain and the internet seeing if anyone else has had this issue, but no luck. So I turn to you all.

I'm using Mews/Captcha package with a Laravel 5.5. application.

I'm implementing a contact form where the user fills it out, enters in Captcha data, and submits it. All of that works. If you go to the form, the captcha image appears. If you refresh the page, a new captcha image appears. If you try to submit the form without the captcha or an incorrect captcha, it fails. If you submit with the correct captcha it succeeds.

The issue I am having is with the refresh button in case the user wants to change the image. For the life of me, I can't get it to return the image, even though I've seen numerous examples that claim to work that are using similar code. What happens is that the current captcha image is replaced by blank space.

Here's the code for the button:

<script>
    $(document).ready(function(){
        $('#reload').on('click', function(){
            $.ajax({
                type: 'GET',
                url: '/reload-captcha',
                success: function(data) {
                    $("#captchadiv").html(data.captcha);
                }
            });
        });
    });
</script>

Here's the code further down the page where the captcha image and buttons are:

        <tr>
            <td><button type="button" class="button reload" id="reload">Refresh</button></td>
            <td><div id="captchadiv">{!! captcha_img('flat') !!}</div></td>
        </tr>
        <tr>
            <td><label for="captcha">Captcha</label></td>
            <td><input type="text" id="captcha" class="form-control" placeholder="Enter Captcha" name="captcha">
                @if ($errors->has('captcha'))
                    <span class="textRed">
                        <strong></strong>
                    </span>
                @endif</td>
        </tr>

Here's the code for the response:

    public function reloadCaptcha()
    {
        return response()->json(['captcha'=> captcha_img('flat')]);
    }

Now, if I replace captcha_img('flat') with some text and click the button, it behaves as expected and replaces the previous image with the text.

So either one of two things is going on:

1. the captcha_img() function is failing during the response step. So nothing returns.
2. the javascript in the form is failing to extract the image from the returned json object.

Note that in my experiments, I put in an alert which showed the data and the status, and the data displayed an "object" and the status was "success".

I'm at my wit's end. If you want to see it in action, you can visit the page here: https://creativehaven.net/contact

via Chebli Mohamed