I want to use a single file with multiple pages.
In the #first page I have a link to another page with a value sent via GET:
<a href='#second?ID=10'>
And when triggered, it should show the second page and write the value with php:
<div data-role="page" id="second">
<div data-role="header" data-add-back-btn="true">
<h1>Second page</h1>
</div>
<div data-role="content">
<?php
$ID = $_GET["ID"];
echo $ID;
?>
</div>
</div>
It seems that the php code isn't run when the second page is loaded.
Is there any easy way to do this?
Related
I have a series of DIVs created from a PHP loop, each with the same class ('image'), that are generated with a small placeholder image to speed up the initial page load. However, once the page has finished loading I want to replace each of the divs content with the returned content from another page. This other page would render a higher quality image, unique to each DIV, and some associated metadata about the image. Essentially it would be a sort of lazy-loading.
After the PHP loop my HTML code looks like the below:
<div id='content'>
<h1>Some title goes here</h1>
<div id='home'>
<div class='image' id='aaa'><img src='/placeholder.jpg'/></div>
<div class='image' id='bbb'><img src='/placeholder.jpg'/></div>
<div class='image' id='ccc'><img src='/placeholder.jpg'/></div>
<div class='image' id='ddd'><img src='/placeholder.jpg'/></div>
<div class='image' id='eee'><img src='/placeholder.jpg'/></div>
<div class='image' id='fff'><img src='/placeholder.jpg'/></div>
</div>
</div>
I'm very new to JQuery and had hoped to do something like the below to then replace the contents of each DIV with the class 'image'. Essentially the idea is to take the id value from the DIVs with class 'image', parse that to the newimage.php script and then have the HTML returned from newimage.php replace the DIV content.
<script>
var updateDivs = function(){
var objid = $(this).attr('id');
$("#"+objid).load("newimage.php?id="+objid);
}
$('.image').ready(updateDivs);
</script>
Such that after the running of the JQuery the HTML code would look like the below:
<div id='content'>
<h1>Some title goes here</h1>
<div id='home'>
<div class='image' id='aaa'><span class='image-title>Image Title 1</span><span class='image-views'>10</span><img src='/img/aaa.jpg'/></div>
<div class='image' id='bbb'><span class='image-title>Image Title 2</span><span class='image-views'>11</span><img src='/img/bbb.jpg'/></div>
<div class='image' id='ccc'><span class='image-title>Image Title 3</span><span class='image-views'>9</span><img src='/img/ccc.jpg'/></div>
<div class='image' id='ddd'><span class='image-title>Image Title 4</span><span class='image-views'>8</span><img src='/img/ddd.jpg'/></div>
<div class='image' id='eee'><span class='image-title>Image Title 5</span><span class='image-views'>12</span><img src='/img/eee.jpg'/></div>
<div class='image' id='fff'><span class='image-title>Image Title 6</span><span class='image-views'>14</span><img src='/img/fff.jpg'/></div>
</div>
</div>
However, after trying a few variations in JQuery code I cannot get this to work as expected. Any help would be greatly appreciated!
Your issue is with $(".image").ready(.. - a quick debug shows that this inside the function is the document, not the image. .ready() doesn't work this way.
.ready()
https://api.jquery.com/ready/
Specify a function to execute when the DOM is fully loaded.
The above page shows $("img").ready(handler) and states that this is equivalent to $(handler). So .ready could be called .documentIsReady.
There doesn't seem to be a need to wait for your your placeholder to load, so you can just make your call on a normal doc.ready, passing in each image:
$(() => $('.image').each(updateDivs);
or, if you prefer:
$(function() {
$(".image").each(updateDivs)
});
I split my body content in two parts. The left one has a map and buttons. When I click on the button, I get the result from Arad.php in another window.
How can I set the target to the second half (split right) of my body?
<body>
<div class="split left">
<div class="centered">
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="Harta_Romaniei.jpg" alt="Harta_Romaniei" style="width:100%">
<button class="btnarad"; onclick= "window.location.href='Arad.php'"; Target="split right">Arad</button>
<button class="btntimisoara">Timisoara</button>
</div>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>Information</h2>
// I want the information here!
</div>
</div>
</body>
It doesn't have much to do with PHP, you should really do it with HTML + JavaScript.
The window.href.location will always redirect you to another route, and will never do what you want.
You'll need something like this: Simple Load an HTML page from javascript based on window width
I have following script to show the ratings for courses. But it is working properly for pagination first page showing 5 stars, when it comes to second page it showing 10 stars. Code is like below,
<div class="ft-item">
<div class="rating_<?php echo $row->courseId;?>">
</div>
<script>
$('.rating_<?php echo $row->courseId;?>').raty({
starOff : '<?php echo base_url()?>public/images/star/icon-star-2.png',
starOn : '<?php echo base_url()?>public/images/star/icon-star-1.png',
starHalf: '<?php echo base_url()?>public/images/star/icon-star-3.png',
readOnly : true,
half : true,
score : <?php echo $r;?>,
space : true
});
</script>
First page course image
In this course five stars are displaying and located in first page.
Second page course image
In this course 10 stars are displaying and located in second page.
Is the above script is not binding in second page?
As you are calling the pagination via ajax, then you need to call your script after ajax response in the success function too. But the problem is that your score needs to be specific to every book/item, you need to change the
score : <?php echo $r;?>
and
$('.rating_<?php echo $row->courseId;?>')
and get the score via javascript rather than php and move the function into ajax success. Now to get the data from the javascript and removing php you need to use data attributes for this purpose add the rating like data-rating=<?=r?> whie populating the html via php and then use .each and iterate all elements and get the respective data-rating attribute in javacript via $(element).data('rating') and assign to the rate option. You can see the below example how to populate the rating based on the data attrbutes you just need to copy this javascript and update you html accordingly and you are done.
$('.rating').each(function() {
var ele = $(this);
$(ele).raty({
starOff: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-off.png',
starOn: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-on.png',
starHalf: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-half.png',
readOnly: true,
half: true,
score: ele.data('rating'),
space: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/jquery.raty.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/jquery.raty.js"></script>
<div class="ft-item">
<div class="rating" data-rating="3"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="4"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="2"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="1"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="5"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="4"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="4"></div>
</div>
I have a website project where the right hand side of each page is being called from the includes folder that contains an input field and a button. Once the user clicks on the button a php script is run and depending on the result from the script the user is redirected to a thankyou-success.php or a thankyou-failure.php file. These files are located in the root folder. I would like to prevent the user from directly typing the url to these paths and seeing the success or failure message directly. How can the user be prevented from such direct access?
At the moment I am redirecting to the files as follows:
//if found this email in our database
if($count==1)
{
header('Location: thankyou-success.php');
}
else
{
//echo "Cannot send Confirmation link to your e-mail address";
header('Location: thankyou-failure.php');
}
The two php files being called are exactly the same except for the text message displayed. I have removed the <head> tag to keep things simple and clear. The content of the file is as follows:
<body>
<!-- header start here -->
<?php include("includes/header.php") ?>
<!-- header end here -->
<!-- page title start here -->
<section id="pagetitle-container">
<div class="row">
<div class="twelve columns">
<div id="pagetitle-border">
<div id="breadcrumb">
<ul>
<i class="fa fa-caret-right"></i>
<li>Home</li>
</ul>
</div>
<p> <br></p>
<div class="twelve columns">
<p>Unable to send the activation email to the email address provided. Please confirm and try again.</p>
</div>
</div>
</div>
</section>
<!-- page title end here -->
<!-- content section start here -->
<section id="content-wrapper">
<div class="row">
</div>
</div>
</section>
<!-- content section end here -->
<footer>
<?php include("includes/footer.php") ?>
</footer>
<script>$('#noscript').remove();</script>
<!-- pageloader part 2 start -->
<!-- pageloader part 2 ends -->
</body>
</html>
You can move these files outside your web root, and include from the php script that runs on button click.
Your docroot is defined in your web server configuration. Assuming your docroot is /var/www/website/public, you need to move the files that you do not want direct access to somewhere outside this folder like: /var/www/website/files/. Then, from your main script you need to include these files rather than redirecting the user:
main.php:
if ($success) {
include(dirname(__FILE__) . '/../files/thankyou-success.php';
} else {
include(dirname(__FILE__) . '/../files/thankyou-failure.php';
}
One way is to use $_SESSION. On submit of your form, you can do:
$_SESSION['result'] = TRUE;
And in thankyou-success.php, you can do:
if ($_SESSION['result']) {
echo "Success";
unset($_SESSION['result']);
}
else {
echo "How did you get here?";
}
I am trying to pull some information from my database and put it in a modal. I went to the foundations website and tried to figure it out from their docs section. I dont exactly understand it. So I have a section of my site that allows users to request to delete a song they uploaded. Now if they click the X a modal should pop up and ask to confirm.
<div class="row">
<div class="large-8 column musicup">
<p> <?php echo "No music uploaded..."; ?> </p>
</div>
</div>
<?php
}else{
?>
<h2 style="margin-top:1em;">Music uploaded</h2>
<hr style="opacity:.4;">
<?php
while($row_a = mysql_fetch_array($res))
{
?>
<div class="row">
<div class="large-4 column musicup">
<p><?php echo $row_a['title']; ?></p>
</div>
<div class="large-3 column musicup"><span data-tooltip class="has-tip tip-top" title="<?php echo $row_a['reason']; ?>">
<div class="button <?php echo $row_a['status'];?>"><?php echo $row_a['status'];?></div>
</span></div>
<div class="large-3 column musicup_date">
<p><?php echo date('F j Y',strtotime($row_a['uploaded'])); ?> </p>
</div>
<div class="large-2 column musicup">
<p>X</p>
</div>
</div>
<?php
}
}
}
?>
</div>
So now I have the modal and all the database queries on a new page called song_delete.php.
Here is the code for that:
<?php
include_once "functions.php";
$query = sprintf("SELECT * FROM songs WHERE user_id = %d AND song_id = %d",$_SESSION['user_id'], $_GET['id']);
$res = mysql_query($query) or die('Error: '.mysql_error ());
$row_a = mysql_fetch_assoc($res);
$totalRows_a = mysql_num_rows($res);
?>
<div id="deleteMusic" class="reveal-modal medium">
<h2>Request to delete<span style="color:#F7D745;"> <?php echo $row_a['title']; ?></h2>
<p class="lead">Are you sure you want to delete this song? Please allow 2 full business weeks for deletion.</p>
<span style="float:right;">Cancel
Submit </span>
<a class="close-reveal-modal">×</a>
</div>
Thanks for any help in advance. I appreciate it.
Please dont tell me about the mysql_query and how I should use PDO or MySQLi and OOP i know this, but this site is not currently coded with all that..
OK first things first - its often better to look at the compile source (HTML Source Code) in these cases. Can you do this? From the code you've given it looks fine but without the css/js linking and showing the placement of the reveal code there's no way to tell.
How Foundation Reveals Work
1 - The modal code is placed just before the ending </body>.
2 - It should look something like this:
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
3 - Depending on the size you want you can use an extra class of .small (for a reveal size of 30% browser width. Or one of these (taken directly from Foundation Docs)
.medium: Set the width to 40%.
.large: Set the width to 60%.
.xlarge: Set the width to 70%.
.expand: Set the width to 95%.
4 - At this point you can attach data-reveal-id="<id of modal here>" or call the modal via foundation. At this point your modal will popup in all Foundation 4 supported browsers. However you need the javascript files to close it.
5 - Now make sure you have the necessary scripts
<!-- If running version with default scripts -->
<script src="foundation.js"></script>
<script src="foundation.reveal.js"></script>
6 - Then call $(document).foundation() and then via the magical jQuery javascript library it should work as intended :-).
Extras
You can add extras attributes to reveal if you wish this way (List of all the attributes
):
$(document).foundation('reveal',<options here>,<callback>)
Lastly you might want to take the ajax tag off this (you aren't calling any content in asynchronously - it's all compiled at runtime via your server