从jQuery到PHP的变量加载到div中以通过echo写入

Question

I want to access a photo gallery by clicking on the gallery icon, and for this I use the following jQuery code:

<script type="text/javascript">
  $(document).ready(function(){
      $('.galbt a').on('click', function(e) {
          var gallery = $(this).parent().find("p").text();
          //$("#section").load("gallery.php"); // I tried puting this here
          $.ajax
          ({
              url: "gallery.php",
              type: "POST",
              data: { "galeria" : gallery },
              success: function(){$("#section").load("gallery.php");} // or here
          })              
      });
  });
</script>

The php file takes the galery name, scann the directory and build a modal carousel by echoing it. PHP page loads but doesn't shows anything (I mean it shows a little html part that doesn't depend of the variable, but does not show the part that needs the variable to be shown). I tryed loading it first and then posting the variable, or first posting the variable and then loading it, but no change have been seen.

And another question I got is... there is any difference if I change the extension to html or php? Because php file has a combined code and I tried loading it as both, like PHP or HTML and result is the same (nothing is shown).

Thanks.

Answer 1

.load() method is another ajax call that you are doing and that is not dependent on your ajax call parameters. if you want output based on your parameter than you can try this code :

 $.ajax ({
   url: "gallery.php",
   type: "POST",
   data: { "galeria" : gallery },
   success: function(data) {
      $("#section").html(data);
   }
 });

Answer 2

You are missing return part of ajax function(data) . Try this.

$.ajax ({
       url: "gallery.php",
       type: "POST",
       data: { "galeria" : gallery },
       success: function(data) {
          $("#section").load(data);
       }
});

Answer 3

1) Your are using ajax inside ajax(load) which is not a problem but in your case you don't need.

2) your $("#section").load("gallery.php"); is not at all using the key you are passing in your outer ajax.

first Option:

use output(echo) from gallery.php in success :

 $.ajax
          ({
              url: "gallery.php",
              type: "POST",
              data: { "galeria" : gallery },
              success: function(data){
                         $("#section").html(data);//html content returned from gallery.php
                      } 
          })   

or second Option :

$('.galbt a').on('click', function(e) {
          var gallery = $(this).parent().find("p").text();
         $("#section").load("gallery.php?galeria="+gallery);//use key with $_GET and process.
      });