0

I'm having trouble getting my head around a concept on a site I'm trying to develop (I'm relatively new to PHP so it's taking me a while).

Basically, I have some html content within a PHP Variable that I'd like to output in a lightbox when clicking a link.

Currently, this works as follows -

echo '<a class="fancybox" id="inline" href="#data' . $limit . '">Read more</a>' ;  

echo '<div style="display:none"><div id="data' . $limit . '"><h2 class="innertitle">' . $item['linktitle'] . '</h2>' . $item['descriptionfull'] . '</div></div>';

So what's happening here is that the variable is loading into a div on the page, which is hidden from the end user, clicking the link then loads this data into a lightbox using Fancybox. This works great but as the number of articles on the site increases (and their descriptionfull html) the page itself is getting very large and taking a long time to load.

So what I'd want to achieve if possible is to get the 'read more' link to point to another php file on the site that when loaded will bring in php variable dynamically. This saves the descriptionfull variables from getting loaded on the main page and should therefore only be loaded when the relevant readmore link is clicked.

Is this possible? Cheers.

4 Answers4

4

Since you are using fancybox you are already using jQuery, then you could use jQuery ajax to achieve what you want.

Check this jQuery Ajax POST for reference.

Community
  • 1
  • 1
Joeme
  • 505
  • 1
  • 5
  • 12
0

What you want to achieve (dynamically loading a part of your page without reloading the whole page) is indeed possible.

This is what is called AJAX.

You should read a bit about this as it probably is more complex than what you probably already did with php / javascript.

I would advise you to try jquery out.

If you find it too complex for now, the only solution would be to reload the whole page when you click on the link, so you could, with $_POST data, reconstruct your page as you did before. This will be a lot less seamless for your user though.

Kethryweryn
  • 639
  • 4
  • 11
0

jquery's ajax method is a great and powerful it can handle everything as you need.

in jquery there are various methods available to perform AJAX calls according to your requirements, but all of these are synonyms of ajax method of jquery.

and if you want to use ajax method for all of these things you have to pass various arguments according to your requirement

 $.ajax({
    'url':you url,
    'type':request type,
    'data':your data,
    'success':success handler function,
    'error':error handler function,
    /*and many more*/
    )}

Ajax is a asynchronous communication mechanism which can be implemented using XMLHttpRequest (xhr) or jquery.

Dinesh
  • 447
  • 1
  • 6
  • 22
0

Try putting the echo statements into a separate file formatted as a print line

lines.php

<?php
$line =  '<a class=\"fancybox\" id=\"inline\" href=\"#data' . $limit . '\">Read more</a>' ;  
$line .=  '<div style=\"display:none\"><div id=\"data' . $limit . '\"><h2  class=\"innertitle\">' . $item['linktitle'] . '</h2>' . $item['descriptionfull'] . '</div> </div>';

?>

Then you can include the lines file as needed. This makes the lines file reusable and the print page easier to read

<?php

include("lines.php");

echo $lines ;

?>

I hope this answered your question

ALHaines
  • 11
  • 2