0

How do i get my jquery variable in to a php variable, I've made a php document with jquery in it, after clicking the image the css will change and you will see a bigger image next to it. I need to have the image source of the big image in a php variable to get information about the image from the database.

Codes in the php file:

<div id="box-content">
     <?php
         $con=mysqli_connect("localhost","root","root","database");
         // Check connection
         if (mysqli_connect_errno()) {
             echo "Failed to connect to MySQL: " . mysqli_connect_error();
         }

         $result = mysqli_query($con,"SELECT * FROM image");
         while($row = mysqli_fetch_array($result)) {
             echo "<img src='". $row['url'] ."' class='media-image' />";
         }
         mysqli_close($con);
     ?>
</div>
<div id="image-info">
     <div id="image">
            <img src="" id="bigimage"/>
     </div>

Code in js file:

$(function () {
    "use strict";
    $('.media-image').click(function () {
        $(this).toggleClass('media-image-selected');
    });
    $('.media-image').click(function () {
        var src = $(this).attr('src');
        $('#bigimage').attr('src', src);
    });
});
Improve this question
0

3 Answers 3

Reset to default
1

If I understand your problem is that you want to show information from an image object from database on the fly.

In that case I think you have two option:

First option

In the server-side code when you build the page, you can query every possible information from the database about images. You should save these meta-data in data HTML attributes. In the client-side code in java script you can read and show these meta-data values. To read data attributes you can use .data() jQuery function In this case your page loading time will increase, due to the big query but the client don't have to wait more to load the information, because every data are on their client side.

Second option

You can do that with AJAX loading. You need php script which build the layout. You have to put some kind of identification for the images ie: ID from the database, doesn't matter, you will search the image by this value. To put these ids I recommend you the previously mentioned data attribute. After that you'll need a PHP interface which will do the selects from database. This script should read an image ID from GET parameter and based on that select the information about that image. Put the data in PHP array and after the select convert the PHP array into a JSON array and write out. Important: this script mustn't write out anything except the JSON array. In this interface script you should change the header into json data type with this code:

header('Content-type: application/json');

Finally you have to create a client side script on the layout which load the ID from the clicked image and call an AJAX load to the interface php. For the AJAX call I suggest th jQuery ajax function: http://api.jquery.com/jquery.ajax/

So in that case you have three components:

  • layout builder (server side)
  • database select interface (server side)
  • ajax caller (client side)

The two server side script should definitely separated into two files.

This method, as you can see is more complex then the first one, but sometimes is more efficient.

Summary

The first method maybe will have a little bit longer page loading time, due to the database select. But a good sql code can be well optimized, so the query time can be measured in millisecs. In simple use-cases this is the best method.

The second one should be used when you want load or modify more complex data set on the fly.

I recommend you the first option.

Good luck!

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

Comments

0

You can set the big image url as a data-* attribute like 

echo "<img src='". $row['url'] ."' data-big='". $row['bigimage'] ."' class='media-image' />";

then

$('.media-image').click(function () {
    var src = $(this).data('big');
    $('#bigimage').attr('src', src);
});
Improve this answer

1 Comment

That is not what i meant, I already have the correct src and it also show a big image after clicking one of the small ones. But i need the src from that big one in a php variable.
0

PHP script runs at server side which generates your HTML along with images and JavaScript stuff

then on client side (browser) you will perform image click event ( make image bigger)

but to fetch information of image from database using "src" you need to make another server request (make request to PHP file on server side)

either by refreshing existing page or via Ajax call

it would be good to use Ajax call and also you can get "src" value from JavaScript , just pass it as parameter to PHP file and make that PHP file to return image information from database using "src" param

Improve this answer

Comments

Your Answer

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