Reload Grid in ATK4 - atk4

Question

I'm trying to learn enough to create a website that lets people answer quiz questions using Agile Toolkit 4.2.
I have a page that displays one question and its answer choices from the 'sampleq' model. I want to make a button that displays the next record in the model.
I've tried a bunch of different ways to get the js()->reload() command to work properly, but I haven't been able to do it. I get AJAX "unexpected identifier" error. I've been through the related questions on this site and looked for documentation on the ATK site, but I haven't found an example that works for me.
Can anybody tell me how to get the button to properly reload the grid?
function init(){
parent::init();
$page=$this;
}
function page_qlisting() {
$qid=$this->recall('value',1);
echo $qid;
$NextB=$this->add('Button')->SetLabel('Next Question '.$qid);
$grid=$this->add('Grid');
$grid->setModel('sampleq',array('question','A1','A2','A3'));
$grid->dq->where('id=',$qid);
if($NextB->isClicked()){
//$this->memorize('value',$qid+1);
$grid->js()->reload();
}
}
function page_qentry() {
$this->api->auth->check();
$this->add('Html')->set('Welcome to the question entry page.<br>');
$this->add('CRUD')->setModel('sampleq');
}
}
Edit:
After reading Romans' answer, I first tried this:
$qid=$this->recall('value',1);
$grid=$this->add('Grid');
$grid->setModel('sampleq',array('id','question','A1','A2','A3'));
$grid->dq->where('id=',$qid);
$this->add('Button')->SetLabel('Next Question')->js('click', $this->memorize('value',$qid+1))->js('click', $grid->js()->reload());
That actually works - it displays only one record at a time, and it displays the next one when I click the button. Next I tried adding a "Previous" button like so:
$qid=$this->recall('value',1);
$grid=$this->add('Grid');
$grid->setModel('sampleq',array('id','question','A1','A2','A3'));
$grid->dq->where('id=',$qid);
$this->add('Button')->SetLabel('Previous Question')->js('click', $this->memorize('value',$qid-1))->js('click', $grid->js()->reload());
$this->add('Button')->SetLabel('Next Question ')->js('click', $this->memorize('value',$qid+1))->js('click', $grid->js()->reload());
This doesn't work, though. Both buttons are decrementing. I tried laying it out like your adjuster buttons example here. Here's what my increment button code looks like in that attempt:
$incr=$this->add('Button')->SetLabel('Next Question');
if($incr->isClicked()){
$this->memorize('value',$qid+1);
$grid->js()->reload();
}
In that case, I get "Error in AJAXec response: SyntaxError: Unexpected identifier" when I click the button.
Can you offer any advice on how to make increment and decrement work with a grid (or crud)? Why doesn't the adjuster example work when you try to refresh a grid instead of refreshing the button? Thanks for the previous answer, and thanks in advance for any additional guidance that you may have time to offer.

Answer 1

This should be it:
$this->add('Button')->js('click', $grid->js()->reload());
If you use CRUD you might want to reload CRUD instead.