FOSJsRoutingBundle: Cannot Generate routing url inside javascript

3
votes

I am using FOSJsRoutingBundle to generate Symfony 2 routing url's in a JavaScript file. I have installed the bundle as per the documentation (https://github.com/FriendsOfSymfony/FOSJsRoutingBundle/tree/master/Resources/doc)

Trying to implement a form submission using ajax script, where user can rate and comment.

Here is my twig/html code:

<form id="feedback" method="post" name="feedback">
    <div class="form">            
        <div class="form_layer">
            <div class="rating">
                <label>Rate Us:</label>
                <input type="radio" name="rating" value="1"><small>One</small>
                <input type="radio" name="rating" value="2"><small>Two</small>
                <input type="radio" name="rating" value="3"><small>Three</small>
                <input type="radio" name="rating" value="4"><small>Four</small>
                <input type="radio" name="rating" value="5"><small>Five</small>
            </div>
        </div>
        <div class="form_layer floated1">
            <div class="comment">
                <label>Please give your feedback</label>
                <textarea rows="5" cols="32" id="comment" name="feedback"></textarea>
            </div>
            <div class="clr"></div>
        </div>
        <span class="comment_btn"><input type="submit" class="comment_submit" name="validate" value="Submit"></span>
    </div>
    </form>

Here is my JavaScript code:

//Ajax Form Submission
$(function() {
    $('.comment_submit').click(function() {
        var rating = $(':radio').val();            
        var comment = $('#comment').val();
        alert("comment: "+comment);
        var route = Routing.generate('user_feedback');

        alert("Route: "+route);

        /* $.ajax({  
          type: "POST",  
          url: Routing.generate('user_feedback', { "rating": rating, "comment": comment}),  
          success: function() {  
            $('div.middle').html("<div class='message'></div>");  
            $('.message').html("<h3>Thank You!</h3>")  
            .append("<p>Your comment has been submitted</p>")  
            .hide()  
            .fadeIn(1500);  
          }  
        });  
        return false; */

        //alert("Rating"+comment);
        //alert("Feedback Submited");
    });
});

I have added the routing url in my routing.yml file also

Now the problem is when i submit the form, i cannot get the route value. I am trying to alert out the route value as you can see in the code, but i am not getting the vaue. The form just refreshes when i submit.

Is there any problem with the code? I am new to Symfony 2 so, please help me.

Thank You

2
jquerysymfony

2 Answers

1
votes

its not a symfony problem, the problem is in javascript

you have a submit button, which will submit your form. to prevent form submission you have to change your click function following way:

$('.comment_submit').click(function(e) {
    e.preventDefault();
    // your code goes here
    return false;
}
9
votes

Check your config routes:

my_route_to_user_feedback:
    pattern:  /user/feedback
    defaults:  { _controller: HelloBundle:User:feedback }
    options:
        expose: true

options expose must be true. It is important for FOSJsRoutingBundle!