video.php == 'video'
esse.php == 'esse'
I have my main page - 'esse' which is my welcome page and page 'video' which is my view videos page. 'esse' includes top nav container and side bar, so it's included in every page. In top nav container there is two select boxes, user can choose which video to watch by chosen tags from those select boxes. So user can access 'video' page clicking the link or by simply choosing tags from top-nav-container and hitting 'search'. And I want (I think thats the only way it can be done) to put my AJAX call in 'esse'. So if user is on any page but 'video' I want to redirect him to 'video' (if he chooses tags and clicks search) but if he is already on 'video' - I want to AJAX take a turn and update content without reloading the page(its annoying). The problem is that I (there is my AJAX call on 'esse') don't know how to padd responce from AJAX (so on success function) to 'video' in variables:
$language
and
$level
And also I'm confused about how to redirect user correctly - so only if he is not on 'video' page yet - otherwise - just update content. So he/she can easuly search videos being on any page just by using select boxes in top-nav.
Here is the esse (only AJAX)
$(document).ready(function() {
$('#search').click(function(e) {
$language = $('#language').val();
$level = $('#level').val();
if (!language == '' && !level == '')
{
$.ajax({
type: "GET",
url: "video.php",
data: { language: $language,
level: $level,
},
cache: false,
success: function (data) {
alert('success');//actually here I need to pass $level and $language to video.php
}
});
return false;
}
});
});
Here is esse (form)
<form method='get' action="video.php">
<select class="show-select language" name="language" id='language'>
<option value='Language'disabled selected >Language</option>
<option value="All">All</option>
<option value="Afrikaans">Afrikaans</option>
<option value="Albanian">Albanian</option>
<option value="">Welsh</option>
</select>
<div class="search-box">
<section class="main">
<div class="wrapper-demo">
<input type="hidden" name="level" id='level'/>
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span name='level' class="span-level">Level</span>
<ul class="dropdown">
<li class="get"><a href="#"><i class="icon-truck icon-large"> </i>All</a></li>
<li class="get"><a href="#"><i class="icon-plane icon-large"></i>A1</a></li>
<li class="get"><a href="#"><i class="icon-plane icon-large"></i>A2</a></li>
<li class="get"><a href="#"><i class="icon-truck icon-large"></i>B1</a></li>
<li class="get"><a href="#"><i class="icon-plane icon-large"></i>B2</a></li>
<li class="get"><a href="#"><i class="icon-plane icon-large"></i>C1</a></li>
<li class="get"><a href="#"><i class="icon-truck icon-large"></i>C2</a></li>
<li class="get"><a href="#"><i class="icon-plane icon-large"></i>Native</a></li>
</ul>
</div>
</div>
</section>
</div>
<img name='search' src="img/video.jpg" alt='search' class='search videos' id='search'/>
</form>
Here is the video (only important)
<?php
//here i process (should at least) #language and $level and choose respective query
$query = "SELECT idv,urlv, languagev, levelv, textacv, decribacv, votev FROM vid ORDER BY idv DESC";
if($_SERVER["REQUEST_METHOD"]=="GET"){
if(isset($_GET['search'])){
$language = $_GET['language'];
$level = $_GET['level'];
if($language == '' && $level == ''){echo ""}
$query = "SELECT idv,urlv, languagev, levelv, textacv, decribacv, votev FROM vid WHERE languagev = '$language' AND levelv = '$level' ORDER BY idv DESC LIMIT 5";
if($language == 'All' || $language == 'Language'){
$query = "SELECT idv,urlv, languagev, levelv, textacv, decribacv, votev FROM vid WHERE levelv = '$level' ORDER BY idv DESC LIMIT 5";
}
if($level == 'All' || $level == 'Level'){
$query = "SELECT idv,urlv, languagev, levelv, textacv, decribacv, votev FROM vid WHERE languagev = '$language' ORDER BY idv DESC LIMIT 5";
}
if($language == 'All' && $level == 'All'){
$query = "SELECT idv,urlv, languagev, levelv, textacv, decribacv, votev FROM vid ORDER BY idv DESC LIMIT 5";
}
}}
$fetch = mysqli_query($conn,$query);
$videos = array();
while ($row = mysqli_fetch_assoc($fetch)) { ?>
<div class='wrap'>
<div class='video-wrap'>
<div class='blockvidname'>
<div class='name'>
<h4 class='name-top'><span><?php echo $row['textacv'] ?><?php echo $row['idv'] ?></span></h4>
</div> <!-- here goes more code but its same - I retrieve all the values from the array $row and show it - so url of video - name - date - user upploaded etc. -->
To clarify more: how can I pass one variable (responce ajax) from one page to another and how can I use AJAX that is on 'esse' page without copping same jquery(AJAX) into both 'video' and 'esse' if user will be at video.php (remember - ajax is on 'esse')? Also, how can script 'know' which page user is on and act accordinally - redirect to 'video' page and do the request if user is on 'esse' and just update content if user is on 'video' page?
Please, explain the concept to me if you are not able to give me a visual example in code. The example would be better though.
Add 'origin':<?=$_SERVER[REQUEST_URI]?> to your AJAX data object. Then in video.php
$fetch = mysqli_query($conn,$query);
$videos = mysqli_fetch_all($fetch, MYSQL_ASSOC);
if($_GET['origin']==='/videos.php'){
// here you just send the results to be handled by ajax success function
// nothing before or after
echo json_encode($videos);
}else{
// keep going for every other origin
foreach ($videos as $row) { ?>
<div class='wrap'>
<div class='video-wrap'>
Then in ajax success function use the response data to repopulate the rows (it will be an array of js-objects whose properties and values are key:value pairs)