Hey Guys, I'm trying to create a component that works with the AJAX framework. I followed along with the video tutorial of Samuel Georges on Vimeo (Mastering Components). I ended up with this code:

<script>
    function commentSuccessfullyAdded(element)
    {
        $(element).find("input[type=text],input[type=email],textarea").val('');
    }
</script>

<div id="result">
    {% partial __SELF__ ~ '::comments' comments=__SELF__.comments %}
</div>

<form data-request="{{ __SELF__}}::onAddItem"
      data-request-success="commentSuccessfullyAdded(this)"
      data-request-update="'{{__SELF__}}::comments' : '#result'">

    <textarea name="text" id="" cols="30" rows="10"></textarea>
    <input type="text" name="name"/>
    <input type="email" name="email"/>
    <button type="submit">Plaats comment</button>

</form>

Everything is working fine, but I added some validation to the model, and when validation fails an alert box is shown. I want to have control about the error messages being shown, so I updated the Data attribute API to the Javascript API, my code is now looking like below. The problem is that everything is working, but my div#result isn't updated automatically, only after a browser refresh I can see the new results. When I watch the Ajax request in Dev tools I can see that newly added record is send in the response HTML, but it is not added to the DOM.

<script>
    function handle(obj) {
        $(obj).request('{{ __SELF__}}::onAddItem',
                {
                    success: function(){
                        $(obj).find("input[type=text],input[type=email],textarea").val('');
                    },
                    error: function(jqXHR) {
                        console.log(jqXHR.responseJSON);
                    },
                    update: {'{{__SELF__}}::comments': '#result'}
                }
        );
    }
</script>

<div id="result">
    {% partial __SELF__ ~ '::comments' comments=__SELF__.comments %}
</div>

<form onsubmit="handle(this); return false;">

    <textarea name="text" id="" cols="30" rows="10"></textarea>
    <input type="text" name="name"/>
    <input type="email" name="email"/>
    <button type="submit">Plaats comment</button>

</form>

Can somebody spot what I'm doing wrong? Thx in advance!

Last updated 9 years ago

Oke, I had a good look at the /modules/system/assets/js/framework.js file, where the Ajax framework JS code lives. If you define your success function like I did, you're overwriting the existing success function in the library, which is responsible for updating the partial. Here is my new code:

<script>
    function handle(el) {
        $(el).request('{{ __SELF__}}::onAddItem',
            {
                error: function(jqXHR) {
                    console.log(jqXHR.responseJSON);
                },
                update: {'{{__SELF__}}::comments': '#result'}
            }
        );

        $(el).on('ajaxSuccess', function(){
            $(el).find("input[type=text],input[type=email],textarea").val('');
        });
    }
</script>

<div id="result">
    {% partial __SELF__ ~ '::comments' comments=__SELF__.comments %}
</div>

<form onsubmit="handle(this); return false;">

    <textarea name="text" id="" cols="30" rows="10"></textarea>
    <input type="text" name="name"/>
    <input type="email" name="email"/>
    <button type="submit">Plaats comment</button>

</form>

For some reason this is not working for me, but I use: return ['#result' => $this->renderPartial('@createproductresponce.htm')];

Hi, the correct way of doing would be insert call to parent success method

$(obj).request('{{ __SELF__}}::onAddItem',
                {     
                     success: function(data) 
                     {
                          console.log('data received!');
                          console.log(data);

                         // call parent 
                         // this one is important!
                         this.success(data); 
                     }
               }
);

Last updated 7 years ago