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
Related
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.
I am trying to have my loop stop at 5 rows by default, but when the button is clicked it would load more. Are there any simple solutions for this? I don't want the page to refresh either.
My code below:
<?php
$count = 0;
while (($row = mysql_fetch_assoc($thequery))) {
echo $row['title'];
$count+=1;
if($count%5==0){
break 1;
}
}
?>
<span onClick="loadmore_somehow">Load More</span>
An AJAX call would do that. Using Javascript (and preferably a library like jQuery) you would make a call to your script and get more rows, pass them back, and then use Javascript to draw the rows. This does not reload the page.
http://api.jquery.com/category/ajax/
I think you need to know more about Javascript Ajax, It will help you do update,retrieve the content without refreshing page.
Check out this tutorial http://www.developphp.com/view.php?tid=1350
Hi guys I'm trying to somewhat of an autosurfer and for the life of my I cannot figure out how to use iframes on my site to display all of the sites I have in my mysql database. Now all of the website urls are stored in a column in my table in the database, so I assume I'll need to assign them to an array. But my main problem is getting them to display each site for fifteen seconds then load a different one. I understand iframes for the most part, but I don't get how to get it to show a site, refresh show another, etc. I also can't figure out how to load the sites into an array for the iframe to use. Please help. Thanks.
You will need to use JavaScript to refresh your iframe.
Let's say this is your iframe:
<iframe id="iframe" src="http://www.google.com"></iframe>
You'll need to use JavaScript to do the refresh, and AJAX if you want it to get data from your database. So do something like this in a javascript file (I'm using jQuery):
$(function(){
function refresh_iframe(){
$.get('iframe_url.php', function(data){
// set iframe src to the url that the php gave us
$('#iframe').attr('src', data);
// run this function again in 15s
setTimeout("refresh_iframe()",15000);
});
}
// run the first time
refresh_iframe()
});
Then in iframe_url.php you'd have something like:
<?php
$q = mysql_query("SELECT `url` from `iframe_urls`");
$results = mysql_fetch_assoc($q);
$key = array_rand($results);
echo($results[$key]['url']);
?>
Ok I have a table that changes the displayed text once clicked on like the one displayed on http://www.w3schools.com/ajax/ajax_database.asp
I'm trying to update it based on each click.
For example.
Page Load > Load news article 1
onClick 1 > Load news article 2
onClick 2 > Load news article 3
All I want is for it to change based on each click, to a subsequent value. I have a php mysql database script that will pull the data from the database each time called.
The real question: Should I program the php to return a new table data cell with the new
oncLick="showNews($next_number)"
or should I leave that up to the AJAX, before it requests the information, just +1 it up.
I'm new to AJAX programming and not that experienced in PHP. I have searched everywhere and apologize if this is a redundant question. Just point me in the right direction.
write a php function to support to get the content by id. showNews(news ID). and then pass the newid with the ajax request. no need to change the newsid in the PHP.
I'm guessing something like this would be simplest:
var article = 0;
function showNews(){
get_article(article);
// magic
article+=1;
}
To be honest, just pick the way which seems more natural to you. Unless this is only a small part of something huge, it won't matter.
if I understood right, you want to get the next news when clicking on your button...
I suggest you to use jQuery for Ajax request...
It could be like this:
<script type="text/javascript">
$(document).ready(function(){
var result = 0;
$('#myButton').click(function(){
$.post('phpfunction.php',result,function(r){
$(document).append(r);
});
result ++;
});
});
</script>
And in PHP:
<?php
$result_id = $_POST['result'];
//SELECT * FROM WHERE id = $result_id;
?>
I have a page that scrolls horizontally left to right. As the user completes the form, the page is scrolled to the left to show the next part of the form. This is no problem with jQuery. The problem is that I want to have the option to have the parent page jump to a specific subpage of the form. If my code were vertical, this could be easily done with hashtags. The only other way that I can think of is to pass a GET variable in the querystring and then echo the GET variable to a javascript variable and move the page that way. Is there a better way?
var subpage = '<?php echo $_GET['subpage'] ?>';
if (subpage == 'yes') {
$('#page_wrapper').css('left', '-2000px');
}
You can still do it with hashtags:
var subpage = window.location.hash;
if (subpage == '#yes') {
$('#page_wrapper').css('left', '-2000px');
}
Also you probably want to use scrollLeft to set the horizontal scroll of the page, if you do it the way you're doing it there you'll run some of the page outside of the viewport.
$(document.body).scrollLeft(2000);
You can jQuery plugin to move to any part of the webpage using scrollTo. Hope it will work for you. http://flesler.blogspot.com/2007/10/jqueryscrollto.html