i have over one hundred html files that all roughly have the same structure. the html files represent each page of a comic.
naturally, i've realized that it would be more efficient to apply the structure of these pages to one file, and allow that file to dynamically create all of the comic pages.
my goals are so that, one; when a user accesses a comic page, the page number that the link contained can be passed through as a number value to determine the image file and the url.
two; when a user clicks "next" or "previous", the number value that defines the page is either added to or subtracted by one to load in the new url & image file.
and three; for the "next" and "previous" buttons to define themselves/decide whether to appear or not based on a filecheck i've already written.
<?php
if ($_GET["img"]) {
$imgnum = $_GET["img"];
} else { $imgnum = 1; }
?>
<html>
<div class="block">
<?php echo '<img class="page" src="' . $imgnum . '.png">'; ?>
</div>
</html>
this code does the trick for changing the image file and url based on the value of $imgnum but when it comes to passing values into the "next" and "prev" buttons, i have no idea what the hell im doing. i tried doing THIS:
<?php $prevValue = $imgnum - 1?>
<h2 class="arrow">Previous</h2>
clearly, passing a variable into that key does not work. is there any way to preserve the dynamism of the buttons with this php method? these buttons need variables to work on their own. do i have to switch to jquery? i honestly above all else need advice on where to start. i barely understand what's going on in this php script itself.
<?php
if ($_GET["img"]) {
$imgnum = $_GET["img"];
} else { $imgnum = 1; }
?>
What the above does.....
If (the URL string contains the [img] value ) {
Get the value of [?img=] from the URL string...
i.e. index.php?img=4 .. (it is getting the 4)
and set the [$imgnum] variable to that value
} else {
But if the URL does NOT contain the [img=] value,
then set the variable value to 1 [$imgnum = 1;]
}
It's difficult to tell exactly what you want, but the below will add the value properly to the button.
<?php $preValue = $imgnum - 1; ?>
<h2 class="arrow">Previous</h2>
PHP lines end with a semicolon... and you have to echo variables for them to be output to the HTML.
I have no clue what jQuery and javascript have to do with your question. But yes.. this could all be handled by an ajax request and you wouldn't need to reload the page every time a button is clicked.
However, if you don't understand what the PHP is already doing, explaining how to do this via AJAX will be exceptionally confusing to you. And much more of your code structure would need to be seen.
You're creating the right code but you just forgot to echo it.
You need to change your line to;
<h2 class="arrow">Previous</h2>
or you can use the shorter version if your php.ini configuration allows to;
<h2 class="arrow">Previous</h2>
Note:
You should be aware of SQL injection and secure your get variables by;
$imgnum = (int)$_GET["img"];
As you are taking the $_GET value as a variable, this time, only integer values will work so hackers cannot inject a code.
Related
i'm trying to highlight current value in this loop menu:
<?php
for ($i=count($anos)-1;$i>=0;$i--)
echo '<li>'.$anos[$i]['ano'].'</li>';
?>
I'm trying to fix some problems in a web page but my knowledge in programming is rudimentary at best. I've managed to fix a lot of issues by googling, but i'm having trouble getting a solution to this.
This loop gets the years (anos) from the DB and displays all of them in a menu, clicking on a year brings a page with the image gallery.
This is the page: http://marialealdacosta.com/obra.php
Thanks for the help.
You can use $_GET to use the passed value along with URL. In your case it's ano.
Use this value to compare with loop's value and if they are similar change the style of the element.
So your code look something like this,
<?php
$ano="";
if(array_key_exists("ano",$_GET)) {
/*
Check if ano value is passed along with URL
before accessing it. Other wise it will give error.
*/
$ano=$_GET["ano"];
}
for ($i=count($anos)-1;$i>=0;$i--) {
$styles="";
if($anos[$i]['ano']==$ano) { // this will check the current ano.
$styles="background:red;"; // change appropriate styles here...
}
echo '<li style="'.$styles.'">'.$anos[$i]['ano'].'</li>';
}
$_GET is an associative reserved array of variables passed to the
current script via the URL parameters.
I have a website, written in PHP, which is setup to run on desktop, mobile and iPad. Everything seems fine with desktop and mobiles. However, on the iPad I have an issue where I can save submitted POST values to the database in portrait mode, but when I try doing the same thing in landscape, I just don't get the values that were actually submitted in the form from the POST.
I have the same code for the input form in both orientations. However, when I check the data received as POST values in portrait mode, I do get the data that was actually entered into the fields in the form. My problem is that when I do the same thing in landscape mode, I don’t get the submitted value from the form. Instead, I get the data for that field from the database, when there really doesn’t seem to be any way that that data could end up as the POST value. This really doesn’t seem possible considering how my code is set up.
I will now talk you through key parts of my code in all of this.
I have two JavaScript functions in the header section of my index.php file, which are used to check orientation and also to respond to orientation changes (as shown below). These hide/show divs for each orientation in the body of the same index.php file. These do both work, as I see the page content change correctly on the iPad, as I change its orientation.
function check_orientation() // check orientation for ipad home page.
{
var div_portrait = document.getElementById('ipad_home_page_portrait');
var div_landscape = document.getElementById('ipad_home_page_landscape');
if(window.innerHeight > window.innerWidth)
{
div_landscape.style.display = 'none';
div_portrait.style.display = 'block';
}
else
{
div_portrait.style.display = 'none';
div_landscape.style.display = 'block';
}
}
window.addEventListener("orientationchange", function()
{
var div_portrait = document.getElementById('ipad_home_page_portrait');
var div_landscape = document.getElementById('ipad_home_page_landscape');
if (window.orientation == 0)
{
div_landscape.style.display = 'none';
div_portrait.style.display = 'block';
}
else
{
div_portrait.style.display = 'none';
div_landscape.style.display = 'block';
}
}
, false);
In the body of index.php, I have the following which has been simplified, to keep this from getting any longer than it already is. At the same time all the key/relevant bits of code have been included:
<body onload='check_orientation();'>
<div id='ipad_home_page_landscape'>
<?php include ('view_edit_company_ipad.php'); ?>
</div>
<div id='ipad_home_page_portrait'>
<?php include ('view_edit_company_ipad.php'); ?>
</div>
</body>
As stated above I use the same code file in both orientations (as can be seen in the 2 divs above). I get this to work by using conditional code at key points in the file for setting the widths and heights of page components.
The file ‘view_edit_company_ipad.php’ includes a form which allows the user to input data, etc. The following is one the fields from that form:
<input type='text' name='company_contact_name' value='<?php
if (isset($company_contact_name)) echo $company_contact_name; ?>' />
As I’ve already stated, I can get the data inserted into the form in portrait mode, if I check the POST value with the following code:
<?php echo $_POST[‘company_contact_name’]; ?>
However, if I do the same thing in landscape mode, I don’t get the value that was submitted in the form, even when all the code is exactly the same.
Also, I use that echo statement right at the very top of my index.php file, so there is no way that any of my code has changed that POST value. I just don’t get the data that was inserted as 'company_contact_name' from that echo statement when I’m using the iPad in landscape mode.
I realise that I've written a lot here, but I couldn't give all the required info, if I'd made it any shorter. Big thanks to anyone who reads this and even bigger thanks, if you can offer a solution of any sort.
Try var_dump() dumping the entire $_POST superglobal to see what the script receives from the browser.
I suspect the isssue is with multiple form control names within the same form. If both the divs code is within the same form and in both divs you have the input with name company_contact_name then only one of them (the one in the portrait div) is sent on form submission.
If this is the case, then check out the solution at Multiple inputs with same name through POST in php
Basically you can have an array of inputs, though you could also rename one of them.
On my website an user is able to fill in an url. When he fills in the url, he gets all the images src's from that url. I push these src's to an array in php:
array_push($goodfiles,$pic);
Now the user will be able to choose on of the pictures (with a next or prev button) and then save it to the database. The picture that's saved is based on the id of the image in the array. So $goodfiles['0'] means id = "0" and so on.
I want the swapping of the images to work with ajax, so that the pages doesn't have to refresh all the time when clicking the next or previous button. And then when I save the form, I want to know the id of the current image, so that I can save it to the database.
How do I realize this with Ajax (jquery)?
Edit:
This is how I do it right now:
$current_id = $_GET['id'];
if(empty($_GET['id']) || !empty($empty)) { $current_id = 0; }
$prev_id = $_GET['id'] - 1;
if($prev_id < 0){ $prev_id = 0;}
$next_id = $_GET['id'] + 1;
if($next_id > $_SESSION['count']-1 && $_SESSION['count'] != 'empty') { $next_id = $_SESSION['count']-1;}
This is the code for the pagination
And this is the pagination:
<div id="url_pic">
<img src="<?=$_SESSION['pictures'][$current_id]?>" class="img_load"><br>
<? if($_SESSION['count'] > 1) { ?><center><img src="img/add/left.png"> <img src="img/add/right.png"></center> <? } ?>
</div>
So right now my solution doesn't contain any javascript, but it's all php coded. And the page refreshes everytime you want to see the next picture. I want to solve this in ajax, so that you can paginate through the images without a refresh. The way I want it is like this link:
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
But except for the text, I want to paginate through images.
You probably don't need to use AJAX for this. Simply return a html file containing a JavaScript array, which contains all those image URLs and do the other stuff using JavaScript.
Get back to StackOverflow in case you've a more precise question and hopefully some code, which we can help on ;)
Load a script at the bottom of your php page the user side of the PHP where all your HTML is, above the closing body tag thats something loosely similar to this
<script type="text/javascript">
var myArray = <?php echo json_encode($myPHParray); ?>
</script>
this way when your page loads out it renders with a dynamic javascript json object as a variable that you can work with client side, this removes the need for an AJAX request all together unless your doing stuff with the data your playing with. From first glance Im guessing not really per say. But yea, at the very least its one less transaction to be made when the page is loading.
edit just noticed someone said similar while I was typing out.. Lars.. so I guess this is a follow up to his answer :-D
I have one question which is somewhat two-parted (though the parts go hand in hand). I've started picking up PHP, and I wanted to do two things when an image is clicked.
I want the click to
Increment a session variables, say $_SESSION['entry'].
Reload the current page (say index.php).
How should I go about this?
To be clear, I'm not asking for someone to code this for me, I'd just like to be pointed in the right direction because I'm not too sure what the best way would be.
Well, anchor links "reload" the page if the href points to the same page. So, all you need to do is tell PHP you want to increment the session variable. You could use a GET variable to do this:
Increment the counter
And then in your index.php:
if (isset($_GET['increment']) && $_GET['increment'] == 'true') {
$_SESSION['counter']++;
}
This assumes you've already initialized the session variable counter at some point. You can check out the wonderful PHP docs to explain the functions used above if you aren't familiar with them.
The way to do this would be to link the image to "itself" $_SERVER['PHP_SELF'] perhaps or just to /index.php, and check the session to see if that value is set, and if so increment it.
<?php
session_start();
if (isset($_SESSION['entry'])) {
$_SESSION['entry']++;
} else {
$_SESSION['entry'] = 1;
}
// if entry is greater than some value in your DB, then set it back to 1
<img src=.../>
<?php if($_GET['incr']) $_SESSION['entry']++; ?>
this should give you the idea.
You could do an AJAX call to a PHP script that increments $_SESSION['entry'].
Load page with image that has a link around it: "?imageClick=1" for instance
On image click the page is therefor automatically loaded
If $_GET[ 'imageClick' ] equals 1 increment the session variable
Redirect to same page without the imageClick variable
If you are concerned that index.php?imageClick=1 may be remembered by the browser in it's history, and therefor can be used to reload without an actual image click:
Load page with a form that has method POST and an input element of type image, named imageClick (acting as a submit button) with value 1
On image button click the form is submitted to the same page
If $_POST[ 'imageClick_x' ] or `$_POST[ 'imageClick_y' ] is set and increment the session variable
Redirect to same page
I have the following jQuery code in my PHP file (edited Jan 19 2010 # 10:40 MST):
<?php
$count = 0;
foreach($attachments as $attachment) :
echo '<script type="text/javascript">
$(\'#a_'.$count.'\').click(function() {
$(\'#d_'.$count.'\').show(200);
});
// if "no" is clicked
$(\'#d_'.$count.' .no\').click(function() {
$(\'#d_'.$count.'\').hide(200);
});
// if "yes" is clicked
$(\'#d_'.$count.' .yes\').click(function() {
$(\'#d_'.$count.'\').hide(200);
// update database table -- this is why I need the script inside the for loop!
var jsonURL = \'http://path/to/update_db_script.php\';
$.getJSON(jsonURL, {\'post_id\' : '.$attachment->ID.'}, function(data) {
alert(\'Thank you. Your approval was received.\');
});
$(\'#a_'.$count.'\').replaceWith(\'<span>Approved</span>\');
});
</script>';
echo '<li>';
if($attachment->post_excerpt == 'approved') {
// Check the proof's status to see if it reads "approved"
echo '<span>Approved</span>';
} else { ?>
// If not yet approved, show options
<a class="approve" id="a_<?php echo $count; ?>" href="#">Click to Approve</a>
<div class="confirm-approval" id="d_<?php echo $count; ?>">
<p>Please confirm that you would like to approve this proof:</p>
<a class="yes" href="#">Yes, I approve</a>
<a class="no" href="#">No, not yet</a>
</div><?php
} ?>
</li>
<?php $count++;
endforeach; ?>
The page in question is available here. The "click to approve" links do not work (that's my problem).
When I view source, the PHP variables appear to have echoed properly inside the jQuery:
<script type="text/javascript">
$('#a_0').click(function() {
$('#d_0').show(200);
});
... etc ...
</script>
This looks correct, but nothing happens when I click any of the links. However, when I replace the PHP echo statements with plain numbers (0, 1, etc.) the click functions work as expected.
You may be asking: why on earth do you have this inside a for loop? The reason is that I need to retrieve the attachment->ID variable and pass it to an external PHP script. When someone clicks "approve" and confirms, the external script takes the attachment->ID and updates a database value to read "approved".
Why won't the click function fire when PHP is in place? Is there some kind of greater force at work here (e.g., hosting limitation), or am I missing a fundamental piece of how PHP and JavaScript interact?
Since you didn't post your HTML its a little hard to troubleshoot.
First, I am not sure why one is working and the other is not since the code it is outputting looks correct. Either way, I still would make some changes. Move your a_0,a_1, etc and d_0,d_1, etc into the id attribute instead of a class:
<div>Click Me</div>
<div class="confirm_approval" id="d_0">Show Me</div>
<div>Click Me</div>
<div class="confirm_approval" id="d_1">Show Me</div>
Now, instead of outputting your code in a loop in PHP, place this jQuery code once on your page:
$(document).ready(function(){
$("a.approve[id^='a_']").click(function(e){
var id = this.id.replace('a_',''); // Get the id for this link
$('#d_' + id + '.confirm-approval').show(200);
e.preventDefault();
});
});
This code finds any a element with the approve class that has an id that starts with a_. When this is clicked, it grabs the number off the id a_0 = 0 and uses that id to find the confirm-approval element and show it.
Since the javascript is run on the client and has no way of knowing whether the script was generated using PHP or not, I think that particular part is a wild goose chase...
When I replace the PHP echo statements
with plain numbers (0, 1, etc.) the
click function works as expected.
Do this again and compare the actual output using view-source in a browser. I'll bet you find that there is a difference between the working and failing scripts, other than one of them being generated by PHP.
It seems that the problem is in jQuery selectors. Instead of dynamically binding click() events on multiple objects with an output of PHP code, use just one class selector and bind to objects with this class. And you can specify an id attribute to make them unique.
Something strange too is to have the script tag and the
$(document).ready(function()
in the loop. I don't know if this causes any problems, but it's sure not very efficient, one time is enough.