Load search result php url in div on same page - javascript

I have search results and am displaying them in div on left of page. When user clicks on the a particular result (which is a link), it needs to open on the right of the page, without refreshing the page or moving to a new page. How does one do this?
//get rows
$query = $db->query("SELECT * FROM posts ORDER BY id DESC LIMIT $limit");
if($query->num_rows > 0){ ?>
<div class="post_list">
<?php
while($row = $query->fetch_assoc()){
$postID = $row['id'];
?>
<div class="list_item"><h2><?php echo $row["title"] ?></h2></div>
<?php } ?>
</div>
<?php echo $pagination->createLinks(); ?>
<?php } ?>
</div>
</div>
</body>
</html>

You are going to have an onclick listeners on each <a> which will take your file/file.php?id= as input to an ajax call to fetch the contents at file/file.php?id=.
I am not sure how familiar you are with Javascript, if you know it very well then you'll undersntand what I said above, if you don't then please find documentation about AJAX some ajax documentation
You might also want to find documentation on stuff like innerHTML dom manipulation

Related

remove 'load more' button when all data is loaded

I'm trying to use a button to load more data from database with PHP.
Till now I can count the results and the results that are showing.
So when $count==$countAll, all the results are normally showing.
Can someone explain why this isn't working?
// Count all results
$allResults = $conn->prepare("SELECT*FROM tl_picture WHERE text LIKE '%$innerhtml%' ORDER BY id DESC");
$allResults->execute();
$countAll =$allResults->rowCount();
echo "Found results: ".$countAll."<br>";
//max 20 results showing
$statement = $conn->prepare("SELECT*FROM tl_picture WHERE text LIKE '%$innerhtml%' ORDER BY id DESC limit 20");
$statement->execute();
$collection = $statement->fetchAll();
$count =$statement->rowCount();
echo "viewable results: ". $count;
<script>
<?php if($count==$countAll): ?>
document.GetElementById('loadButton').style.display='none';
} else {
document.GetElementById('loadButton').style.display='block';
}
<?php endif; ?>
</script>
What you are trying to achieve is normally done with ajax calls. So the check for the visibility of the Load More button must be done with javascript after every asynchronous load. PHP runs on server side, once before sending the HTML document to your browser and doesn't help at all in this case.
Also you execute the sql query for all rows and then you do it again with limit this time. It is inefficient to run twice the same query just to get the number of all records.
The logic should be that you load 20 rows and each row should have an identifier. Using the identifier of the last loaded row, you ajax request the next 20 rows etc. If response data from ajax is empty, then you hide the Load More button (or disable it and set text to something like "No more records").
You might have an error in this script:
<script>
<?php if($count==$countAll): ?>
document.GetElementById('loadButton').style.display='none';
} else {
document.GetElementById('loadButton').style.display='block';
}
<?php endif; ?>
</script>
You might change it to something similar to:
<script>
<?php if($count==$countAll): ?>
document.GetElementById('loadButton').style.display='none';
<?php } else { ?>
document.GetElementById('loadButton').style.display='block';
<?php endif; ?>
</script>
The problem might be that your } else { is in JavaScript, yet there might be no if for it?

PHP redirect URL

I have successfully directed my users to a page that contains their information from a table. Using this code:
<?php foreach ($customers as $row) : ?>
<td onclick="window.location='view_customer.php?customer_id=<?php echo $row['id'] ?>&operation=edit';">
</td>
<?php endforeach; ?>
Now they are on view_cutomer.php. The next step would be to redirect the users to another page that also contains their information (the same information). Using a button. The next page is paint.php. I've tried this code, but it does not seem to work. Btw this next page no longer has a table.
<button onclick="window.location='paint.php?customer_id=<?php echo $row['id'] ?>&operation=edit';" class="rbutton">Paint</button>
How do i redirect users to a specific page using their ID?
on the 2nd page the id you want is in the get array (from the url)
<button onclick="window.location='paint.php?customer_id=<?php echo $_GET['customer_id'] ?>&operation=edit';" class="rbutton">Paint</button>

js popup loads content from first post only instead of individual posts

I have custom post type "members", which stores their details within custom-post-meta. I am currently working in it's custom-post-type-archive page named "archive-members.php" which lists all these members, with their details.
Now, I needed to display a meta-data related to each member into a simple js popup-box, so I used the code below and now each of these posts have a link which opens up a popup-box, when clicked.
I am able to display the post-meta-values in the popup-box but the problem is it shows the custom-field-value of the first post only. What I am expecting is that it should load individual custom-field-values of each of these posts, as they all have different values.
Here is a Simplified PHP
<?php get_header();?>
<h1><?php echo post_type_archive_title(); ?></h1>
<?php if(have_posts()) : while(have_posts()) : the_post();?>
<?php if(has_post_thumbnail()) { .......... }?>
<?php echo get_post_meta(............);?>
CLICK TO POPUP
<div id="light" class="white_content">
<div class="close-button">CLOSE</div>
<?php echo get_post_meta($post->ID, "account_number", true);?>
</div>
<div id="fade" class="black_overlay"></div>
<?php endwhile; endif; ?>
Here, what is happening is I am getting the same account number (which is the meta-value of the meta-key "account_number" of the First Post in the loop), whenever I am clicking on "CLICK TO POPUP" link of any of these posts. I guess the popup does not load content according to individual post IDs. What is the mistake in the loop ?
Note : I am using basic java-script for the popup and it works pretty well. I do not see the need of providing its css here. Anyways, if needed will provide it promptly.
It's happening because you are creating a popup for each member, but they all have the same id. That is incorrect syntax and as such JavaScript will not behave as you expect it to. (If you want the ID to recur for all for styling or other scripts, use a class).
Try this:
<?php get_header();?>
<h1><?php echo post_type_archive_title(); ?></h1>
<?php if(have_posts()) : $i = 0; while(have_posts()) : the_post();?>
<?php if(has_post_thumbnail()) { .......... }?>
<?php echo get_post_meta(............);?>
CLICK TO POPUP
<div id="light-<?php echo $i;?>" class="white_content">
<div class="close-button">CLOSE</div>
<?php echo get_post_meta($post->ID, "account_number", true);?> </div>
<div id="fade" class="black_overlay"></div>
<?php $i++; ?>
<?php endwhile; endif; ?>
This will give each popup box a unique ID and the relevant member button will be only targeting said popup

HTML,PHP. Change text in textarea cause of checked(change) radio button

Hello I want change text in textarea on click(change) radio button. I have own database clanok(article) where attributes are nadpis(title) and text. Thanks.
$result = mysqli_query($con,"SELECT * FROM clanok ORDER BY nadpis");
while($row = mysqli_fetch_array($result))
{
?>
<input type="radio" name="nadpis" value="<?php echo $row['nadpis']; ?> ">
<?php
echo $row['nadpis'];
echo "<br>";
}
?>
<textarea name="text" cols="30" rows="5" >
<?php
echo $row['text'];
?>
</textarea>
<br>
<input type="submit" value="Odoslať článok">
First of all, after the page is finished loading, you cannot fetch new stuff from the database and show it on your page (unless you use ajax), so this means that ALL of your rows of text should be loaded and stored somewhere beforehand.
Or, you can use ajax to fetch some new text from the database each time. Both of these solutions would give 2 different types of strain upon your resources.
I'll give you the non-ajax solution, but if you want to hear the ajax one, tell me, and I'll add it here as well. If you want a piece of your website to change upon a click, you can to use javascript to accomplish this. There is also a CSS-only solution based on the current state (selected or not selected) of the radio buttons, but this javascript was easier to write for me. ... so here you go. Solution without ajax, with javascript.
<?php
$radio_button_div_text = ""; //makes a variable to store all the text to be displayed in section 1
$textarea_div_text = ""; //makes a variable to store all the text to be displayed in section 1
$list_of_all_ids_for_js_function = ""; //makes a variable to store something that will later be part of the javascript function
$result = mysqli_query($con,"SELECT * FROM clanok ORDER BY nadpis");
while($row = mysqli_fetch_array($result)) { //while there are rows to get...
//put the different buttons and textareas into two separate variables
$radio_button_div_text += 'input type="radio" name="nadpis" value="'.$row['nadpis'].'" onclick="show_only_one_textarea('.$row['nadpis'].')">';
$radio_button_div_text += $row['nadpis'];
$radio_button_div_text += '<br>';
$textarea_div_text += '<textarea id='.$row['nadpis'].' name="text" cols="30" rows="5" style="display:none;">';
$textarea_div_text += $row['text'];
$textarea_div_text += '</textarea>';
$list_of_all_ids_for_js_function += 'document.getElementById(\''.$row['nadpis'].'\').style.display="none";' }
//now, after you got all the info sorted, show the two areas!
echo $radio_button_div_text;
echo '<br><br>';
echo $textarea_div_text;
?>
<!--now, what you need, is some javascript to make some textareas visible when you click on the corresponding radio button -->
<script>
function show_only_one_textarea(area_id) {
<?php echo $list_of_all_ids_for_js_function; ?>
document.getElementById(area_id).style.display="block"; }
</script>
<!--now, everything will display properly and the javascript will work. here is your submit button -->
<br>
<input type="submit" value="Odoslať článok">
I'm sorry, I didn't test this code out on my own website ... it probably has a nice handful of errors with the ' " quotes. But if you read through it carefully, you will understand the idea of what is trying to be done there. Do you know anything much about javascript? Feel free to ask me more, if you need clarification!
Good luck.

Updating session variable using onclick in php

I am trying to update the $_SESSION['state'] whenever the user clicks on the anchor tag by firing the onclick event. The variable $state_names_array as all the names of the states of a specific country. But problem is that no matter whichever of the anchor tag I click on, the $_SESSION['state'] is always getting updated by the last element of the $state_names_array.
<?php
foreach($state_names_array as $value){
$temp = '<?php $_SESSION["state"]=$value;?>';
?>
<?php echo $value ?><br>
<?php
}
?>
I will not code whole code, I will just show you an example, how to do it:
<?php
foreach ($state_names_array as $value) {
echo ''.$value.'<br>';
}
?>
Then you will have javascript function change_value:
here you will send ajax call to some PHP file, where you will process $_SESSION["state"]=$value;
Also you didnt say, what you want after anchor is clicked, because you will be able to access new $_SESSION["state"] only after refreshing your site...
Also maybe you just want to redirect to index.php, after clicking on some anchor, and that will be enough for you, then just use value as $_GET parameter, f.e.:
<?php
foreach ($state_names_array as $value) {
echo ''.$value.'<br>';
}
?>
and add to you index.php file this lines:
if (isset($_GET['new_value'])) {
$_SESSION["state"] = $_GET['new_value'];
}

Categories

Resources