Update Database without refresh - php

Im trying to update a database field without refreshing the page
what im using is:
<a class="youtube" href="#" rel="<?php echo $row['link'];?>" title="<?php echo $row['title']; ?>" >
<div class="overlay_play"></div>
</a>
Then i want to update from this video ( they all have unique id's ofc) the field plays
My table looks like this:
id - int(9)
title - text
link - text
plays - int(99)
So in short
I have a video list of 6 video's on one page and you can play them in a popup window
But what i want is if you click play video that the plays field will be updated
The popup window is done with jquery ( like lightbox ) so i can't refresh the page.

Its easy ,you can do this by using ajax along with php page
if(playbutton pressed) {
//perform the database operation in through calling a ajax page
//using jquery post one of them
$.post('ajax/save.php', function(data) {
$('.result').html(data);
});
}
save.php
//Contains all the database operations to save the field

Related

Linking to bootstrap modal on another page

I have a site where everyone's bio pops up in a modal with the code setup on template-team.php like this
<div class="tem_pic" id ="<?php echo $p->ID ?>" data-toggle="modal" data-target="#leader-modal-<?php echo $p->ID; ?>"
Then I have a slider on the template-homepage.php that calls out certain people. I want those sliders to be able to go to the team page, then open up that corresponding person's bio
<a class="slide_logo white_right_arrow" data-target="#leader-modal-<?php echo $p->ID; ?> href="/team"></a>
I can't get the modal to popup when I get to the page though.
This can be achieved with combination of PHP and JS. Let's say your template-team.php is assigned to https://example.com/team. Now, to pop up a team's bio modal, we create URLs like https://example.com/team?m=Junaid (m for member)
Using the following code we can popup a modal based on the URL parameters on page load.
<?php if ( isset($_GET['m']) ) : ?>
<?php // I'll skip how to open a specific modal, I think you're separating those with team member ID or whatever ?>
<script>
jQuery('window').on('load', function(){
// to open a modal in JS
jQuery('#target-modal-ID').modal('show');
});
</script>
<?php endif; ?>
Put this code in template-team.php after JS load. Customize and modify the code to your requirements.

Hide the fact a page has been sent a form on reload

I have used a form to submit an image id to the another page. I have done this rather than r than via url because it makes the url cleaner. However, when the user now reloads, it asks if they want to submit the form again. The won't know they have submitted a form, as far as they are aware they have simply clicked an image and been brought to a page that displays that image bigger.
Is there any way around this, that saves the image id the hidden form field has sent via the form, yet refreshes the page for the user?
HTML
<a class="gallery-img span4 js-img-submit" href="#">
<img src="img.jpg"/>
<form action="/image" method="post">
<input type="hidden" value="<?=$img['id']; ?>" name="image_id"/>
</form>
</a>
JQUERY
$('.js-img-submit').click(function(){
$(this).find('form').submit();
})
PHP
$image_id = isset($_POST['image_id']) ? $_POST['image_id'] : false;
Somehow the parameter needs to be send to the image page.
GET: You dont want that.
POST: You use that, but causes the refresh problem.
SESSION: Will be hidden, but cause troubles, when he opens multiple images, and then refreshing the first page.
So, i would to the following:
Use the hashtag, and load the image via javascript then. finally remove the hashtag:
MainPage:
<a class="gallery-img span4 js-img-submit" href="/image#<?=$img['id']; ?>">
<img src="img.jpg"/>
</a>
ImagePage:
<script language="javascript">
$(document).ready(function(){
var imgid = document.location.hash.slice(1);
document.location.hash = ""; //Remove
loadImage(imgid);
})
</script>
loadImage then needs to be the required javascript function.
The user might notice it for a split second. IF the user is not allowed to see, then your only way would be to use the PHP Session with seperate variables for every opened image-window.
You can do something like this:
$('.js-img-submit').click(function()
{
$.post("image.php", {id: $(this).find('input').val()});
})

Track dynamic button with href and target_blank

I need to track every time a user clicks on a dynamic button. Also I need to know what product is he clicking. Now I have this button:
<div class="buy">
<a target="_blank" href="<?php echo $this->product['from']; ?>">
<img src="http://example.com/data/images/buy.jpg" alt="buy">
</a>
</div>
Href sends the user to another site to buy the product. How can i track this on PHP?
If the href is linking to another page that is not on your own server, you can go with an ajax-solution, like #coder1984 proposed, or you can create a proxy php script. That means:
the user clicks the link to the proxy, sending in the product URL
like: href="myproxy.php?url=<?php echo $this->product['from']; ?>"
the proxy gets the URL, checks it and updates a database, the session, a text file
afterwards it redirects the user to the actual URL
Client-side dynamic user actions can be determined using Javascript/Jquery. Here's how its done in Jquery,
$(document).ready(function() {
$('.buy').click(function(){
alert('This is clicked');
});
});
To track in PHP, you can pass the value(buttons clicked) to PHP using Jquery AJAX. Here's the manual.

overlay page in views

I have a little problem with display data queried from mysql database table
the data obtained is 3d array and I would like to use it in a javascript function
Usually, data in cake php is displayed in a ctp page whose file name(excluding the extension) is the same as the controller function's.
I would normally call that page if I click on a link in the current page as
<a href='../nextpage'>Next page</a>
or
<input type='button' onclick='../nextpage'>
'nextpage' is a ctp page (nextpage.ctp) as well as a controller function name
My problem is like this
database data queried ---sent to---> current page (having a link/button)---click to open ---->nextpage
next page will again display some data queried from the database. I sure can make nextpage as a new ctp page but I would like to make nextpage as an overlay page (a popup that grays out its parent once it shows up).
Is there any to accomplish this ?
You could have an HTML link with the following markup:
Next page
which will trigger a javascript function defined as
<script>
function someJavascriptFunction(){
//do something here
}
</script>

How to renew information from MySql database without page refresh? (using jQuery/AJAX)

I guess it is sort of simple question, but I'm not the AJAX guy, tried it, but I still don't understand it )))
Here is the situation:
1) I get one random url from database
$sql = ("SELECT url FROM url_table ORDER BY RAND() LIMIT 1");
while($row = mysql_fetch_array($sql)){
$url = $row["url"];
}
2) Than I display website that has url = $url in iframe
<iframe src="<?php echo "$url"; ?>"></iframe>
3) Then I have <button id="Next url"> which when clicked refreshes the website, so new random url is selected from database and displayed in <iframe>
What I want to do is same process, but without page refresh. Ideally process should go like this:
User clicks the "Next Button" >> New random $url get's selected from database >> after that new url is echoed in iframe (<iframe src="<?php echo $url?>") >> iframe shows new website.
All of that without page refresh (using AJAX and jQuery if possible).And if possible could you please suggest how to show loading.gif image in iframe while information is getting renewed and loaded
Thank You )))
First, make a page that only spits out the iframe (no other HTML, just the 1 tag). Let's assume this page is at www.yourwebsite.com/random_iframe.php
Next, add the JQuery JS to your main page.
On the main page, wrap the iframe in a div with an id, like:
<div id="frm"><iframe src="<?php echo "$url"; ?>"></iframe></div>
Then update the button
<button id="Next url" onclick="show_next();return false;">
Finally, add the JS
function show_next()
{
$('#frm').load('random_iframe.php');
}
That JQuery code above select the ID 'frm' and replaces its contents with whatever is returned from the page 'random_iframe.php'.

Categories