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

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
    Nov 25 '21 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 ?
    – Raad Kasem
    Nov 25 '21 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
    Nov 25 '21 at 11:04
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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