1

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.

3
  • Post the PHP code. Does the AJAX request show a 500? Also a .html isn't going to serve PHP, it will just output the PHP unprocessed (unless you modified the handler). Commented Jan 11, 2016 at 5:44
  • what is response from ajax call ? Commented Jan 11, 2016 at 5:45
  • I think your variable is not used in gallery.php of load because both are independent calls .simply use load like this: $("#section").load("gallery.php?galeria="+gallery); without outer ajax. Commented Jan 11, 2016 at 5:51

3 Answers 3

2

.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);
   }
 });
Sign up to request clarification or add additional context in comments.

Comments

0

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);
       }
});

1 Comment

Thanks! I will pass here again when I got more than 15 to vote all the answers :)
0

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.
      });      

1 Comment

Thanks! first option worked, I saw the second when I used the search and now again, and with the second option the page doesnt load, does not load neither the html part not dependent of the variable, I guess with the second option it tryes to load the file gallery.php?galeria= and it doesnt find it, so dont shows nothing at all.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.