Creating a jQuery event handler that initiates PHP code

Question

What I'm trying to do is create some jQuery code that will initiate some PHP code and reload the page when I click on an image. I've created the code below but am confused at what type of event handler in jQuery is necessary to initiate PHP code. I suspect this is borderline AJAX, with the exception being that this is synchronous. Here is the code below.

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>

img:hover { border:1px solid #021a40; margin: 1px; padding: 1px; color: #000000; 

cursor:pointer;};

</style>

<script>

$(document).ready(function(){

$('img').on('click',"img",function(){

$(this).slideUp();

What do I put here?????

});

});

</script> 

<img  src="image.gif" width="50" height="50" />

Why does this have to be jQuery/javascript? Can't you just use a direct link to the PHP-file? — ahren
– ahren, Commented Jul 19, 2012 at 22:36
I want the .slideUP() function to work when I click on the image. My fear is the if I create a direct link to the php file then the effects from the jquery will not be seen. — thank_you
– thank_you, Commented Jul 19, 2012 at 22:39
The php code is an mysql query that updates a field in my database that contains information of the image on the page and a small snippet of code that will send the user to a new page. — thank_you
– thank_you, Commented Jul 19, 2012 at 22:41

peacemaker · Accepted Answer · 2012-07-19 23:01:09Z

1

With no ajax try:

$(document).ready(function()
{
   $('img').on('click',"img",function()
   {
       $(this).slideUp('slow',function () 
       {
          window.location = "url/to/phpfile.php?data="+yourdata
       });
   });
});

Then in the php file, do your updates and output or redirect to another page.

Regarding your comment above, the second parameter to slideUp() is a callback function once the animation is complete so you should get the visual feedback before the page transitions.

answered Jul 19, 2012 at 23:01

peacemaker

2,5914 gold badges28 silver badges49 bronze badges

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

Comments

Ibu · Accepted Answer · 2012-07-19 22:43:45Z

0

Here is what i think you can do.

$(document).ready(function(){
  $('img').on('click',"img",function(){
   $(this).slideUp('slow',function () {
      $.ajax({/* your ajax call here will run when the sliding is done */})
   });
  });
});

answered Jul 19, 2012 at 22:43

Ibu

44k14 gold badges82 silver badges109 bronze badges

4 Comments

thank_you Over a year ago

There is one problem, I can't run AJAX. I'm testing all of this on XAMPP so AJAX is out of the question. I'm ok with redirecting the user to another page. Thanks for the help though.

Ibu Over a year ago

@jason328 just so you know, XAMPP does not have a problem with ajax. you can run ajax anywhere

thank_you Over a year ago

The problem is that you have to put the files that you want to run into another web server when you call them with ajax, correct?

Ibu Over a year ago

That is incorrect, XAMPP is a webserver, i understand using a redirect solve your problem, but i think you need to learn more on how ajax work. AJAX MSD

Collectives™ on Stack Overflow

Creating a jQuery event handler that initiates PHP code

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related