C5-8.2.1: Ajax form

Permalink
Hello,

I took that code as a basis for my form:https://webdesign.tutsplus.com/tutorials/building-a-bootstrap-contac... , (my 3 files attached), but the form doesn't work even in such simple form. The "success" message doesn't show up.

Am I missing anything?

3 Attachments

linuxoid
 
hutman replied on at Permalink Reply
hutman
Where did you put these files? I believe if you want to ajax call the xcontroller.php you will need to setup a route to make it available.

What do you see in your developer console network tab when you submit the form?
linuxoid replied on at Permalink Reply
linuxoid
They're all in the same block's folder.

The thing is, if I use the blocks controller, it refreshes the page after submit, but otherwise it all works fine. I don't want the page to be refreshed. I want the form to be submitted in a lightbox and to keep it open to receive either success or error message in the same lightbox.

The developer console shows: "POSThttp://mysite.com/xcontroller.php... 404 (Not Found)"! Hmm, why? It's there in the same folder.
linuxoid replied on at Permalink Reply
linuxoid
Ah! Just noticed the path to the controller "POSThttp://mysite.com/xcontroller.php... 404 (Not Found)" - it's taking it from the root, not from the block! I'll have to fix that somehow.

So how do I use PHP in a .js file to get my block's URL? Or I just write it directly, e.g.http://mysite.com/application/blocks/contact_form/xcontroller.php...
hutman replied on at Permalink Reply
hutman
Check out this article on ajax in a block view template -https://documentation.concrete5.org/developers/working-with-blocks/c...
linuxoid replied on at Permalink Reply
linuxoid
Thanks a lot for the link, looks promising.

Does it mean I have to use a link <a> with a JS onclick="form.submit();" instead of a 'submit' button? And the form couldn't be submitted without JS?

Or can I pass the $view->action() through the button?
hutman replied on at Permalink Reply
hutman
No, that part should be fine. It's more showing you how to setup the controller and the form action.
linuxoid replied on at Permalink Reply 1 Attachment
linuxoid
It works somehow but something's not quite right. Please check the block attached.

What is does is if the Name is empty, it returns an 'error'. And then stops responding. If I refresh the page and the Name is > 2 characters long, it returns a 'success'. And then it stops again.

So, the logic in the controller works. But something is missing to make the form respond after every click on the link.

What else puzzles me is that alert($(this).attr('href')) shows 'Undefined'.

And if I replace the link for a button:
<button type="submit" id="form-submit" class="btn" href="<?php echo $view->action('like', Core::make('token')->generate('contact_form'))?>" data-action="block-contact-form">Submit</button>

it doesn't work at all.
linuxoid replied on at Permalink Reply
linuxoid
As another thought, does the JS have to be in the view.php or it can be in a view.js?
linuxoid replied on at Permalink Reply
linuxoid
Ok, I got it to work better, but it still misbehaves a little.

Here's the controller bit:
public function action_like($token = false, $bID = false)
    {
        if ($this->bID != $bID) {
            return false;
        }
        if (Core::make('token')->validate('contact_form', $token)) {
            $txt = Core::make('helper/text');
            $this->name = $txt->sanitize($_POST['name']);
            if ((mb_strlen($this->name, 'UTF-8') < 2) || (mb_strlen($this->name, 'UTF-8') > 60)) {
                $ret = "Name error";
            }
            else {
                $ret = "success";
            }
        }

Here's the view.js bit:
$(document).ready(function(e) {
    $("#contact_form").submit(function(event){
        event.preventDefault();
        submitForm();
    });
    $('.button').on('click', function() {
        submitForm();
    });
});
function submitForm(){
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();
    $.ajax({
        dataType: "json",

Now, the problems:

1. The form shows correct response values but goes to another page. For some reasons they don't display on the form itself.
2. If I use another language, the output is a long string of \u*** characters. I tried
echo Core::make('helper/json')->encode($this->form_errors, JSON_UNESCAPED_UNICODE);

but it doesn't make any difference.