I am having a looping issue with my YouTube API script. The code below shows my code. The issue that I am having is that after I get a response back from the server through jquery ajax, I alert the YouTube ID of a selected specific video. For some reason, it alerts it three times. I tried modifying the code adding the ajax call outside of the loop, but it doesn't seem to work. Any help would be greatly appreciated.
Below is the app.js
function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}
$(function() {
$("form").on("submit", function(e) {
e.preventDefault();
// prepare the request
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
headers: {referer: "//localhost/"},
q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
maxResults: 3 // Set this to the number you want to display on the page.
});
// execute the request
request.execute(function(response) {
var results = response.result;
$("#results").html("");
$.each(results.items, function(index, item) {
$.get("tpl/item.html", function(data) {
$("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
$('.selection').on('click', function () {
let url = "update_db.php";
let song_name2 = item.snippet.title;
let youtube_id = item.id.videoId;
$.ajax({
dataType: "JSON",
url: url,
type: "GET",
data: {song_name2: song_name2, youtube_id: youtube_id},
success: function (data) {
alert("YouTube ID: " + youtube_id );
//ALERTS 3 TIMES. HOW TO FIX IT???
/*if(data.msg === "success"){
console.log(data.result);
alert(data.result);
} else {
console.log(data.result);
alert(data.result);
}*/
}
});
});
});
}); // for each loop
resetVideoHeight();
});
});
$(window).on("resize", resetVideoHeight);
});
function resetVideoHeight() {
$(".video").css("height", $("#results").width() * 9/16);
}
function youtube_api() {
gapi.client.setApiKey("PUBLIC KEY");
gapi.client.load("youtube", "v3", function() {
// yt api is ready
});
}
Below is the item.html
<div class="item">
<h2>Title: <strong><span style="color: red">{{title}}</span></strong></h2>
<h2><span class="selection">I will like to perform this selection</span></h2>
<iframe class="video w100" width="640" height="360" src="https://www.youtube.com/embed/{{videoid}}" frameborder="0" allowfullscreen></iframe>
</div>`enter code here`
Below is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search your YouTube video</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Awesome videos!" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row con">
<div class="col-md-6 col-md-offset-4">
<div style="width: 47%; height: 50px; margin-left: 22px; display: none" id="success" class="alert-success text-center"><div style="padding-top: 15px; padding-right: 15px;"></div></div>
<div style="width: 47%; height: 50px; margin-left: 22px; display: none" id="error" class="alert-danger text-center"><div style="padding-top: 15px; padding-right: 15px;"></div></div>
<form>
<p><input type="text" id="search" placeholder="Search YouTube video" autocomplete="off" class="form-control" required /></p>
<p>
<button type="submit" id="youtube_video_search" class="form-control btn btn-primary w100">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
</form>
</div>
</div>
<div class="row">
<div class=" col-md-6 col-md-offset-3">
<div id="results"></div>
</div>
</div>
<!-- scripts -->
<script src="./jquery-3.3.1.js"></script>
<script src="js/app.js"></script>
<script src="https://apis.google.com/js/client.js?onload=youtube_api"></script>
</body>
</html>
For some reason, it alerts it three times.
You are binding click on .selection on every loop and when the loop is done, you have 3 elements with .selection, that means you bind the click on all 3 of them.
You should bind it on id or some custom tag like data-selection-id=UNIQUE_ID
item.html
Change <span class="selection"> to <span class="selection" data-selection-id="{{videoid}}">
app.js
Change $('.selection').on('click', function () { to $('.selection[data-selection-id="+ item.id.videoId +"]').on('click', function () {
Not exactly sure your case, But for a workaround you can handle this with any boolean flag.
$('.selection').on('click', function () {
var isExecuted = false;
let url = "update_db.php";
let song_name2 = item.snippet.title;
let youtube_id = item.id.videoId;
$.ajax({
dataType: "JSON",
url: url,
type: "GET",
data: {song_name2: song_name2, youtube_id: youtube_id},
success: function (data) {
if(!isExecuted)
{
isExecuted = true;
alert("YouTube ID: " + youtube_id );
//ALERTS 3 TIMES. HOW TO FIX IT???
}
}
});
});
Related
I am really stuck and I don't know what to do (I'm new to coding). I have created a user login and register form. I have also created buttons that can change the background color and hide the other buttons. My problem is that when one user, for example, changes their background color, it stays there when another user logins in.
E.g. User 1 logs in and changes their background to blue. User 1 logs out and User 2 logs in. User 2 can see that their background is blue (because of User 1) and changes it to green. User 2 logs out and User 1 logs in and now User 1's background is green and not blue.
I can't figure out how to just save it to the user only. I think it saves to the computer because of the localStorage. I am not sure. I want to know how to save this to the user so they can access their own data and not other users' (I'm sorry if this is worded badly). I am having the same problem with the hide/show buttons.
I have tried cookies, window.localStorage etc but it has the same results.
You can go to https://panda-lingo.com/login.php to try it out and here is my code for index.php:
<?php require_once 'controllers/authController.php';
if (isset($_GET['token'])) {
$token = $_GET['token'];
verifyUser($token);
}
if (isset($_GET['password-token'])) {
$passwordToken = $_GET['password-token'];
resetPassword($passwordToken);
}
if (!isset($_SESSION['id'])) {
header('location: login.php');
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Panda Lingo | Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit-no">
<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
<style id="compiled-css" type="text/css">
.form-div {
margin: 50px auto 50px;
padding: 25px 15px 10px 15px;
border: 1px solid #80ced7;
border-radius: 5px;
font-size: 1.1em;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body id="body">
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 form-div">
<?php if (isset($_SESSION['message'])): ?>
<div class="alert <?php echo $_SESSION['alert-class']; ?>">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
unset($_SESSION['alert-class']);
?>
</div>
<?php endif; ?>
<h3>Welcome, <?php echo $_SESSION['username']; ?></h3>
logout
<?php if ($_SESSION['verified']): ?>
<button class="btn btn-primary btn-block btn-lg">I am verified!</button>
<?php endif; ?>
</div>
</div>
</div>
<button class="btn" id="nighttime-button">Dark Mode</button>
<button class="btn" id="white-button">White</button>
<button class="btn" id="pink-button">Pink</button>
<button class="btn" id="red-button">Red</button>
<button class="btn" id="orange-button">Orange</button>
<button class="btn" id="yellow-button">Yellow</button>
<button class="btn" id="green-button">Green</button>
<button class="btn" id="blue-button">Blue</button>
<button class="btn" id="purple-button">Purple</button>
<button class="btn" id="brown-button">Brown</button>
<button class="btn" id="grey-button">Grey</button>
<button id="hide-buttons">Hide Buttons</button>
<button id="show-buttons">Show Buttons</button>
</body>
<script id="background-colors">
const nightMode = document.getElementById('nighttime-button');
const whiteBtn = document.getElementById('white-button');
const pinkBtn = document.getElementById('pink-button');
const redBtn = document.getElementById('red-button');
const orangeBtn = document.getElementById('orange-button');
const yellowBtn = document.getElementById('yellow-button');
const greenBtn = document.getElementById('green-button');
const blueBtn = document.getElementById('blue-button');
const purpleBtn = document.getElementById('purple-button');
const brownBtn = document.getElementById('brown-button');
const greyBtn = document.getElementById('grey-button');
const body = document.getElementById('body');
if (localStorage.changeBackgroundColor)
{
$(body).css('background-color', localStorage.changeBackgroundColor);
}
if (localStorage.hideButtons)
{
$('.btn').css('display', localStorage.hideButtons);
}
if (localStorage.showButtons)
{
$('.btn').css('display', localStorage.showButtons);
}
$(nightMode).on('click', function() {
$(body).css("background-color", "#404040");
localStorage.changeBackgroundColor = '#404040';
});
$(whiteBtn).on('click', function() {
$(body).css("background-color", "#ffffff");
localStorage.changeBackgroundColor = '#ffffff';
});
$(pinkBtn).on('click', function() {
$(body).css("background-color", "#ffe6ee");
localStorage.changeBackgroundColor = '#ffe6ee';
});
$(redBtn).on('click', function() {
$(body).css("background-color", "#FF6961");
localStorage.changeBackgroundColor = '#FF6961';
});
$(orangeBtn).on('click', function() {
$(body).css("background-color", "#FCB772");
localStorage.changeBackgroundColor = '#FCB772';
});
$(yellowBtn).on('click', function() {
$(body).css("background-color", "#F8E37B");
localStorage.changeBackgroundColor = '#F8E37B';
});
$(greenBtn).on('click', function() {
$(body).css("background-color", "#BFF47A");
localStorage.changeBackgroundColor = '#BFF47A';
});
$(blueBtn).on('click', function() {
$(body).css("background-color", "#CFEDFB");
localStorage.changeBackgroundColor = '#CFEDFB';
});
$(purpleBtn).on('click', function() {
$(body).css("background-color", "#EED0FA");
localStorage.changeBackgroundColor = '#EED0FA';
});
$(brownBtn).on('click', function() {
$(body).css("background-color", "#D8AF87");
localStorage.changeBackgroundColor = '#D8AF87';
});
$(greyBtn).on('click', function() {
$(body).css("background-color", "#E8E8E8");
localStorage.changeBackgroundColor = '#E8E8E8';
});
$('#hide-buttons').on('click', function() {
$('.btn').css("display", "none");
localStorage.hideButtons = 'none';
});
$('#show-buttons').on('click', function() {
$('.btn').css("display", "block");
localStorage.showButtons = 'block';
});
</script>
</html>
You need to create an user_background field, when users choose their background, it will be saved to database. And after user login, you can get and set background by user.
I need some help with my code as I have got a problem with defined the variable to post them in Ajax. I am working on PHP as I am fetching the data from mysql database to input the information in PHP, so I would like to post the ID in ajax.
I have defined the variable $autoid outside of the while loop, but I am unable to defined them when I am using jquery because it will show empty data when I try to post them in Ajax.
When I try this:
var ID = $(this).data('deleteid');
$.ajax({
type: 'POST',
url: "sendtest.php",
data: {ID : "deleteid"
},
success: function(resultData) {
alert(resultData)
}
Here is the full code:
<?php
// Initialize the session
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
else
{
$link = mysqli_connect('localhost', 'mydbusername', 'mydbpassword', 'mydbpassword');
$param_username = $_SESSION['username'];
$autocampaign = $_SESSION["auto_campaign"];
$autor_sql = "SELECT id, subject, day_cycle, enabled, delaysend FROM auto WHERE campaign ='$autocampaign' AND username ='$param_username'";
$autoid = '';
$results = mysqli_query($link, $auto_sql);
if (mysqli_num_rows($results) > 0)
{
while ($row = mysqli_fetch_array($results))
{
$autoid = $row["id"];
$autosubject = $row["subject"];
$autodaycycle = $row["day_cycle"];
$autoenabled = $row["enabled"];
$autodelay = $row["delaysend"];
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.calendar-content {
float: left;
width: 100%;
min-height: 112px;
border: 1px solid #ccc;
position: relative;
margin-top: -1px;
}
</style>
<div class="calendar-content">
<div style="margin-left: 40px;margin-top: 20px; height: 40px;">
<span id="autosubject" style="font-size: 25px;color: #0c7ac0;float: left;">Subject: <?php echo $autosubject ?> </span><br>
<div style="margin-left: 35px; margin-top: 15px; height: 40px;">
<form action="" method="post">
<span style="font-size: 15px; color: #ccd5d9; float: left; margin-top: -1px"><a name="autoid" id="autoid" href="#contactModal" role="button" data-toggle="modal">Send a test</a> | <a name="deleteid" id="deleteid" href="/auto/delete_auto.php?id=<?php echo $autoid; ?>"> Delete </a> | Copy to Draft | Settings</span>
</form>
</div>
</div><br>
<!-- email Modal -->
<div id="contactModal" class="modal fade" style="margin-top: 12%;" tabindex="-1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="height: 250px;">
<div class="modal-header" style="margin-bottom: 10px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Send A Test Email</h3>
</div>
<div class="modal-body" style="height: 65%;">
<form action="" method="post">
<label class="label-control" value="">Send test message to email address:</label>
<select name="emails" id="emails" value="" style="width: 400px; margin-top: 10px; margin-bottom: 18px; margin-left: 60px;">
<option selected="selected" value='title'>Title</option>";
</select><br>
<button name="send_email" id="send_email" type="submit" class="btn btn-primary" style="margin-left: 36%;" data-auto-id="<?php echo $autoid; ?>">Send Test</button>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#send_email').click(function(e) {
$(this)
.html("<span><i class='fa fa-spinner fa-spin'></i> Sending...</span>")
.prop("disabled", true);
var ID = $(this).data('deleteid');
$.ajax({
type: 'POST',
url: "sendtest.php",
data: {ID : "deleteid"
},
success: function(resultData) {
alert(resultData)
$('#contactModal').modal('hide');
$("#send_email")
.html("Send Test")
.prop("disabled", false);
}
});
});
});
</script>
<?php
}
?>
Here is the sendtest.php:
<?php
// Initialize the session
session_start();
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
else if(isset($_POST))
{
$id = $_POST[$autoid];
echo "hello your id is...";
echo $id;
}
?>
What I want to achieve is when I click on a send a test hyperlink, a modal will display and when I click on a button after I select on a dropdown listbox, I want to fetch the ID from the Delete hyperlink so I can post them in ajax. The reasons I want to post the ID in ajax is because I want to stay on the same page while I want to fetch the information from the mysql database.
Can you please show me an example how I can fetch the ID from the Delete hyperlink to post them in ajax?
Thank you for understanding what I am trying to do.
There are several issues in your code:
1st: data: {ID : "deleteid"}, should be data: {ID : ID }, (you want to send the var, not the string "deleteid")
2nd: var ID = $(this).data('deleteid'); should be var ID = $(this).data('auto-id');, because the data-attribute is data-auto-id="...
3rd: $id = $_POST[$autoid]; will throw an error (undefined variable) & a notice (undefined index). Should be $id = $_POST['ID'], because you call the param "ID" here: data: {ID : varname},
4th: you are missing a ; here: alert(resultData)
Here's the corrected ajax-part:
var ID = $(this).data('auto-id');
$.ajax({
type: 'POST',
url: "sendtest.php",
data: {ID : ID },
success: function(resultData) {
alert(resultData);
$('#contactModal').modal('hide');
$("#send_email")
.html("Send Test")
.prop("disabled", false);
}
});
I'm using laravel5.5 Ajax paging. I am the HTML part assembled in the controller. When I clicked on page second, I jumped to this method. How to make the compiled HTML code continue to display on the page?
After clicking on the second page, a string of JSON data is returned. This is a problem. How can we make the data on the second page continue to display in the original page?
PHP
//Screen video, playback volume and key points.
public function accept（Request $ request）{
$id=$_GET['id'];
$summer=$_GET['key'];
$name=DB::table('vd_category')->where('address',$summer)->value('name');
if($id=='1'){
$video=DB::table('vd_video_'.$summer)->orderBy('state','desc')->paginate(25);
}else if($id=='2'){
$video=DB::table('vd_video_'.$summer)->orderBy('thumbs','desc')-
>paginate(25);
}
$data='';
foreach($video as $list){
$data.='<div class="col-md-1-5 col-sm-4 col-xs-6" style="padding:0
5px;"><div class="movie-item">';
$data.="<a style='position:relative;display:block;' title='$list-
>video_name' target='_blank' href='details?id=$list->id&key =$summer'>";
$data.="<img alt='$list->video_name' title='$list->video_name'
src=\"uploads/$list->image_address\" height=\"230px\" width='100%'>";
$data.="<button class='bdtag'></button>";
$data.="</a>";
$data.="<div class=\"meta\"><div
style=\"width:100%;overflow:hidden;height:20px;\">";
$data.="<a href='/details?id='$list->id'&key='$summer'
target='_blank' title='$list->video_name' class=\"movie-name\">$list-
>video_name</a>";
$data.="<span class=\"otherinfo\"> 5.0分</span></div><div
class=\"otherinfo\">类型：$name</div></div></div></div>";
}
$datav['1']=$data;
$datav['2']="<div>"."{$video->appends(['id' =>
$id,'key'=>$summer,'name'=>'page'])->links()}"."</div>";
return json_encode($datav);
}
HTML
<div id="data">
#foreach($video as $list)
<div class="col-md-1-5 col-sm-4 col-xs-6" style="padding:0 5px;">
<div class="movie-item">
<a style="position:relative;display:block;" title="{{$list-
>video_name}}" target="_blank" href="/details?id={{$list->id}}&key=
{{$status}}">
<img alt="{{$list->video_name}}" title="{{$list-
>video_name}}" src="{{asset('uploads')}}/{{$list->image_address}}"
height="230"
width="100%">
<button class="bdtag"></button>
</a>
<div class="meta">
<div style="width:100%;overflow:hidden;height:20px;"><a
href="/details?id={{$list->id}}&key={{$status}}" target="_blank" title="
{{$list-
>video_name}}" class="movie-name">{{$list->video_name}}</a><span
class="otherinfo"> 5.0分</span></div>
<div class="otherinfo">类型：{{$namme}}</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
<div id="datav" style="background:#FFF;padding-left:15px;">
{{$video->appends(['id' => $page,'name'=>'page'])->links()}}
</div>
JavaScript
<select name="" required id="where_id" style="float: right;padding-
left:10px;border-left:8px;width: 90px;height: 30px;">
<option value="">Click screening</option>
<option value="1">Sort by play volume</option>
<option value="2">Ranking by points</option>
</select>
<input type="hidden" id="summer" value="{{$status}}">
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#where_id").change(function () {
var id=$("#where_id").val();
var summer=$("#summer").val();
$.ajax({
type:"get",
url:"accept",
dataType:'json',
data:{id:id,key:summer},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
}
});
});
</script>
It has been solved.js has been modified.
That is, the parameters carried by the URL through the Ajax request to the
back-end again, and then the back-end returned JSON data inserted into the
specified location again, probably this is the solution, my English is not
very good, please forgive me.
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#where_id").change(function () {
fun();
});
function fun() {
var id=$("#where_id").val();
var summer=$("#summer").val();
$.ajax({
type:"get",
url:"accept",
dataType:'json',
data:{id:id,key:summer},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
pagedata();
}
});
}
function pagedata(){
$(".page-item a").click(function (){
var href=this.href;
this.href="javascript:void(0);";
var id=getQueryVariable('page',href);
var key=getQueryVariable('key',href);
var page=getQueryVariable('page',href);
$.ajax({
type: "get",
url: "accept",
dataType: 'json',
data: {id: id, key: key,page:page},
success:function (event){
$("#data").html(event[1]);
$("#datav").html(event[2]);
pagedata();
}
})
})
}
// Intercept the parameter values carried by URL, such as page parameters
//and some custom parameters.
function getQueryVariable(name,url) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var data=url.slice(url.indexOf('?'));
var r =data.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
</script>
I have a script below that uploads images to the server. Upon completion it updates the img source by html. The issue I'm having is that I wrote my php code to rename the files to a predefined name (ext-pix0.png, ext-pix1.png, ext-pix3.png, etc.) when they are being uploaded. Because of this, the pictures on the screen won't refresh even though the new images replaced the old ones when uploading is done. I also turn off no cache, but it doesn't work. How do I get around this issue?
SCRIPT
<script>
$('input[name="ext_pix[]"]').on('change',function(){
var account_list = $('#account_list').val();
var order_list = $('#order_list').val();
var id_list = $('#id_list').val();
var formData = new FormData($(this).parents('form')[0]);
$.ajax({
url: 'sql/ext-pix-upload.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success:function(data){
$('#ext-pix0').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix1').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix2').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix3').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png" height="103.5%" width="100%"/>').fadeIn(500);
},
error: function(data){
}
});
});
</script>
HTML
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<form>
<div class="card-wrapper">
<div class="card mt-3">
<h5 class="card-header pb-2">Exterior Pictures</h5>
<div class="card-block" style="height:322px">
<div style="height:50%">
<div id="ext-pix0" class="ext-pix">
<img src="images/profile/property-pix.png" height="103.5%" width="100%"/>
</div>
<div id="ext-pix1" class="ext-pix">
<img src="images/profile/property-pix.png" height="103.5%" width="100%"/>
</div>
</div>
<div class="lower-row">
<div id="ext-pix2" class="ext-pix">
<img src="images/profile/property-pix.png" height="103%" width="100%"/>
</div>
<div id="ext-pix3" class="ext-pix">
<img src="images/profile/property-pix.png" height="103%" width="100%"/>
</div>
</div>
<div class="ext-btn">
<input id="ext_pix" class="hidden" name="ext_pix[]" type="file" accept="image/*" multiple/>
<label class="gi gi-camera mb-0 text-white" for="ext_pix" title="Change Picture"></label>
</div>
</div>
</div>
</div>
</form>
Clear the images first?
success:function(data){
$('#ext-pix0').html('');
$('#ext-pix1').html('');
$('#ext-pix2').html('');
$('#ext-pix3').html('');
$('#ext-pix0').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix1').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix2').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix3').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png" height="103.5%" width="100%"/>').fadeIn(500);
},
Why don't you try to update img element in html file with id, inside the onSuccess() of ajax.
<img id="img_id" src="#"/>
OnSuccess function of Ajax,
success: function (data) {
$("#img_id").attr("src", data.pictureUrl);
}
Try like this:
success:function(data){
$('#ext-pix0').fadeOut('500', function(){
$(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png");
$(this).fadeIn(500);
});
$('#ext-pix1').fadeOut('500', function(){
$(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png");
$(this).fadeIn(500);
});
$('#ext-pix2').fadeOut('500', function(){
$(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png");
$(this).fadeIn(500);
});
$('#ext-pix3').fadeOut('500', function(){
$(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png");
$(this).fadeIn(500);
});
},
Please update what response you are getting in data in success function and update the src element only in ajax success. OR instead assign some class or ID to img tag and update only the src element.
<img class="ext-pix0" id="ext-pix0" src="images/profile/property-pix.png" height="103.5%" width="100%"/>
updated Script
success:function(data)
{
for(vari=0;i<data.length.i++)
{
$('#ext-pix'+i).attr(src,'data[i].url').fadeIn(500);
}
},
fadeOut "$('#ext-pix...')" before calling AJAX
success:function(data){
for(i=0;i<=3;i++){
$('#ext-pix'+i).html('');
let Image = $('<img/>',{src:'accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix'+i+'.png' , style:'height:103.5%;width:100%';});
$('#ext-pix'+i).html(Image).fadeIn(500);
}
},
I use this code to revieve some data from my database. The database has one column, that are numbers from 0 - 40. I get my return numbers from the database in a DIV tag. I would like to sort the numbers, so
1 - 20 is going on the left side of the div tag
21 - 40 is going on the right side of the div tag
0 is going in the middle of the div tag
I am thinking if it is possible to put a padding on some specifik numbers, or which way is the smartest to do it?
EDITED...
Thanks for the answers guys. The code is quite amateur, but I am not so good at it yet. But the return of the database is ok, except there is comming a 0 everytime. In the left handside where the numbers in the div are, that is where I want to padding some specifik numbers.
I hope that clearlifies my question a little bit?
Best Regards
Julie
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/my_script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css\placing.css">
<title>Numbers</title>
</head>
<body>
<div class="topbar">
<p>Topbar</p>
</div>
<div class="talraekke" id="show">
<p>Tal</p>
</div>
<div class="content">
<p>Enter The Number</p>
<form id="myForm" action="select.php" method="post">
<input type="number" name="numbervalue">
<button id="sub">Save</button>
</form>
<span id="result"></span>
</div>
<div class="talraekke">
<p>test</p>
</div>
<div class="talraekke">
<p>test</p>
</div>
</body>
</html>
JS:
// Insert function for number
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
}
$(document).ready(function(){
$("#sub").click( function(e) {
e.preventDefault(); // remove default action(submitting the form)
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
})
// Recieve data from database
$(document).ready(function() {
setInterval(function () {
$('#show').load('response.php')
}, 3000);
});
PHP Response from DB
// Return data from database
$result = $conn->query("SELECT numbers FROM numbertable");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo $row['numbers'] . '<br>';
}
As I understood you should use this simple way:
<?php
for($i=0; $i<=40; $i++)
{
echo '<div class="test">'.$i.'</div></br>';
}
?>
<style type="text/css">
.test{
background-color:#284062;
text-align:center;
color:#fff;
min-width:30px;
width:32px;
}
</style>