Routing for Symfony2 TWIG templates with AJAX

Question

I have been struggling with this for a couple days and have yet to find any real solutions online yet. I have a form that allows users to enter their email, then after they enter it fades out and is replaced by another form. I am using ajax to submit data from a form to a symfony2 controller, which stories it in the database and sends a response. However, the response ends up just sending me to a blank page with the response data displayed, instead keeping me on the same page and just fading the boxes as needed. I think my issue is with how I have the controller actions set up and the routing files.

EDIT

Well now the issue is that when I click on the submit button nothing happens. Nothing is sent to the controller, so nothing is being stored and no response is being given. What I changed was based on the answer by @PaulPro, appending the

<script> $('#emailForm').submit(submitForm); </script>

to the end of the html page. Thanks in advance for any help and insight!

The controller has 2 relevant actions, the one that renders the TWIG Template with the form, and the one that handles the ajax form submission and returns the response.

public function emailAction()
{
    return $this->render('Bundle:email.html.twig');
}

public function submitEmailAction()
{

    $em = $this->getDoctrine()-> getEntityManager();

    $email = new Email();

    $request = $this->getRequest();

    $emailVar = $request->request->get('emailSignup');

    $email -> setEmail($emailVar);

    $em->persist($email);
    $em->flush();

    $return=array("responseCode"=>200);
    $return = json_encode($return);

    return new Response($return, 200, array('Content-Type'=>'application/json'));

}

This is the routing for those actions, most likely the culprit of it all:

Bundle_email:
pattern:  /email
defaults: { _controller: Bundle:email }
requirements:
    _method:  GET

Bundle_submitEmail:
pattern:  /submitEmail
defaults: { _controller: Bundle:submitEmail }
requirements:
    _method:  POST

And then here is the email.html.twig template and ajax script:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="{{asset('css/styles.css')}}" rel="stylesheet" type="text/css"  />
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">

function submitForm(){
    var emailForm = $(this);
    var path = "{{path('Bundle_submitEmail')}}"

    $.ajax ( {
        type: 'POST',
        url: $("#emailForm").attr("action"),
        emailSignup: $("#emailId").val(), 
        success: function(data){

        if(data.responseCode==200 ){
            $('.email-signup-form').fadeOut();          
            $('.share-form').delay(500).fadeIn();
        }
        }

      });

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

<body>
      <form id="emailForm" action="{{path('Bundle_submitEmail')}}" method="POST" class="email-signup-form">
        <input type="email" placeholder="e-mail address" name="emailSignup" id="emailId" required="true"/>
<input type="submit" value="Go">
      </form>
      <form class="share-form">

      </form>
<script> $('#emailForm').submit(submitForm); </script>

</body>
</html>

Paul · Accepted Answer · 2013-07-03 00:57:06Z

1

You don't ever call submitForm (the function that tells the browser to use AJAX rather than a full page load). Just add a script at the end of your body that looks like:

<script>
    $('#emailForm').submit(submitForm);
</script>

answered Jul 3, 2013 at 0:57

Paul

142k28 gold badges285 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

The_DemoCorgin Over a year ago

Thank you for the quick response! Although now when I click on the submit button nothing is happening at all, so I guess I need to take another look at my ajax code.

Paul Over a year ago

@BrianHunter You're welcome. Have your tried checking the Javascript console for errors?

The_DemoCorgin Over a year ago

Ok they error isn't showing well here but its a 500 internal server error and it points to lines 5 and 6 of the jquery and then the lien of my code with the url, perhaps it doesn't like the symfony formatting or path creation. Not sure

Paul Over a year ago

@BrianHunter Could be caused by a PHP error. The next thing to check should be your server-side error logs. Are you the server administrator? Do you know what Operating System and Web Server you are running?

Paul Over a year ago

Maybe try data: {emailSignup: $("#emailId").val() },

|

Collectives™ on Stack Overflow

Routing for Symfony2 TWIG templates with AJAX

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related