how to change Download show after upload by jQuery-File-Upload/ - php

I've installed the blueimp jQuery-file-upload
but I had a big problem to modify the view after you finish uploading, I want to do a show all by making the image raised in a specific div
I hope all edits must be in jquery.fileupload-uix.js ,
and in this code exactly :
this.getFileUrl = function (file, handler) {
return file.url;
};
this.getThumbnailUrl = function (file, handler) {
return file.thumbnail;
};
this.buildMultiDownloadRow = function (files, handler) {
var rows = $('<tbody style="display:none;"/>');
$.each(files, function (index, file) {
rows.append(handler.buildDownloadRow(file, handler).show());
});
return rows;
};
this.buildDownloadRow = function (file, handler) {
if ($.isArray(file)) {
return handler.buildMultiDownloadRow(file, handler);
}
var fileName = handler.formatFileName(file.name),
fileUrl = handler.getFileUrl(file, handler),
thumbnailUrl = handler.getThumbnailUrl(file, handler),
downloadRow = handler.downloadTemplate
.clone().removeAttr('id');
downloadRow.attr('data-id', file.id || file.name);
downloadRow.find('.file_name a')
.text(fileName);
downloadRow.find('.file_size')
.text(handler.formatFileSize(file.size));
if (thumbnailUrl) {
downloadRow.find('.file_download_preview').append(
$('<a/>').append($('<img/>').attr('src', thumbnailUrl || null))
);
downloadRow.find('a').attr('target', '_blank');
}
downloadRow.find('a')
.attr('href', fileUrl || null)
.each(handler.enableDragToDesktop);
downloadRow.find('.file_download_delete button')
.button({icons: {primary: 'ui-icon-trash'}, text: false});
return downloadRow;
};
and in HTML :
<div id="file_upload" class="panel">
<form action="upload.php" method="POST" enctype="multipart/form-data">
<div id="buttons">
<div id="file-wrapper" class="title" title="upload images from your computer">
<input type="file" name="file[]" multiple="" accept="image/jpeg,image/gif,image/png,image/bmp" />
</div>
<div class="center">
<input type="button" id="url" class="button-big title" title="upload images from the web" value="" />
</div>
</div>
</form>
<table class="files">
<tr class="file_upload_template" style="display:none;">
<td class="file_upload_preview"></td>
<td class="file_name"></td>
<td class="file_size"></td>
<td class="file_upload_progress"><div></div></td>
<td class="file_upload_start"><button>Start</button></td>
<td class="file_upload_cancel"><button>Cancel</button></td>
</tr>
<tr class="file_download_template" style="display:none;">
<td class="file_name"><a></a></td>
<td class="file_size"></td>
<td class="file_download_delete" colspan="3"><button>Delete</button></td>
</tr>
</table>
<div class="file_upload_overall_progress"><div style="display:none;"></div></div>
<div class="file_upload_buttons">
<button class="button-big file_upload_start">Start All</button>
<button class="file_upload_cancel">Cancel All</button>
</div>
</div>
<br />
<div class="panel">
<div id="shows">
<!-- HERE I Want to repeat the div like -->
<div class='preview'>
<h2>name</h2>
<img srch='img' />
</div>
</div>
</div>
I try and try but there are no code that I believe that it good to show.

Related

How to add form to access page number in instant search?

I used this script (https://www.webslesson.info/2020/02/instant-search-with-pagination-in-php-mysql-jquery-and-ajax.html) and I would like to add a form to directly access a page number.
I tried this but it doesn't work !
<div class="goto-page">
<form action="" method="POST" onsubmit="return pageValidation()">
<input type="submit" class="goto-button" value="Go to page">
<input type="text"
class="enter-page-no" maxlength="4" size="3"
name="goto" min="1"
required >
</form>
</div>
PHP Code modified
if (isset($_POST['goto'])) {
$start = (($_POST['page'] - 1) * $limit);
$page = $_POST['goto'];
}
else
{
if($_POST['page'] > 1)
{
$start = (($_POST['page'] - 1) * $limit);
$page = $_POST['page'];
}
else
{
$start = 0;
}
}
Consider the following example. This expands on the jQuery already in use in the example you linked to.
$(function() {
function load_data(page, query = '') {
$.ajax({
url: "fetch.php",
method: "POST",
data: {
page: page,
query: query
},
success: function(data) {
$('#dynamic_content').html(data);
}
});
}
load_data(1);
$(document).on('click', '.page-link', function() {
var page = $(this).data('page_number');
var query = $('#search_box').val();
load_data(page, query);
});
$('#search_box').keyup(function() {
var query = $('#search_box').val();
load_data(1, query);
});
$(".goto-page form").submit(function(evt) {
evt.preventDefault();
load_data(parseInt($(".goto-page input[name='goto']").val()));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br />
<div class="container">
<h3 align="center">Live Data Search with Pagination in PHP Mysql using Ajax</h3>
<br />
<div class="card">
<div class="card-header">Dynamic Data</div>
<div class="card-body">
<div class="form-group">
<input type="text" name="search_box" id="search_box" class="form-control" placeholder="Type your search query here" />
</div>
<div class="table-responsive" id="dynamic_content">
</div>
<div class="goto-page">
<form>
<button type="submit">Go To Page</button>
<input type="text" class="enter-page-no" maxlength="4" size="3" name="goto" value="1" required>
</form>
</div>
</div>
</div>
</div>
When Enter is hit or the Button pressed, the form is submitted. The submit callback will gather the value and use load_data() to load that page.

Return record of each query as I click the button

I have 3 query records in a database table of the same user. When I do query returns and shows the most recent query of the database table.
I want to return the 3 queries, always show the most recent query, but have a button that when clicked close the query that is showing and open the previous query and so on until no further queries.
In this way I always have access to the information registered in each consultation about the user.
At this point I return the query as follows:
<a name="view2" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal1" class="btn btn-primary view_data2" />EGA</a>
<div id="dataModal1" class="modal fade" style="width:1000px;">
<div class="modal-dialog" style="width:1000px;">
<div class="modal-content" style="width:1000px;">
<div class="modal-header" style="width:1000px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><strong>Estado Geral e Autonomia</strong></h4>
</div>
<div class="container"></div>
<div class="modal-body" id="employee_detail1">
</div>
<div class="modal-footer">
Sair
</div>
</div>
</div>
</div>
$(document).on('click', '.view_data2', function() {
var employee_id1 = $(this).attr("Id");
if (employee_id1 != '') {
$.ajax({
url: "./select2",
method: "POST",
data: {
employee_id1: employee_id1
},
success: function(data) {
console.log(data);
$('#employee_detail1').html(data);
$('#dataModal1').modal('show');
}
});
}
});
on the select2 page I have the following code:
if(isset($_POST["employee_id1"]))
{
$output = '';
$query = "SELECT * FROM centrodb.PsicUtentes WHERE centrodb.PsicUtentes.Id = '".$_POST["employee_id1"]."'";
$result = mysqli_query($conn, $query);
$output;
while($row = mysqli_fetch_array($result))
{
$output .= '
<h4 class="modal-title">Identificação do Utente</h4>
<form method="post" id="insert_form2">
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<label>Data</label>
<input type="text" id="Data1" name="Data" class="form-control" value="'.$row["Data"].'" style="width:150px;" />
</td>
<td>
<label>Código Utente</label>
<input type="number" id="CodigoUtente1" name="CodigoUtente" value="'.$row["CodigoUtente"].'" class="form-control" style="width:100px;"/>
</td>
<td>
<label>Nome Utente</label>
<input type="text" id="Nome1" name="Nome" value="'.$row["Nome"].'" class="form-control" class="form-control" style="width:400px;"/>
</td>
<td>
<label>Data Nascimento</label>
<input type="date" id="DataNasc1" name="DataNasc" value="'.$row["DataNasc"].'" class="form-control" style="width:150px;"/>
</td>
</tr>
</table>
</fieldset>
</form>
';
}
$output;
echo $output;
}
I will show the image with the page when I have three queries:
I intended to have a button like the one surrounded in red and whenever I clicked, I closed the information of the query that is showing and opened the previous query.
Solution I'm trying.
<script type="text/javascript">
$(document).ready(function(){
$('.conteudo').hide();
$('.exibir').each(function(i){
$(this).click(function(){
$('.conteudo').each(function(j){
if(i == j) $(this).show('slow');
});
});
});
$('.ocultar').each(function(i){
$(this).click(function(){
$('.conteudo').each(function(j){
if(i == j) $(this).hide('slow');
});
});
});
});
</script>
if(isset($_POST["employee_id1"]))
{
$output = '';
$query = "SELECT * FROM centrodb.PsicUtentes WHERE centrodb.PsicUtentes.Id = '".$_POST["employee_id1"]."'";
$result = mysqli_query($conn, $query);
$output;
while($row = mysqli_fetch_array($result))
{
$output .= '
<h4 class="modal-title">Identificação do Utente</h4>
<div>
<a class="exibir" href="#">Ver</a>--
Ocultar
</div>
<div class="conteudo">
<form method="post" id="insert_form2">
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<label>Data</label>
<input type="text" id="Data1" name="Data" class="form-control" value="'.$row["Data"].'" style="width:150px;" />
</td>
<td>
<label>Código Utente</label>
<input type="number" id="CodigoUtente1" name="CodigoUtente" value="'.$row["CodigoUtente"].'" class="form-control" style="width:100px;"/>
</td>
<td>
<label>Nome Utente</label>
<input type="text" id="Nome1" name="Nome" value="'.$row["Nome"].'" class="form-control" class="form-control" style="width:400px;"/>
</td>
<td>
<label>Data Nascimento</label>
<input type="date" id="DataNasc1" name="DataNasc" value="'.$row["DataNasc"].'" class="form-control" style="width:150px;"/>
</td>
</tr>
</table>
</fieldset>
</form>
<div>
';
}
$output;
echo $output;
}
That's how it works, but I still wanted to make one thing better. I see the first record, but when I see the second the first is always open and should hide when I open the second. The second record opens when I click on view and hides when I click hide.
Also I wanted the Edit and New button, always according to the div that I open and in my project if there are two registry open the two buttons at the beginning of the project and should open as I open the div, I show in the image:
When I open the first time the:
enter image description here
When I see the first record:
enter image description here
When I see the second record:
enter image description here
Hi what you can do is hide your modal in your html content, and fill it with your ajax then once you have the data you can display it ,you can do it this way:
your php script:
if (isset($_POST["action"])) {
$action = $_POST["action"];
switch ($action) {
case 'SLC':
if (isset($_POST["id"])) {
$id = $_POST["id"];
if (is_int($id)) {
$query = "select * from client where clientId = '$id' ";
$update = mysqli_query($mysqli, $query);
$response = array();
while($row = mysqli_fetch_array($update)){
.......
// you need to fill the response array here with the info you
//want to display and send it with json encode later
}
echo json_encode($response);
}
}
break;
}
}
Where action can be a command you want to do SLC, UPD, DEL etc and id is a parameter
then in your ajax:
function getInfo(id) {
return $.ajax({
type: "POST",
url: "getInfo.php",
data: { action: "SLC", id:id }
})
}
then call it like this:
getInfo(id).done(function(response){
var data=JSON.parse(response);
if (data != null) {
$('#form_id').trigger("reset");
//fill your modal form using your data and display the modal after reset the form
$("#modal").show();
}
})
Hope it helps

Chat Application Using PHP updating previous messages

Why this code not working
I am building a chatbot application using php and aiml. I have made the chat window for the same. But in chat window when I enter the message it overwrites the previous message every time. I want that the new message should come in the new line. Please help
My Code is
<div class="panel" id="chat">
<div class="panel-heading" style="background-color:#337ab7">
<h3 class="panel-title" style="color:#FFF">
<i class="icon wb-chat-text" aria-hidden="true" ></i> How Can I Help You
</h3>
</div>
<div class="panel-body">
<div class="chats">
<div class="chat">
<div class="chat-avatar">
<a class="avatar avatar-online" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="June Lane">
<i></i>
</a>
</div>
<div class="chat-body">
<div class="chat-content">
<p>
<div class="botsay">Hey!</div>
</p>
<time class="chat-time" datetime="2015-07-01T11:37">
<?php
echo date("h:i:sa");
?></time>
</div>
</div>
</div>
<div class="chat chat-left">
<div class="chat-avatar">
<a class="avatar avatar-online" data-toggle="tooltip" href="#" data-placement="left" title="" data-original-title="Edward Fletcher">
<i></i>
</a>
</div>
<div class="chat-body">
<div class="chat-content">
<p><div class="usersay"> </div></p>
<time class="chat-time" datetime="2015-07-01T11:37">
<?php
echo date("h:i:sa");
?></time>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<form method="post" name="talkform" id="talkform" action="index.php">
<div class="input-group">
<input type="text" class="form-control" name="say" >
<input type="hidden" name="convo_id" id="convo_id" value="<?php echo $convo_id;?>" />
<input type="hidden" name="bot_id" id="bot_id" value="<?php echo $bot_id;?>" />
<input type="hidden" name="format" id="format" value="json" />
<span class="input-group-btn">
<input class="btn btn-primary" type="submit" name="submit" id="submit" value="Send" />
</span>
</div>
</form>
</div>
I am using ajax to input values in the chat window using aiml.
$(document).ready(function() {
// put all your jQuery goodness in here.
$('#talkform').submit(function(e) {
e.preventDefault();
var user = $('#say').val();
$('.usersay').text(user);
var formdata = $("#talkform").serialize();
$('#say').val('');
$('#say').focus();
$.get('<?php echo $url ?>', formdata, function(data){
var b = data.botsay;
if (b.indexOf('[img]') >= 0) {
b = showImg(b);
}
if (b.indexOf('[link') >= 0) {
b = makeLink(b);
}
var usersay = data.usersay;
if (user != usersay) {
$('.usersay').text(usersay);
}
$('.botsay').html(b);
}, 'json').fail(function(xhr, textStatus, errorThrown){
$('#urlwarning').html("Something went wrong! Error = " + errorThrown);
});
return false;
});
});
function showImg(input) {
var regEx = /\[img\](.*?)\[\/img\]/;
var repl = '<br><img src="$1" alt="$1" width="150" />';
var out = input.replace(regEx, repl);
console.log('out = ' + out);
return out
}
function makeLink(input) {
var regEx = /\[link=(.*?)\](.*?)\[\/link\]/;
var repl = '$2';
var out = input.replace(regEx, repl);
console.log('out = ' + out);
return out;
}
The problem with your code is you are just keeping on replacing the contents of usersay and botsay. You need to append or prepend as per your need to make it work.
Consider this bit of code, you need to change as per comments:
$.get('<?php echo $url ?>', formdata, function(data){
var b = data.botsay;
if (b.indexOf('[img]') >= 0) {
b = showImg(b);
}
if (b.indexOf('[link') >= 0) {
b = makeLink(b);
}
var usersay = data.usersay;
if (user != usersay) {
$('.usersay').append(usersay); // 1. Change here.
}
$('.botsay').append(b); // 2. Change here.
}, 'json')

ng-click not firing any event

here it is my html part from where i m trying to enter details ..
<div ng-app="angularPHP">
<div ng-controller="mainpagecntl">
<div id="customer" class="cuscontainer" hidden="hidden">
<div>
<h3 class="modal-title" >Add customer</h3>
<i class="fa fa-times" id="clo" aria-hidden="true"></i>
</div>
<table>
<tr>
<div class="form-group" >
<td><label id="label" class="control-label">customer Name:</label>
<td><input type="text" class="form-control" ng-model="customer_name" />
</div>
</tr>
<tr>
<div class="form-group">
<td><label id="label" class="control-label">Address:</label></td>
<td><input type="text" class="form-control" ng-model="customer_add"/></td>
</div>
</tr>
</table>
<div class="madal-footer">
<button class="btn btn-primary" ng-click="custadd()">ADD</button><br />
</div>
</div>
</div>
</div>
here is my angular-js part..
var app = angular.module('angularPHP', []);
app.controller('mainpagecntl', function($http,$scope)
{
$scope.custadd= function()
{
data={
cname :$scope.customer_name,
cadd: $scope.customer_add,
}
$http.post("../pos_system/Widgets/addcust.php?add",data).success(function(data)
{
});
}
});
but when i click on button nothing happened my ng-click function is not firing.
try adding ng-controller="myCtrl"at the <div id="customer" class="cuscontainer" hidden="hidden"> like this
<div id="customer" class="cuscontainer" hidden="hidden" ng-controller="myCtrl">
Are you sure the function is not firing at all? It may be firing but just failing to post the data. console.log something straight away inside the function to check e.g.
var app = angular.module('angularPHP', []);
app.controller('mainpagecntl', function($http,$scope) {
var vm = this;
vm.custadd = function() {
console.log('test');
var data = { cname :$scope.customer_name, cadd: $scope.customer_add};
$http.post("../pos_system/Widgets/addcust.php?add",data)
.success(function(data) {
console.log(data);
});
}
}
Then your ng-click should look like this
ng-click='vm.custadd()'
See if that makes any difference.
Note: Your ng-controller should also look like
ng-controller="mainpagecntl as vm"
as noted in the comments below.
Here's the working demo https://plnkr.co/edit/k7yApAavre66KFAiVlOp?p=preview for your code and it worked perfectly when I clicked on Add button. Although I have removed some div tags from table as it's bad practice and Angular will not identify those tags when its directives are used on them.
var app = angular.module('angularPHP', []);
app.controller('mainpagecntl', function($http, $scope) {
$scope.custadd = function() {
$scope.data = {
cname: $scope.customer_name,
cadd: $scope.customer_add,
}
// $http.post("../pos_system/Widgets/addcust.php?add", data).success(function(data) {});
}
});

Run jQuery modal dialog if PHP returns 0

I need to run jQuery modal dialog if mainOptim.php returns 0. Now Firebug says $dialog is not defined. What should I change in the code?
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
});
function click_function_ps() {
$.ajax({
url: 'callpage.php?page=optim/mainOptim.php',
data: 'earl='+$('#earl').val(),
success: function(html,msg){
if(msg === '1'){
$('#opt_container').html(html);
} else {
$dialog.dialog('open');
return false;
}
}
});
}
</script>
<div id="fragment-2">
<table width="100%">
<tr>
<td width="100%">
<form name="optform" method="post" action="#">
<div class = "boxx">
<label for="earl"><span>Parameter:</span></label>
<input type="text" class="input-text" value="5" size="11" maxlength="11" name="earl" id="earl">
</div>
<br/>
<div class="buttons">
<a href="#" class="regular" onclick="click_function_ps();">
<img src="images/opt.png" alt=""/> Run
</a>
</div>
</form>
</td>
</tr>
</table>
</div>
That's because you declared it as a local variable using the var keyword in the ready scope.
Remove the var in front of the declaration (var $dialog).

Categories