The ajax-jquery-tutorial from nax3t

ajax-jquery-tutorial's People

Contributors

Stargazers

Watchers

ajax-jquery-tutorial's Issues

ajax EDIT functionality not working on dynamically created new Todos.

We only updated the markup of the index.ejs file but not the markup embedded in the ajax POST request's string template literal. It still looks like this:

<li class="list-group-item">
	<span class="lead">
		${data.text}
	</span>
	   <div class="pull-right">
	   <a href="/todos/${data._id}/edit" class="btn btn-sm btn-warning">Edit</a>
	   <form style="display: inline" method="POST" action="/todos/${data._id}">
	   <button type="submit" class="btn btn-sm btn-danger">Delete</button>
	   </form>
        </div>
	<div class="clearfix"></div>
</li>

Thus, when a new ToDo is dynamically created the edit button (which is here still an anchor tag) directs the user to the old edit page and we never see the ajax edit request's callback function update the DOM.

For this to work as intended, the ajax POST request's string template literal should have the following markup:

`
 <li class="list-group-item">
                <form action= "/todos/${data._id}" method="POST" class="edit-item-form">
                    <div class="form-group">
                        <label> Item Text </label> 
                        <input type="text" value = "${data.text}" name="todo[text]" class="form-control">
                    </div> 
                    <button class="btn btn-primary"> Update Item </button> 
                </form>
                <span class="lead">
                    ${data.text}
                </span> 
                <div class="pull-right">
                    <button class="btn btn-sm btn-warning edit-button"> Edit </button> 
                    <form style ="display: inline" method ="POST" action="/todos/${data._id}" class="delete-item-form">
                    <button type="submit" class="btn btn-sm btn-danger">Delete</button> 
                    </form> 
                </div> 
                <div class="clearfix"> 
                </div>
            </li>
`

Recommend Projects