keeping what i searched in my page - php

i'm working on a a website and i've made a php file that will show my search results, (i'm working on request appointment) so when i click that it works but the only problem is my webpage refresh and it shows a blank page until i click on home button to redirect
// my research loop...
if(isset($_GET['submit-search'])) {
$search = mysqli_real_escape_string($conn, $_GET['search']);
$sql = "SELECT * FROM doctor WHERE DoctorFullName LIKE '%$search%' OR DoctorLocation LIKE '%$search%' OR DoctorSpeciality LIKE '%$search%'";
$result = mysqli_query($conn, $sql);
$queryResult = mysqli_num_rows($result);
if ($queryResult > 0) {
?>
<div class="container overflow">
<div class="container overflow">
<span class="mentor">
<h2 class="display Text-mentor">
<span class="mentor-admin">If the result shown bellow not seems like what you need then ;</span>
<span class="mentor-admin-quote">select the speciality of the doctor you need and your insurance, and <span class="turquoise">search</span> again</span>
</h2>
</span>
</div>
<div class="container overflow">
<p class="p-about-results"><?php echo "There is ".$queryResult." result matching your search"?></p>
<p class="p-about-results">we hope that these results are the ones you are looking for :</p>
</div>
<?php
while ($row = mysqli_fetch_assoc($result)) :
?>
// my calendar for so i can submit appointment
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<form>
<input type="text" name="ap-time" id="t1" class="modal-input-text" placeholder="Choose a date">
<div id="sub" style="top: 40px;left: 5px;z-index:1;text-align: center;"></div>
<input type=submit name="ap_validation" value="request appointment" class="input-requestdate">
</form>
</div>
</div>
//Ajax code that i've been working on
<script type="text/javascript">
$(document).ready(function(){
//alert("jquery is working");
$(".input-requestdate").click(function(){
var name = $(".modal-input-text").val();
$.ajax({
url: "Appointment.php",
type: "POST",
async: false,
data: {
"done": 1,
"message": name,
},
success: function(data){
alert("requested");
window.location = window.location.href
}
})
});
});
</script>`
thanks for helping :)

Related

Back to the main content of a div box from a Jquery .load

I have a chatting system project php with a nav and has a child div called inbox where inbox has a children div.message and div.message__requests:
<div class="inbox">
<div class="messages">
<header>
<nav>
<a id="messages"><b>Messages</b></a><a id="messageRequests"><b>Message Requests</b></a>
</nav>
<hr>
<form action="includes/chatsearch-inc.php" method="POST">
<input type="text" name="search" placeholder="Search a user or applicant\'s name">
<button name="submit"><i class="fa fa-search"></i></button>
</form>
</header>
<section>';
$sql = "SELECT * FROM users WHERE NOT usersId ='".$_SESSION['userid']."';";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
echo '<div class="user__container">
<input type="hidden" data-userid="'.$row['usersId'].'">
<img src="profilepic/'.$row['usersProfilePic'].'">
<div class="user">
<p><b>'.$row['usersName'].'</b></p>
<p class="message">You: dssasdas</p>
</div>
</div>
<hr>';
}
echo '</section>
</div>
<div class="message__requests">
<nav>
<a id="messages"><b>Messages</b></a><a id="messageRequests"><b>Message Requests</b></a>
</nav>
<section>
<div class="user__container">
<img src="profilepic/'.$profilepic.'">
<div class="user">
<p><b>'.$_SESSION['username'].'</b></p>
<p class="message">asdasdsd</p>
</div>
</div>
<hr>
<div class="user__container">
<img src="profilepic/'.$profilepic.'">
<div class="user">
<p><b>'.$_SESSION['username'].'</b></p>
<p class="message">asdasdsd</p>
</div>
</div>
<hr>
</section>
</div>
</div>
Where div.messages shows the users inbox like the home screen of facebook messenger app.
If I click the said nav, the inbox will pop in the middle of the screen and the div.message is the default content.
Now when I click a div.user__container inside my div.messages, I can load the user chat box, like when you click a user in facebook messenger inside the div.messages, replacing all the content of div.messages with what I have in my other php file (simulating a real time chat box):
$sql = "SELECT * FROM messages AS m LEFT JOIN users AS u ON m.outgoingUsersId = u.usersId WHERE (incomingUsersId = '$incoming' AND outgoingUsersId = '$outgoing') OR (incomingUsersId = '$outgoing' AND outgoingUsersId = '$incoming') ORDER BY msgId DESC;";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
if ($row['outgoingUsersId'] == $outgoing) {
$output .= '<div class="chat outgoing">
<div class="message">
<p>'.$row['msgContent'].'</p>
</div>
</div>';
}
else {
$output .= '<div class="chat incoming">
<img src="profilepic/'.$row['usersProfilePic'].'">
<div class="message">
<p>'.$row['msgContent'].'</p>
</div>
</div>';
}
}
echo $output;
}
And I can achieve this all by my jquery call:
$('section .user__container').click(function() {
var userid = $(this).children('input').data('userid');
$('.inbox .messages').load('includes/ajax-load/chatpage-aload.php',
{
usersid : userid
}, function() {
$('.user__inbox header i').click(function() {
// I want to load back to div.messages content
});
var sender = $('#chatForm #chatSender').val();
var receiver = $('#chatForm #chatReceiver').val();
setInterval(() => {
$.post('includes/ajax-func/getchat-afunc.php', {
outgoingUsersId : sender,
incomingUsersId : receiver
}, function (response) {
$('.user__inbox section').html(response);
});
}, 500
);
$('#chatForm').submit(function(e) {
e.preventDefault();
var message = $('#chatForm input[type="text"]').val();
$.post('includes/ajax-func/insertchat-afunc.php', {
outgoingUsersId : sender,
incomingUsersId : receiver,
message : message
}, function (data) {
$('#chatForm input[type="text"]').val("");
});
});
});
});
My question is, how can I go back to the main content of div.messages (like how users in messenger app can go bck to the home screen when the click the back button beside the users info in their header) without reloading the whole webpage, when I click the:
$('.user__inbox header i').click(function() {
// I want to load back to div.messages content
});
Or any recommendations to my code? Thanks

trying to load php file with ajax

i am new to ajax i am trying to build a website for movies so i need ajax to change the servers for the video but i can not do it how much i tried the div that i want to show is not being shown at all here is my codes
HTML
<?php
$get = $data->show(" SELECT * FROM servers ");
foreach ($get as $row) {
$id=$row['server_id'];
$name=$row['server_name'];
$link=$row['link'];
$movie=$row['film_name'];
?>
<button type="button" id="btn" class="btn btn-warning"><?php echo "$name"; ?></button>
<input type="hidden" id="serverid" value="<?php echo $id ?>">
<?php } ?>
<div id="show">
</div>
AJAX
<script type="text/javascript">
$(document).ready(function (){
$('#btn').click(function (){
var serverid = $('#serverid').val()
$.ajax({
url:"../../control/operation/index/view_movie.php",
method:"POST",
data:{serverid:serverid},
success:function(data)
{
$("#show").html(data);
}
});
});
});
</script>
view_movie.php
if (isset($_POST['serverid'])) {
$id=$_POST['serverid'];
$getuser = $data->getdata(" SELECT * FROM servers WHERE server_id='$id' ");
$link=$getuser['link'];
} ?>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="<?php echo $link ?>" allowfullscreen></iframe>
</div>
</div>
nothing is shown on the div that called show

modals showing blank after ajax call

I am developing a page in php that has multiple dynamic modals for displaying pdf files in the page itself with respective title and author names. All the data comes from a database designed in MySQL. The trigger buttons are also meant to be dynamic. I have tried the following code. The problem is I am getting the modals blank. I am able to print the data in fetch-reader.php page itself. I think I am doing something wrong in AJAX or modal part. Please guide me through it.
<?php $sqlGal = "select * from articles where year = '2019'";
$queryGal = $con->query($sqlGal);
if ($queryGal->num_rows > 0) {
while ($row = $queryGal->fetch_array()) { ?>
<div class="col-md-3 gallery-grid">
<h3 style="height: 200px; vertical-align: bottom; margin: 0; display: table-cell;"><?php echo($row['title']) ?></h3>
by<h4><?php echo($row['name']) ?></h4>
<i class="fa fas fa-book-open"></i> Read
</div>
<?php }
}
?><div class="clearfix"></div>
<div class="modal fade" id="myReader" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="articleName"></h3>
<h4 id="name"></h4>
<h6 id="position"></h6>
<h6 id="address"></h6>
</div>
<div class="modal-body">
<object data="" id="reader" width="100%" height="450px"></object></div>
</div>
</div>
</div>
</div>
in <script> part
$(document).ready(function() {
$('#myReader').on('show.bs.modal', function(e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type: 'get',
url: 'include/fetch_reader.php',
data: 'rowid='+rowid,
dataType: 'json',
success : function(response) {
$('#articleName').text(response.title);
$('#name').text(response.name);
$('#position').text(response.position);
$('#address').text(response.address);
var add = "uploads/articles/" + response.yearSl + ".pdf";
$('#reader').prop('data', add);
}
});
});
});
in fetch-reader.php
<?php
require_once('connect.php');
if ($_GET['rowid']) {
$id = $_GET['rowid'];
$sql = "SELECT `title`, `name`, `position`, `address`, `yearSl` FROM articles WHERE `id` = '".$id."'";
$result = $con->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_array();
}
$connect->close();
header('Content-Type: application/json');
echo json_encode($row);
}
Please guide me any other way which can serve my purpose, but I don't want to use any third-party tools for the purpose.
I think you are sending the wrong data in ajax. Try this into your "$ .ajax" call:
data: { 'rowid': rowid }
And try checking into browse console if the request shows any error. Into your ajax call you check only for success return, not for fail.

Notification system jQuery, PHP, and MySQL

I'm trying to develop a notification system using jQuery and PHP. So I've created a new table in the database where I'm going to store all the new notifications. Using jQuery I've been able to show an alert (bubble icon) showing the number of new lines added to the database, but I'm now stuck because I don't really know how to update the database (fire update.php file) when I click the icon (.icon-bell) which does activate a drop-down menu.
This is the jQuery script I've added to the index page
<script type="text/javascript">
$(document).ready(function(){
$("#datacount").load("select.php");
setInterval(function(){
$("#datacount").load('select.php')
}, 20000);
});
</script>
This is the HTML code in the index page
<li class="dropdown dropdown-extended dropdown-notification dropdown-dark" id="header_notification_bar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-bell">
</i>
<span class="badge badge-success"><div id="datacount">
</div>
</span>
</a>
<ul class="dropdown-menu" >
<li class="external">
<h3>
<span class="bold">12 pending</span>
notifications
</h3>
view all
</li>
<li>
<ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
<li>
<a href="javascript:;">
<span class="time">just now</span>
<span class="details">
<span class="label label-sm label-icon label-success">
<i class="fa fa-plus">
</i>
</span> New user registered. </span>
</a>
</li>
</ul>
</li>
</ul>
</li>
This is the select.php file
<?php
$sql = "SELECT * from tbl_noti where status = 'unread'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$count = $result->num_rows;
echo $count;
$conn->close();
?>
This is the update.php file
<?php
$sql = "update tbl_noti set status = 'read'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$count = $result->num_rows;
echo $count;
$conn->close();
?>
You can use PHP + Ajax to accomplish this task. I have created a simple notification system and you can easily clone it from GitHub(https://github.com/shahroznawaz/php-notifications).
let's create an index.php file and put the following code. it will create a form. all the data will get by ajax call and updated in the view.
<!DOCTYPE html>
<html>
<head>
 <title>Notification using PHP Ajax Bootstrap</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 <br /><br />
 <div class="container">
  <nav class="navbar navbar-inverse">
   <div class="container-fluid">
    <div class="navbar-header">
     <a class="navbar-brand" href="#">PHP Notification Tutorial</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
     <li class="dropdown">
      <span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-bell" style="font-size:18px;"></span>
      <ul class="dropdown-menu"></ul>
     </li>
    </ul>
   </div>
  </nav>
  <br />
  <form method="post" id="comment_form">
   <div class="form-group">
    <label>Enter Subject</label>
    <input type="text" name="subject" id="subject" class="form-control">
   </div>
   <div class="form-group">
    <label>Enter Comment</label>
    <textarea name="comment" id="comment" class="form-control" rows="5"></textarea>
   </div>
   <div class="form-group">
    <input type="submit" name="post" id="post" class="btn btn-info" value="Post" />
   </div>
  </form>
 </div>
</body>
</html>
Now create ajax calls like this:
<script>
$(document).ready(function(){
// updating the view with notifications using ajax
function load_unseen_notification(view = '')
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{view:view},
dataType:"json",
success:function(data)
{
$('.dropdown-menu').html(data.notification);
if(data.unseen_notification > 0)
{
$('.count').html(data.unseen_notification);
}
}
});
}
load_unseen_notification();
// submit form and get new records
$('#comment_form').on('submit', function(event){
event.preventDefault();
if($('#subject').val() != '' && $('#comment').val() != '')
{
var form_data = $(this).serialize();
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#comment_form')[0].reset();
load_unseen_notification();
}
});
}
else
{
alert("Both Fields are Required");
}
});
// load new notifications
$(document).on('click', '.dropdown-toggle', function(){
$('.count').html('');
load_unseen_notification('yes');
});
setInterval(function(){
load_unseen_notification();;
}, 5000);
});
</script>
You also need to fetch all the records from database and update the status for the notification viewd. create fetch.php file and add the following code:
<?php
include('connect.php');
if(isset($_POST['view'])){
// $con = mysqli_connect("localhost", "root", "", "notif");
if($_POST["view"] != '')
{
   $update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status=0";
   mysqli_query($con, $update_query);
}
$query = "SELECT * FROM comments ORDER BY comment_id DESC LIMIT 5";
$result = mysqli_query($con, $query);
$output = '';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
  $output .= '
  <li>
  <a href="#">
  <strong>'.$row["comment_subject"].'</strong><br />
  <small><em>'.$row["comment_text"].'</em></small>
  </a>
  </li>
  ';
}
}
else{
    $output .= '<li>No Noti Found</li>';
}
$status_query = "SELECT * FROM comments WHERE comment_status=0";
$result_query = mysqli_query($con, $status_query);
$count = mysqli_num_rows($result_query);
$data = array(
   'notification' => $output,
   'unseen_notification'  => $count
);
echo json_encode($data);
}
?>
Now you will be able to see the notification in navigation bar like this:
when you click the dropdown the status of views notification will update and count will disappear.
To execute PHP asynchronously, you need to use AJAX. jQuery has a few functions for this purpose.
$.ajax: Fully customizable asynchronous request, including error handling, headers, etc.
$.post: AJAX restricted to POST.
$.get: AJAX restricted to GET.
Both $.post and $.get can be accomplished with $.ajax, however they are, in most situations, easier to work with. You most likely will only need $.get in this case, since no additional data is being passed in the request.
Example code:
$.get(
"update.php",
function(result) {
console.log(result)
}
);
Here, result is the data outputted from update.php.
Use ajax to execute the PHP queries so they can execute in real time without page reload.

Change input type number value using jquery

All the other attribute changes seem to work fine inside the modal. The rating button inside the modal doesn't load its value on loading. But the inspect element seems to display the proper rating value.
I am new to php and jquery. Kindly excuse me from silly programming methodologies implemented in the above mentioned code.
Any help would be deeply appreciated.
HTML :
<div class="item" style="width: 400px; height: 230px">
<!-- Link trigger modal -->
<a data-img-url="upload/<?php echo $row['image_name'] ?>" data-toggle=
"modal" href="#myModal" id="<?php echo $row['image_id'] ?>" onclick=
"modalload(this.id, '<?php echo $row['image_title'] ?>' , '<?php echo $row['image_description'] ?>', <?php echo $TAVG ?> );"><img class="img-responsive carousal_scale"
src="upload/%3C?php%20echo%20$row['image_name']%20?%3E"></a>
<div class="carousel-caption">
<p><?php echo $row['image_title'] ?></p>
</div>
</div><!-- Modal -->
<div class="modal fade modal-dialog modal-content" id="myModal" tabindex="-1">
<div class="modal-header">
<button class="close" data-dismiss="modal" type=
"button"><span>×</span><span class="sr-only">Close</span></button>
<h2 class="modal-title" id="myModalLabel"></h2>
</div>
<div class="modal-body well">
<img class="img-responsive carousal_scale" src=""> <input class="rating"
data-size="xs" id="" max="5" min="0" onchange="test(this.id, this.value);"
step="0.1" style="alignment-adjust: auto;" type="number" value="">
</div>
<div>
<p style="text-align: center; font-size: 15px;"></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type=
"button">Close</button>
</div>
</div>
JS :
$(document).ready(function() {
$(".rating-kv").rating();
});
function modalload(id, title, description, avg) {
alert(avg);
// alert(description);
$('#myModal img').attr('src', $('#' + id).attr('data-img-url'));
$('#myModal input').attr('value', avg);
$('#myModal input').attr('id', id);
$('#myModal h2').text(title);
$('#myModal p').text(description);
}
function test(id, val) {
var pic_id = id;
var pic_val = val;
$.ajax({
type: 'POST',
url: 'rating.php',
data: {
'pic_id': pic_id,
'pic_val': pic_val
},
}).done(function(data) {
// alert(data);
});
}
"The rating button inside the modal doesn't load its value on loading." You currently have your modalload()function only activate on click of an a tag so your rating isn't going to get it's value/id populated on load, but rather on click.
Try this instead inside your modalload() function,
$('.rating').attr('value', avg);
$('.rating').attr('id', id);
Also, note that there is no jQuery rating() function, and that you have no element with the class rating-kv in your HTML, therefore the below code will do nothing.
$(".rating-kv").rating();
In other words, you have a lot of bad coding practices and incomplete code. You should consider revising what you have and re posting it.

Categories