Below is the javascript part and load more button which I am using to load more posts from database it works fine I want to show a 'no more posts' message when all posts have been loaded but do not know how to do that exactly. Hope you guys can help.
<script>
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'mload_more.php',
data:'id='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.posts').append(html);
}
});
});
});
</script>
<div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
<span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">
Show more
</span>
<span class="loding" style="display: none;">
<span class="loding_txt">Loading...</span>
</span>
</div>
Within mload_more.php file check the number of returned rows greater than zero. It would be as following code.
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
//display data
}
} else {
echo "No more posts to load";
}
Gayan just gave me a start and rest was not much difficult.
<?php
if ($query->rowCount() > 0) {
while($row = $result->fetch_assoc()) {
}
}
else {
echo $er = "No more posts to load";
}
?>
<script type="text/javascript">
var er = "<?php echo $er; ?>";
if(er!=''){
$("er").show();
$('.show_more').hide();
}
</script>
Related
i m trying to send a value from one page to another by using java script, where the user is redirected to the other php page oncick,
the problem i m having is sending a value to the other page
the code on 1st page is
<html>
<body>
<div id="management" onclick="myFunction()" class="col-md-2">
<p>Management</p>
</div>
<script>
function myFunction() {
var search="Assam";
location.href = "search.php";
}
</script>
</body>
</html>
and i want the value of search to be forwarded to the second search.php page
$search=how do i get the variable here;
$query = $pdo->prepare("select * from collegetable where name LIKE '%$search%' OR courses LIKE '%$search%' OR address LIKE '%$search%' OR affiliation LIKE '%$search%' LIMIT 0 , 10");
$query->bindValue(1, "%$search%", PDO::PARAM_STR);
$query->execute();
// Display search result
if (!$query->rowCount() == 0) {
echo "Search found :<br/>";
echo "<table style=\"font-family:arial;color:#333333;\">";
echo "<tr><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">College Names</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Courses</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Price</td></tr>";
while ($results = $query->fetch()) {
echo "<tr><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['name'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['courses'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['fees'];
echo "</td></tr>";
}
echo "</table>";
} else {
echo 'Nothing found';
}
use query string for forward to second page
<html>
<body>
<div id="management" onclick="myFunction()" class="col-md-2">
<p>Management</p>
</div>
<script>
function myFunction() {
var search="Assam";
location.href = "search.php?q=" + search;
}
</script>
</body>
</html>
and in second page get q from URL
$search= $_GET['q'];
$query = $pdo->prepare("select * from collegetable where name LIKE '%$search%' OR courses LIKE '%$search%' OR address LIKE '%$search%' OR affiliation LIKE '%$search%' LIMIT 0 , 10");
$query->bindValue(1, "%$search%", PDO::PARAM_STR);
$query->execute();
// Display search result
if (!$query->rowCount() == 0) {
echo "Search found :<br/>";
echo "<table style=\"font-family:arial;color:#333333;\">";
echo "<tr><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">College Names</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Courses</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Price</td></tr>";
while ($results = $query->fetch()) {
echo "<tr><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['name'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['courses'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['fees'];
echo "</td></tr>";
}
echo "</table>";
} else {
echo 'Nothing found';
}
U may use get parameters of url, for example:
<script>
function myFunction() {
var search="Assam";
location.href = "search.php?q=" + search;
}
</script>
To get parameters on search.php use $_GET method http://php.net/manual/en/reserved.variables.get.php
$search = $_GET['q'];
Ajax is the solution for you.
Plain ajax looks like this:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
I would recommend using the jquery ajax, because it's way more simple and beginner friendly.
An example for your use case would look like this:
<script>
var search="Assam";
$.ajax({
method: "GET",
url: "some.php?search=" + urlencode(search)
}) .done(function( response ) {
$("#field-for-response").html(response);
});
</script>
In PhP you can read the value over $_GET["search"]. If you just want to locate the client just on the php page, you should have a look on this, but Ajax gives you the advantage of no need to reload the page and this is what makes the user experience much smoother.
Try this
Javascript
$scope.submitForm = function (form, e) {
if(form.$valid){
// e.preventDefault(e);
$http({
method : "POST",
url : "search.php",
data: {
"givenName":"james",
"displayName":"Cameroon"
},
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, X-Requested-With",
"Content-Type": "application/json"
}}).then(function(response) {
console.log(response);
}, function(response) {
console.log("Error"+response);
});
}
}
HTML
<form id="attributeVerification" name="vm.attributeVerification" onsubmit="submitForm(vm.attributeVerification)" novalidate>
<div class="attr" id="attributeList">
<ul>
<li>
<div class="attrEntry">
<label for="givenName">First name</label>
<div class="helpText" role="alert" aria-live="polite" tabindex="1">This information is required.</div>
<input id="givenName" name="givenName" class="textInput" type="text" placeholder="First name" title="Your given name (also known as first name)." required maxlength="15" ng-model="userInfo.givenName" aria-required="true">
</div>
</li>
<li>
<div class="attrEntry">
<label for="displayName">Last name</label>
<div class="helpText" role="alert" aria-live="polite" tabindex="1">This information is required.</div>
<input id="displayName" name="displayName" class="textInput" type="text" placeholder="Last name" title="Your display name." required maxlength="25" ng-model="userInfo.displayName" aria-required="true">
</div>
</li>
</ul>
</div>
<div class="buttons">
<button id="continue" aria-label="Create" type="submit">Continue</button>
</div>
</form>
change html to :
<html>
<body>
<div id="management" onclick="myFunction()" class="col-md-2">
<p>Management</p>
</div>
<script>
function myFunction() {
var search="Assam";
location.href = "search.php?search="+search;
}
</script>
</body>
</html>
php to :
$search = $_GET['search'];
$query = $pdo->prepare("select * from collegetable where name LIKE '%$search%' OR courses LIKE '%$search%' OR address LIKE '%$search%' OR affiliation LIKE '%$search%' LIMIT 0 , 10");
$query->bindValue(1, "%$search%", PDO::PARAM_STR);
$query->execute();
// Display search result
if (!$query->rowCount() == 0) {
echo "Search found :<br/>";
echo "<table style=\"font-family:arial;color:#333333;\">";
echo "<tr><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">College Names</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Courses</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Price</td></tr>";
while ($results = $query->fetch()) {
echo "<tr><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['name'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['courses'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['fees'];
echo "</td></tr>";
}
echo "</table>";
} else {
echo 'Nothing found';
}
So I've made a database where people can upload pictures to. The pictures are linked to a place which is linked to a category.
I'm trying to create a gallery page that displays all the images, and then the categories available. When you click on a category it's meant to show all the pictures for that category.
I've got my categories in my database as well, which I'm using php to echo out:
<?php
include('includes/connectdb.php');
/* Selects id and name from the table 'category' */
$query = "SELECT id, name FROM category";
$result_category = mysqli_query($dbc,$query);
?>
<h1>Category</h1>
<!-- iterate through the WHILE LOOP -->
<?php while($row = mysqli_fetch_array($result_category)): ?>
<!-- Echo out values {id} and {name} -->
<button name="category[]" value=" <?php echo $row['id']; ?> "><?php echo $row['name'] . '<br />'; ?></button>
<?php endwhile; ?>
When a button is clicked I need it to run this php:
<?php
if(isset($_POST['category[]'])){
displayimage();
function displayimage()
{
$con=mysql_connect("localhost","root","");
mysql_select_db("ssdb",$con);
$qry="SELECT pictures.name, pictures.image, pictures.place_id
FROM pictures
INNER JOIN sted
ON pictures.place_id = sted.id
INNER JOIN placecategory
ON sted.id = placecategory.place_id
INNER JOIN category
ON placecategory.category_id = category.id
WHERE placecategory.category_id = $row['id']";
$result=mysql_query($qry,$con);
while($row = mysql_fetch_array($result))
{
//var_dump($row);
echo '<img height="300" width="300" src="data:image;base64,'.$row["image"].' "> ';
echo '<p style="display:inline-block">'.$row["name"].' </p> ';
}
mysql_close($con);
}
}
?>
I found out that it should be possible with ajax, so I added the following to my ajax.php file:
<?php
if (isset($_POST['action'])) {
switch ($_POST['action']) {
case 'category':
category();
break;
}
}
function category() {
displayimage();
function displayimage()
{
$con=mysql_connect("localhost","root","");
mysql_select_db("ssdb",$con);
$qry="SELECT pictures.name, pictures.image, pictures.place_id
FROM pictures
INNER JOIN sted
ON pictures.place_id = sted.id
INNER JOIN placecategory
ON sted.id = placecategory.place_id
INNER JOIN category
ON placecategory.category_id = category.id
WHERE placecategory.category_id = $row['id']";
$result=mysql_query($qry,$con);
while($row = mysql_fetch_array($result))
{
//var_dump($row);
echo '<img height="300" width="300" src="data:image;base64,'.$row["image"].' "> ';
echo '<p style="display:inline-block">'.$row["name"].' </p> ';
}
mysql_close($con);
}
exit;
}
?>
And this to my gallery.php file where I'm displaying the pictures and categories.
<script>
$(document).ready(function(){
$('.button').click(function(){
var clickBtnValue = $(this).val();
var ajaxurl = 'ajax.php',
data = {'action': clickBtnValue};
$.post(ajaxurl, data, function (response) {
// Response div goes here.
alert("action performed successfully");
});
});
});
</script>
And lastly I changed my button to be
<?php while($row = mysqli_fetch_array($result_category)): ?>
<!-- Echo out values {id} and {name} -->
<input type="submit" class="button" name="category[]" value=" <?php echo $row['id']; ?> "><?php echo $row['name'] . '<br />'; ?>
<?php endwhile; ?>
I'm linking to the jquery library and I've tested the SQL statement that I need to run, and it works when I specify what the placecategory.category_id is.
I have the following script:
index.php
<?php include("db.php"); ?>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
</head>
<body>
<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<?php $sql = "SELECT * FROM items ORDER BY ID DESC";
$items= mysql_query($sql);
while ($item= mysql_fetch_array($items)){
$id = $item[ID]; ?>
<tr style="border: solid 4px red;">
<td>
<div class="<?= $id ?>">
<button class="my-btn" type="button" value="<?= $id ?>">BUTTON <?= $id ?></button>
</div>
</td>
</tr>
<?php } ?>
</table>
<div id="flash" align="left" ></div>
<ol id="update" class="timeline"></ol>
<div id="old_updates"></div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
$(function() {
$(".my-btn").click(function() {
var dataString = $(this).val();
$("#flash").show().fadeIn(200).html('');
$.ajax({
type : "POST",
url : "update_data.php",
data : {'not' : dataString},
cache : false,
success : function(html){
$("#update").prepend(html).find("li:first").slideDown("slow");
$('#content').val('');
$("#flash").hide();
}
});
});
$('.delete_update').live("click",function() {
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
if(confirm("Sure you want to delete this update? There is NO undo!")){
$.ajax({
type : "POST",
url : "delete_data.php",
data : dataString,
cache : false,
success : function(html){
$(".bar"+ID).slideUp('slow', function() {$(this).remove();});
}
});
}
return false;
});
});
update_data.php
<?php
include('db.php');
if(isSet($_POST['not'])) {
$not = $_POST['not'];
mysql_query("insert into items (name) values ('$not')");
$sql_in = mysql_query("SELECT wave, ID FROM actions order by ID desc");
$r = mysql_fetch_array($sql_in);
$msg = $r['name'];
$id = $r['ID'];
}
?>
<li class="bar<?php echo $msg_id; ?>">
<div align="left">
<span style=" padding:10px"><?php echo $msg; ?> </span>
<span class="delete_button">
X
</span>
</div>
</li>
delete_data.php
<?php
include("db.php");
if($_POST['msg_id']) {
$id = $_POST['msg_id'];
$id = mysql_escape_String($id);
$sql = "delete from items where ID='$id'";
mysql_query( $sql);
}
?>
I posted the whle code to be more specific and easy to understand.
The problem appear only with the delete function.
When i hit the link to delete an item, this item don't disappear instantly but is removed from sql database.
To see the item deleted i need to refresh the page and i don't want that.
I think the problem is with the second function of script.js but i can't figured it out what exactly is.
i am a beginner in jquery... sorry
I need to create dynamically a table depending of the number of rows i choose by a
index.php
<div class="input-append" >
<span class="add-on">Nombre de TGBT</span>
<?
$selected = '';
echo '<select name="nb_tgbt" id="nb_tgbt" size="1">',"\n";
for($i=0; $i<=10; $i++)
{
$selected = 'selected="selected"';
echo "\t",'<option value="'.$i.'"'.$selected.'>'.$i.'</option>',"\n";
$selected='';
}
echo '</select>',"\n";
?>
</div>
i send the value by POST method to a page "getvalue.php"
code of the getvalue.php is:
<?php
$tabletgbt='';
$tabletgbt=$tabletgbt.'<form>
<fieldset>
<div class="input-append">';
for($i=1; $i<=$_POST['id']; $i++)
{
$tabletgbt=$tabletgbt.'<div><span class="add-on">Nom TGBT'.$i.'</span>
<input id="tgbtname'.$i.'" type="text" placeholder="Nom du TGBT '.$i.'"/>
</div>';
}
$tabletgbt=$tabletgbt.'
</div>
</fieldset>
</form>';
return $tabletgbt;
$i='';
?>
How can i show the return data (html code) on my index.php dynamically on change please
Regards
this is the ajax code i used:
Hello, this is the ajax code i used:
<script>
$(document).ready(function(){
$('#nb_tgbt').change(function(){
var nbretgbt_id = $('#nb_tgbt').val();
if(nbretgbt_id != 0) {
$.ajax({ type:'post', url:'getvalue.php', data:{id:nbretgbt_id}, cache:false, success: function(returndata){
$('#tablename_tgbt').html(returndata);
}
});
}
})
})
</script>
So I am doing a shopping cart site, using CodeIgniter on backend
Here is the catch, I loop the product list, with 'add to cart' button, inside a form tag.
So let's say, I have 5 products to display, there will be 5 form tag as:
<?php foreach ($products as $vid):?>
<form id='cart' method='post' action='<?php echo base_url();?>cart/add'>
<input type='hidden' id='vid' name='vid' value='<?php echo $vid['id'];?>'/>
<div class="video_box">
<div class="video">
<a href="#<?php echo $vid['id'];?>" name='modal'>
<img src="<?php echo base_url(); ?>assets/images/<?php echo $vid['video_thumbnail'];?>" alt="<?php echo $vid['title'];?>" border="0" height='150' width='100' />
</a>
</div>
<div class="video_checkbox">
<?php if($this->session->userdata('nric')===FALSE ) {
echo "Please Login to Rent/Purchase"; } else { ?>
<input type='image' id='btn-add' src="<?php echo base_url(); ?>assets/images/rent_btn.png" alt="Rent" border="0" />
<?php } ?>
</div>
</form>
<?php endforeach;?>
And my javascript/jquery script:
<script type="text/javascript">
$(document).ready(function() {
$("#btn-add").click(function() {
var action = $("#cart").attr('action');
var form_data = {
vid : $("#vid").val(),
is_ajax : 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'exists')
{ alert("This item is in your cart already! You can only add 1 same item once");
}
if(response == 'newses')
{ alert("This item has been added succesfully!");
document.location.reload(true);
}
if(response == 'new_added')
{
alert("This item has been added succesfully1!");
document.location.reload(true);
}
}
});
return false;
});
});
</script>
As my controller (in form action) localhost/site/cart/add:
public function add() {
$vid=$_POST['vid'];
if($this->session->userdata('shoppingCart')===FALSE)
{
$shoppingCart = array (
$vid => 1
);
$this->session->set_userdata('shoppingCart',$shoppingCart);
echo 'newses';
} else {
$tmp = $this->session->userdata('shoppingCart');
if(array_key_exists($vid, $tmp)) {
//only allow user to add qty:1 to the same product
echo 'exists';
} else {
$tmp[$vid]= 1;
$this->session->set_userdata('shoppingCart',$tmp);
echo 'new_added';
}
}
}
So the problem now, I can add the product to my shopping cart with no problem, all the stuff inside cart/add controller runs fine, the output is as expected.
But I need to alert the customer whether the product has been added or failed (as shown in my jquery code).
Problem is, the script will run fine only for the 1st created.
Means, if there is 5 products, it will loop and create 5 form-tag right, only the 1st form-tag will run the script successfully (after the button is clicked). The 2nd-5th form will redirect to other blank page, echoing the result (e.g "newses", "new_added", "exists"), not alerting the user as stated in the script (but the shopping cart function works properly).
What did I do wrong?
Try this
<?php foreach ($products as $vid):?>
<form id='cart' method='post' action='<?php echo base_url();?>cart/add'>
<input type='hidden' class='vid' name='vid' value='<?php echo $vid['id'];?>'/>
<div class="video_box">
<div class="video">
<a href="#<?php echo $vid['id'];?>" name='modal'>
<img src="<?php echo base_url(); ?>assets/images/<?php echo $vid['video_thumbnail'];?>" alt="<?php echo $vid['title'];?>" border="0" height='150' width='100' />
</a>
</div>
<div class="video_checkbox">
<?php if($this->session->userdata('nric')===FALSE ) {
echo "Please Login to Rent/Purchase"; } else { ?>
<input type='image' class='btn-add' src="<?php echo base_url(); ?>assets/images/rent_btn.png" alt="Rent" border="0" />
<?php } ?>
</div>
</form>
<?php endforeach;?>
Jquery
$(document).ready(function() {
$(".btn-add").click(function() {
var $this = $(this);
var $form = $this.parents('form');
var action = $form.attr('action');
var vid = $form.find('input.vid').val();
var form_data = {
vid : vid,
is_ajax : 1
};
$.ajax({
type : "POST",
url : action,
data : form_data,
success : function(response) {
if (response == 'exists') {
alert("This item is in your cart already! You can only add 1 same item once");
}
if (response == 'newses') {
alert("This item has been added succesfully!");
document.location.reload(true);
}
if (response == 'new_added') {
alert("This item has been added succesfully1!");
document.location.reload(true);
}
}
});
return false;
});
});