1

I'm having a follow button on the front end it allows you to save an entry to a specific section (type: channel) and it's all working great, but i need to achieve this with AJAX

This is my Form

{% if currentUser %}
<form id="followForm" method="post" accept-charset="UTF-8">
        {{ csrfInput() }}
        {{ actionInput('entries/save-entry') }}
        {{ hiddenInput('sectionId', sectionID) }}
        {{ hiddenInput('enabled', '1') }}
        {{ hiddenInput('title', followTitle ) }}
        {{ hiddenInput('fields[followerName]', currentUser.username ) }}
        {{ hiddenInput('fields[relatedUserId]', currentUser.id ) }}
        {% if followItem is defined %}
           {{ hiddenInput('fields[relatedEntryId]', followItem.id ) }} 
           {{ hiddenInput('fields[relatedSectionTitle]', followItem.section ) }}
        {% else %}
           {{ hiddenInput('fields[relatedEntryId]', entry.id ) }}
           {{ hiddenInput('fields[relatedSectionTitle]', entry.section ) }}
        {% endif %}
        <button id="followBtn" type="submit">Follow</button>
    </form>
{% endif %}

What i've tried:

    $('#followForm').submit(function(ev) { 
        ev.preventDefault();

     $.ajax({
            type: 'POST',
            url: 'entries/save-entry',
            dataType: 'json',
            data: $(this).serialize(),
            success: function (response) {  
                    console.log(response);  
                }
        });
    });

so it seems there is something wrong with my JS, since it's continue to submit the form as default form and reloading the entire page instead of using Ajax.

any ideas would be great, Thanks

Improve this question
3
  • 1
    The JS code looks ok – have you checked the devtools, are there any errors? Is the JS code loaded deferred or executed after the DOMContentLoaded event? It's possible the #followForm element doesn't exist yet when the code is executed. Try opening the debugger in the devtools and putting a breakpoint in the line with $('#followForm') to see if and what the selector finds.
    – MoritzLost
    Commented Nov 25, 2021 at 9:03
  • Thank you @MoritzLost, i forgot to include the jQuery file first, but run into another one, how to refresh only the card i pressed ( there is a for loop iterate on 12 event card ) i tried this : $('#card{{followId}}').load(' #card{{followId}} > *'); where {% set followId = loop.index %} but it still refresh the entire page. should i post another question or is it okay here ?
    – Ra3d K
    Commented Nov 25, 2021 at 9:19
  • 1
    Since it's a completely new issue, probably better to post it as a new question. I've added an answer to this one for completeness' sake. Since your new question is specifically about JavaScript/jQuery, maybe post it on Stack Overflow instead.
    – MoritzLost
    Commented Nov 25, 2021 at 11:04

1 Answer 1

Reset to default
2

As per the comments, the issue turned out to be that jQuery wasn't included on the page, so $ wasn't defined.

In general, make sure to check the devtools console for error messages and use the debugger to find out why specific pieces of code aren't working as intended.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.