Hi There,

I've tried to recreate to To Do Plugin and interact with the database from the screencast, but it doesn't seem to be adding anything to the database or reaching my onAddItem code. Do you know if this is a common problem or know how to turn on debugging to see any error logs

Here's my code for my default.htm to show the form to save To Do Items

<form data-request={{__SELF__}}::onAddItem()data-request-success=$("#inputItem").val("")data-request-update={{__SELF__}}::tasks: "#result"> <input name="task" type="text" id="inputItem" class="form-control" value="" /> <button type="submit" class="btn btn-primary">Add</button> </form> And the onAddItem code in Todo.php looks like

`public function onAddItem()
{
    $taskName = post('task');
    $task = new task;
    $task->title = $taskName;
    $task->save();$this->page['tasks'] = Task::lists('title'); }`

P.S. I'm using this to import the Task class use Atan\Demo\Models\Task;

It works to retrieve tasks from the database, but can't figure out how to save data

Last updated 8 years ago

The problem is likely your usage of {{ SELF }}, that should be changed to {{ __SELF__ }} http://octobercms.com/docs/cms/components#customizing-default-markup

Update: Sorry, I just realized that you are using __SELF__, but markdown has turned that into bold text. Could you wrap your first part in backticks so I can see what you're trying to do?

Last updated 8 years ago

Hey Scott

I've updated the first part of my code with backticks to make it more readable. Let me know if you need me to modify anything else

Cheers, Andy

You need to wrap your values in quote marks, and your ajax handler shouldn't have parentheses. Give this a try...

<form 
    data-request="{{ __SELF__ }}::onAddItem"
    data-request-success="$('#inputItem').val('')"
    data-request-update="'{{ __SELF__ }}::tasks': '#result'"
>
    <input name="task" type="text" id="inputItem" class="form-control" value="" />
    <button type="submit" class="btn btn-primary">Add</button>
</form>

PS: Using three backticks on their own lines give you a code block

like this

and one backtick around a word just does this

Last updated 8 years ago

Hey Scott

Thanks for replying. I've tried that and it doesn't seem to be saving to the database. Is there a way to debug to check if it's going to my onAddItem() function in the Todo.php in my component cause I've put a die statement in there but it doesn't break the site which makes me believe its not going there

Cheers, Andy

Hey Everyone

Just realised I think the problem is the ajax handler onAddItem isn't being reached at all, so is there a reason why calling that handler on the frontend wouldn't reach the function defined in the backend?

Cheers, Andy

There are a bunch of reasons, here are the first ones that come to mind...

1. framework.js or jQuery is not being included

In order to make use of the javascript framework, you need to have both the framework and jquery included. I like to include these along with my theme script like so...

<script type="text/javascript" src="{{ [
    '@jquery',
    '@framework',
    'assets/js/some-theme-script.js',
]|theme }}.js"></script>

Also related to this, I believe jquery 2.x is required. If you're still using 1.11.x, this might cause problems.

2. The component is not a part of the view

Make sure your component is attached to your layout, page, or partial. Without this, you cannot access any of it's ajax handlers

3. You're referencing an incorrect component alias

When you include a component via {% component 'someComponent' %}, the reference to that components alias is {{ __SELF__ }}. If you're trying to use the component on your own partial, the __SELF__ helper won't work. You'll need to reference the actual alias of the component.

<a href="#" data-request="someComponent::someHandler">Foo</a>

Last updated 8 years ago

Hi Scott

I owe you so much thanks, the thing is was I didn't include the framework.js in my layout file and that's why it wasn't reaching my ajax handler. Definitely need to include this

<script type="text/javascript" src="{{ ['@framework']|theme}}.js"></script>

Thanks again

Cheers, Andy