Quality selector not working when I call the via jquery ajax.
HTML
<video style="background:black; border-radius:20px;"class="" id="player" "> </video>
Ajax code
$.ajax({
url:"/retrieve/video.php",
method:"POST",
data:{quality:quality,slig:slig,episode:episode,server:server},
success:function(data){
$("#loaders").hide();
$('#player').show();
$('#player').append(data);
}
});
Related
This is the code i am using for the on page videos. I have multiple videos on the page.
<video class='player' onplay='myFunction()'
data-id='$row[id]' oncontextmenu='return false;'
width='300' height='180' controls controlsList='nodownload'>
<source src='' type='video/mp4'>
Your browser does not support the video tag.
</video>
This is the javascript i am using to pass the parameters...
<script type='text/javascript'>
function myFunction(){
$.ajax({
url: "check.php",
method: "POST",
data: { "videoId": $(this).data("id") },
dataType:"Text",
});
}
</script>
I am trying to insert the VIDEO ID in the database of the video when clicked to play.
For database i am using below code
if(isset($_POST['videoId'])){
$videoId=$_POST['videoId'];
mysqli_query($conn,"INSERT INTO video
(videoId,xx,yy)
VALUES ('$videoId','$xx','$yy')")
or die(mysqli_error($conn));
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'm using jQuery and Ajax to load a bunch of divs into a scrollable div ("letterHolder"):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$(".letterHolder").html(result['letter_array']);
}
});
</script>
</head>
<body>
<div class="letterHolder">
</div>
</body>
</html>
The PHP script retrieves a list of filenames from the database and loads them into letterHolder, so it ends up looking like this:
<div class="letterHolder">
<div class="drag_letter">file1</div>
<div class="drag_letter">file2</div>
<div class="drag_letter">file3</div>
etc.
</div>
Now, I want to make those filename divs draggable, but this is not working:
$(".drag_letter").draggable({
cursor: 'move',
revert: true,
helper: 'clone'
});
It doesn't work if I put the draggable code into the page header, nor does it work if I put the code at the end of the page.
This was working fine before I tried creating the divs using Ajax.
I assume the reason this was working before you were using AJAX, but is not working with AJAX, is because you are calling draggable() with a selector for elements which are not yet in the DOM. If you call draggable() on the elements after receiving the AJAX result and appending the elements to the DOM it should work.
Using jQuery or java script append() function for adding DOM into an element instead of html()
add draggable after appending elements
you should send file names Like file1... file2... as a Json array From server
and rewrite this:
<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$.each(result,function(k,v){
$(".letterHolder").append($('<div></div>').html(v).addClass('drag_letter').draggable({
cursor: 'move',
revert: true,
helper: 'clone'
}));
});
}
});
</script>
I am very new to Jquery and ajax so please be kind.
i am making a request to the server using jquery $.ajax, the ajax pulls the image from the image id stored on the server/database when the user clicks on a thumbnail of which there are loads. All works fine except with the following code i can only click on any of the thumbnails once to load the big picture from the database, after that no other thumbnail works.
Can anyone help?
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
function getimage(data){
var img = new Image();
$(img).load(function(){
$(img).hide();
$.ajax({
type: "GET",
url: "name.php?",
data: "name=" + data,
success: function(){
$("#loader").removeClass("loading").append(img);
$(img).fadeIn("slow");
}
});
}).attr("src", data +".jpg");
}
</script>
</head>
<body>
<h1>Image Loading</h1>
<div id="loader" class="loading">
</div>
<a href="name.php?name=image1" id="image1" onclick="getimage('image1'); return false;"/><img src="image1_th.jpg" /></a>
<a href="name.php?name=image2" id="image2" onclick="getimage('image2'); return false;" /><img src="image2_th.jpg" /></a>
<a href="name.php?name=image3" id="image3" onclick="getimage('image3'); return false;"/><img src="image3_th.jpg" /></a>
try this:
function getimage(data){
var img = new Image();
$(img).load(function(){
$(img).hide();
$.ajax({
type: "GET",
url: "name.php?",
data: "name=" + data,
success: function(){
$("#loader").html(''); // you need to remove the old image
$("#loader").removeClass("loading").append(img);
$(img).fadeIn("slow");
}
});
}).attr("src", data +".jpg");
My jQuery code:
$('.Img').click(function() {
alert('Test');
});
$().ready(function() {
$.ajax( {
type : 'POST',
url : 'Post.php',
success : function(Response) {
$('#Response').html(Response);
}
}
});
My HTML code:
<div id="Response"></div>
<img class="Img" src="blank.gif" /> [Click Trigger]
My PHP code:
echo '<img class="Img" src="blank.gif" />'; [Ajax from response]
why this image does not trigger from AJAX response?
You need to use .live() here, like this:
$('.Img').live('click', function(){
alert('Test');
});
It doesn't work currently because $('.Img') doesn't find the <img> to attach a click handler to...it didn't exist then, not until the ajax call loaded it, .live() will listen for the click appropriately, even if the element is added later.