1. Hugh is now back at work, more or less full time, after a slower than expected recovery from his neck surgery early this month. Obviously we have a backlog of support to clear, and are working as hard as we can to take care of it. If you have an unanswered thread more than 3 days old, please post one (and only one) "bump" on it, to move it in to our "last 3 days" list. If you have an unanswered issue in a forum you no longer have access to due to subscriptions timing out, please use the Contact Us form, and provide us with the URL to the thread.

Help to get an Ajax call working

Discussion in 'Fabrik 3.x Testing' started by jfquestiaux, May 5, 2012.

  1. jfquestiaux Well-Known Member

    Level: Professional
    I am trying my first attempt to get an Ajax call working but I am stuck at the moment, partly because of confusing informations : there is one code in the comments of the ajax_user_example.php file and another in the Fabrik tutorial #7.

    The later being older, I started with the first one, but both gives me an error (not the same though).

    This is my first attempt :
    Code (text):
    <script type="text/javascript">
            function useIdVenue(idVenue)
            {
                document.getElementById("bottomRightColumn").style.display = "none";
                document.getElementById("middleRightColumn").style.display = "block";
               
                var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=displayVenueData&row_id=" + idVenue;
                new Request({url:url, onComplete: function(response) {
                        if (response != '') {
                            alert(response);    
                        }
                          }
                       }).request();
            }
        </script>
    This gives me the error :
    Erreur : (new Request({url: url, onComplete: function (response) {if (response != "") {alert(response);}}})).request is not a function


    So I tried this :
    Code (text):
    <script type="text/javascript">
            function useIdVenue(idVenue)
            {
                document.getElementById("bottomRightColumn").style.display = "none";
                document.getElementById("middleRightColumn").style.display = "block";
               
                var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=displayVenueData&row_id=" + idVenue;
                var update = $('middleRightColumn');
                new Ajax(url, {data:{
                        method:'displayVenueData','row_id':idVenue},
                     onComplete:function(r) {
                        update.setHTML(r);
                     }
                       }).request();
            }
        </script>
    This time I get :
    Erreur : Ajax is not defined

    Can some JS guru help me out? It would be greatly appreciated.
  2. rackem Well-Known Member

    Level: Community
    Not sure if it will help but the Ajax call below works for me. Note the return data is JSON encoded in this example so just ignore that line as well as the siteURL section.

    Code (text):
    function ajaxDrillInfo() {
        var url = 'index.php?option=com_fabrik&format=raw&view=plugin&task=userAjax&method=getDrillInfo';
        var drill_id = $('mps_score___drill_id').getValue();
           
        // Sets up site URL (live or localhost) to procure figure from proper file location
        var siteURL = "http://";
        if(window.location.hostname == "localhost") siteURL += window.location.host + "/mps";
        else siteURL += window.location.host;
       
        new Request({
            url: url,
            data: {
            method: 'getDrillInfo', 'drill_id': drill_id
            },
       
        onComplete: function(r){
            drill = JSON.decode(r);
            $('mps_score___title').set('text', "Drill # " + drill_id);
            $('mps_score___figure').set('html', "<img src=" + siteURL + drill['figure'] + " alt=''/>");
            $('mps_score___notes').set('text', drill['notes']);
            }
        }).send();
    }
     
    1 person likes this.
  3. jfquestiaux Well-Known Member

    Level: Professional
    Thanks a lot, the call is getting through now.
    I "just" have to make it do what I need now... so I keep this post open until it's finished.
  4. jfquestiaux Well-Known Member

    Level: Professional
    OK, I made a lot of progress but I am stuck again even though I think I am doing the right thing :

    I am trying to update the data of a Google Map from my Ajax call, so I got to the "input" tag where the value of the map to replace is using
    Code (text):
    var venueMap = $('venues___map_ro');
    var venueCoords = venueMap.getElementsByTagName( 'input' );
    this works as a console.log retuns me
    Code (text):
    <input type="hidden" value="(50.06465009999999, 19.94497990000002):4" name="venues___map" class="fabrikinput">
    So I thought I would just do
    Code (text):
    venueCoords.setAttribute( "value", "myCoords" );
    but I get this error :

    Erreur : venueCoords.setAttribute is not a function

    I don't understand why I get this error. Thnak you for any input.
  5. rob Administrator

    Level: Community
    to summarize my skype conversation with Jean-Francois:

    getElementsByTagName will return an array of dom nodes, not a single dom node.

    to get a specific field based on its name you can do :

    Code (text):

    document.getElement('input[name=venues___map]');
     
    where 'venues___map' is the field name
    to set its value you would do

    Code (text):

    document.getElement('input[name=venues___map]').value = 'bar';
     
    2 people like this.
  6. PtrNrs Member

    Level: Community
    Lost in this this thread is the essential answer to Jean-Francois's original question: and that is that
    Code (text):
    }).request();
    needs to be replaced by
    Code (text):
    }).send();
    With the brave new world of GitHub, I've (temporarily?) lost the ability to provide patches, but could user_ajax_example.php please be updated with the correct code?
  7. rob Administrator

    Level: Community
    Thanks Pete - I've added that.
    For submitting stuff you now need to do pull requests, details of how to set that up are in the github help pages:
    https://help.github.com/ Its more involved to set things up but once set up I find it fairly easy to work with.

    -Rob
  8. PtrNrs Member

    Level: Community
    Thanks, Rob.

Share This Page