How to pass custom AJAX parameters to handle function in components

So you'd like to pass custom parameters by AJAX (GET/POST) from custom javascript to a handle in your component (maybe nested)? Well, you're in luck. ;)

Sure you could use $this->getRequest()->getPost(); in a component handle, but where's the fun in that? Plus, it's ugly.

The cool thing to do is to use one of the following approaches in a latte in which you have your scripts for the mentioned component.

	$.post(                                                           // or $.get(), it doesn't matter
		{link MyHandleLink!},
		{
			'acrProductsControl-datum': $('.someElem').val()          // 1 - name the component and param manually
			{$control->getParameterId('date')}: $('.someElem').val()  // or 2 - get existing form element name
			{$control->name . '-datum'}: $('.someElem').val()         // or 3 - get name of the component and add custom param name
		},
		function (payload) { not important now }
	);

The best option is #3 because you get the component name dynamically, so you don't need to change it when you move the component under another, e.g. And you can use custom parameter name in your handle function like this even though the element's actual name is date, not datum.

	public function handleMyHandleLink($datum) {
		// some logic
	}

The option #2 is fixed to existing element in the component's form.

The option #1 allows creating of custom names but is not dynamic.

How does it work

The automatic $control variable leads to an instance of your component to which the template belongs to.

The whole thing depends on proper parameter names. You need to use ‘dash’ notation just like you would when addresing nested components in presenter template when you want to render them. This way Nette knows what component the transfered parameter belongs to.

---

TODO

Maybe polish this a bit and publish it in the official documentation.

Last edited by meridius (2016-05-18 10:55)