Symfony2 Routing Annotations and JavaScript

Question

I am using annotations for my routing. In my index.twig template I wrote some JQuery like

 $(document).ready(function(){
    $('#sortable').NestedSortable(
        {
            accept: 'sort',
            noNestingClass: "no-children",
            helperclass: 'helper',
            autoScroll: true,
            onChange: function(serialized) {
            },
            onStop : function(){
                var element_id = $(this).attr("id");
                var parent_id = $(this).parent().attr("id");
                var prev_sibling_id = $(this).prev().attr("id");
 if(prev_sibling_id=='trash'){
    var data = {PID:element_id};
    $.ajax({
        type: "POST",
        data: data,
        url:"{{ path('v2_pm_patentgroups_trash') }}",
        cache: false,
        success: function(data) {
            document.location.reload(true);
        });
}
else if(parent_id=='sortable'){
     var p_sibling = $(this).prev().attr("value");
     if(p_sibling == null){var p_sibling = 0;}
     var n_sibling = $(this).next().attr("value");
     if(n_sibling == null){var n_sibling = 0;}
     var order = (p_sibling + n_sibling)/2;
     var data = {ID:element_id, ORD:order};
       $.ajax({
         type: "POST",
         data: data,
         url:"{{ path('v2_pm_patentgroups_sortgroups') }}",
         cache: false
       });
}

Now you see there are two ajax callsone is called when a group is trashed and other one is called when the group is sorted.

The group is an li tag which is in my twig file

 <li id="{{ portfolio_group.id }}" class="sort group" value={{ portfolio_group.order }}>
    <span class="drag-image groupimage">&nbsp;</span>
    <a class='expand'>{{ portfolio_group.name }}</a>
    <a class="button3" href="{{ path('v2_pm_patentgroups_edit', { 'patentgroupId': portfolio_group.id }) }}" ><span> Edit </span></a> 
            <a class="button3" href="{{ path('v2_pm_patentgroups_delete', { 'patentgroupId': portfolio_group.id }) }}" ><span> Delete </span></a>
    <hr class="separator">
 </li>

Can anyone giude me how to give path to url from my inside my JS. I dont want to use routing file.

Thanks

MDrollette · Accepted Answer · 2012-07-03 22:26:04Z

2

When I need to pass data from the controller/view to the javascript I usually set data attributes on the relevant HTML tags. For example, if I need a route for an AJAX request I will write:

<a href="#updateTarget" class="ajaxTrigger" data-ajax-route="{{ path('my_ajax_route') }}">click here for ajax</a>

and then access it with:

$('.ajaxTrigger').on('click', function(){
  $.getJSON($(this).data('ajax-route'), function(response) {
    // do something with response
  });
 });

There is also a bundle to do much more sophisticated things with dynamic JS routing https://github.com/FriendsOfSymfony/FOSJsRoutingBundle

edit: For your specific case you could set the route data on the container of the group, the <ul>

<ul id="portfolioContainer" 
    data-ajax-trash="{{ path('v2_pm_patentgroups_sortgroups') }}" 
    data-ajax-sort="{{ path('v2_pm_patentgroups_sortgroups') }}">

and then from your JS file you would refer to those data attributes:

$.ajax({
    type: "POST",
    data: data,
    url:$('#portfolioContainer').data('ajax-trash'),
    cache: false,
    success: function(data) {
        document.location.reload(true);
    });

edited Jul 3, 2012 at 22:26

answered Jul 3, 2012 at 21:59

MDrollette

6,9251 gold badge40 silver badges49 bronze badges

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

7 Comments

Zoha Ali Khan Over a year ago

The problem is that I have two groups which I can drag like sorting the groups, when i sort any group it should call one method and both the groups are trashable if i trash any of the group it should call another action. think of group as any html tag

MDrollette Over a year ago

The idea is the same. You would store the generated path on some tag in your view. Then from your JS file you would access it based on ID. This is just a method to get a generated URL into javascript. If you need more complex JS routes then I would look at the bundle I linked.

MDrollette Over a year ago

Maybe you can post more of your code and I can give a more detailed explanation.

MDrollette Over a year ago

edited my answer. also, why are you reloading the whole page after you do the ajax request? It defeats the entire purpose of the ajax :-p

Zoha Ali Khan Over a year ago

I am reloading the page because once a group is trashed i replace the two anchor tags of edit and delete by only one restore tag is it possible without reloading the page ? Thanks for the help

|

Collectives™ on Stack Overflow

Symfony2 Routing Annotations and JavaScript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related