ajax

Question

साथ Symfony2 में टेम्पलेट रेंडर मैं इस पथ

public function indexAction() 
{ 
    return $this->render('AcmeDemoBundle:Plugin:index.html.twig'); 
} 

और index.html सूचकांक मार्ग

routing.yml

index: 
pattern: /index 
defaults: { _controller:AcmeDemoBundle:Default:index } 

नियंत्रक के लिए मेरे नियंत्रक में एक कार्रवाई है .twig टेम्पलेट

{% extends'::base.html.twig' %} 

{% block stylesheets %} 
    {% stylesheets filter='cssrewrite' output='css/*.css' 
      'bundles/acmedemo/css/*' %} 
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" /> 
    {% endstylesheets %} 
    {% endblock stylesheets %} 

{% block body %} 
<br> 
<div class="container"> 

<div class="wp_attachment_holder"> 

    <div class="imgedit-response" id="imgedit-response-8"></div> 

    <div class="wp_attachment_image" id="media-head-8"> 
     <p id="thumbnail-head-8"><img class="thumbnail" src="http://localhost/wordpress/wp-content/uploads/2014/06/121-1024x583.jpeg" style="max-width:100%" alt=""></p> 
     <p><a class="btn btn-sm btn-default" id="edik-wp-extended-edit">Редактировать</a> <span class="spinner"></span></p> 
    </div> 
    <div style="display:none" class="image-editor" id="image-editor-8"> 
    </div> 
</div> 
<div id="output"></div> 
<img class="thumbnail" data-attach-id="8" data-src="http://localhost/wordpress/wp-content/uploads/2014/06/121-1024x583.jpeg" style="max-width:100%" alt=""> 
    <script> 
      $('#edik-wp-extended-edit').click(function() { 
       window.location= Routing.generate('ajax'); 
//    $('#output').load('/ajax/index'); 
      }); 
     </script> 
    </div> 
{% endblock %}` 

जब बटन Редактировать क्लिक किया गया है तो मैं AJAX के साथ एक और टेम्पलेट लोड करना चाहता हूं।

another.html.twig

<div>Hello</div> 

routing.yml इस पथ

public function ajaxAction() 
{ 
    $template = $this->renderView('AcmeDemoBundle:Plugin:another.html.twig'); 
    return new Response($template); 
} 

के लिए

ajax: 
pattern: /ajax/index 
defaults: { _controller :AcmeDemoBundle:Default:ajax } 
options: 
    expose: true 

नियंत्रक लेकिन जब मैं बटन पर क्लिक करें मेरी uri /ajax/index हो जाएगा। मुझे क्या चाहिए यह है कि यह /index तक रहता है और टेम्पलेट को मेरे इंडेक्स टेम्पलेट

में क्या किया जा रहा है मैं गलत क्या कर रहा हूं?

धन्यवाद।

Answer 1

पहले समुचित उपयोग SF2 मार्ग को FOSJsRoutingBundle की तरह कुछ का उपयोग करके अपने ajaxAction() जहाँ तक मुझे पता के रूप में थोड़ी अलग होना चाहिए, मेरे लिए यह काम करता है:

$template = $this->forward('AcmeDemoBundle:Plugin:another.html.twig')->getContent(); 

    $json = json_encode($template); 
    $response = new Response($json, 200); 
    $response->headers->set('Content-Type', 'application/json'); 
    return $response; 

forward() फ़ंक्शन यह करता है कि यह टेम्पलेट प्रस्तुत करता है और प्रस्तुत एचटीएमएल कोड देता है।

आप JavaScript फ़ाइल में आप इस

$.ajax({ 
    type: "POST", 
    dataType: 'json', 
    url: Routing.generate('ajax'), 
    async: false //you won't need that if nothing in your following code is dependend of the result 
}) 
.done(function(response){ 
    template = response; 
    $('#your_div').html(template.html); //Change the html of the div with the id = "your_div"       
}) 
.fail(function(jqXHR, textStatus, errorThrown){ 
    alert('Error : ' + errorThrown); 
}); 

आप अपने ajaxAction करने के लिए एक AJAX कॉल, जो आप प्रदान की जा करना चाहते हैं टेम्पलेट के एचटीएमएल वापस आ जाएगी बनाने के लिए क्या करना चाहिए।

इसके बाद आपको उस स्थिति में <div id="your_div"></div> जोड़ने की आवश्यकता है, जिस पर आप टेम्पलेट को प्रस्तुत करना चाहते हैं। यह मेरे लिए पूरी तरह से काम करता है।

उल्लेख करने के लिए कि आपको ajax टेम्पलेट को केवल उस कोड पर तोड़ने की आवश्यकता है जिसे दिखाया जाना चाहिए।

Answer 2

की तरह इस

window.location= '{{ path("ajax") }}'; 

जोड़ा ajax रूट तैयार करने का प्रयास करें:

ajax अनुरोध

$("#output").load('{{ path("ajax") }}', function() { 
    alert('Load done'); 
}); 

जोड़ा उपयोग की व्याख्या करने के लिए कर ajax अनुरोध परिवर्तन windows.location के लिए:

जेएस कोड केवल तभी काम करेगा जब आप इसे टवीग टेम्पलेट पर डाल दें। यदि आप इसे जेएस फ़ाइल में डालते हैं तो यह काम नहीं करेगा। मूल प्रश्नों के मामले में ।

<div id="output"></div> 
<img class="thumbnail" data-attach-id="8" data-src="http://localhost/wordpress/wp-content/uploads/2014/06/121-1024x583.jpeg" style="max-width:100%" alt=""> 
<script> 
     $('#edik-wp-extended-edit').click(function() { 
      $("#output").load('{{ path("ajax") }}'); 
     }); 
</script> 

आप में js