CODEWITHSUNDEEP
ajaxformsjquery
Andrew
Andrew

Reputation: 2011

Ajax retrieve data from success function

I am submitting a form via Ajax, and I want to prepend the project name to a list item when the form is submitted. Everything works fine except for pulling the information needed inside the success function. Data[Project][project_name] is being posted. How do I get the project name inside the success function? Right now "data" is being displayed in the list. I only have the one textbox in my form.

<script type="text/javascript">
    $(document).ready(function () {     
        var frm = $('#ProjectAddForm');
        frm.submit(function() {
            $.ajax({
                type: frm.attr('method'),
                url: frm.attr('action'),
                data: frm.serialize(),
                success: function(data) {
                    $('#ProjectProjectName').val('');
                    $('#ProjectList').prepend("<li style='color: green;'>data</li>");

                }
            })
        });
        return false;               
    });
</script>

HTML:

<ul id="ProjectList">
            <?php foreach ($projects as $project): ?>                       
                <li><?php echo $project['Project']['project_name']; ?></li>
            <?php endforeach; ?>
            <?php unset($project); ?>
        </ul>

<form accept-charset="utf-8" method="post" onsubmit="event.returnValue = false; return false;" id="ProjectAddForm" action="/callLog/projects/add">

Upvotes: 1

Views: 666

Answers (1)

Andrew
Andrew

Reputation: 2011

I needed to add a dataType: 'json' to the request.

<script type="text/javascript">
    $(document).ready(function () {     
        var frm = $('#ProjectAddForm');
        frm.submit(function() {
            $.ajax({
                type: frm.attr('method'),                   
                url: "<?php echo $this->Html->Url(array('controller' => 'projects', 'action' => 'add.json')); ?>",
                data: frm.serialize(),
                dataType: 'json',
                success: function(data) {
                    $('#ProjectProjectName').val('');
                    $('#ProjectList').prepend("<li class='icon-remove', style='color: green;'>" + data.projectName + "</li>");
                    $('#modalProject').modal('hide');
                }
            })
        });
        return false;               
    });
</script>

Upvotes: 1

Related Questions