Help to get an Ajax call working

[jfquestiaux]

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 :

<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 :

<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.

 

[rackem]

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.

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();
}

 

[jfquestiaux]

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.

 

[jfquestiaux]

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

var venueMap = $('venues___map_ro');
var venueCoords = venueMap.getElementsByTagName( 'input' );

this works as a console.log retuns me

<input type="hidden" value="(50.06465009999999, 19.94497990000002):4" name="venues___map" class="fabrikinput">

So I thought I would just do

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.

 

[rob]

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 :

document.getElement('input[name=venues___map]');

where 'venues___map' is the field name
to set its value you would do

document.getElement('input[name=venues___map]').value = 'bar';

 

[PtrNrs]

Lost in this this thread is the essential answer to Jean-Francois's original question: and that is that

}).request();

needs to be replaced by

}).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?

 

[rob]

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

 

[PtrNrs]

Thanks, Rob.