Develop Reference

select image as blob from mysql and delete from disk after show in page

as the title suggests, I need to view images and then erase them from the disk.
I can export them from the db and have them displayed correctly, but then I stop: either I visualize them or I delete them. I can't do both.
at the end of page, Afer the php code i try this:
<script type="text/javascript">
document.addEventListener('readystatechange', event => {
if (event.target.readyState === "interactive") {
setTimeout(function(){
<?php
$tags = explode('|',$del);
foreach($tags as $key) {
exec ('rm -f '.$path.$key.'.gif');
}
?>
}, 7000);
}
});
</script>
in this javascript if i insert a message it displays it (e.g. hello world) after the full load of the page and after the interval. If I enter the php code it executes it immediately. Why?

I don't know anything about ajax :\
so, how could I modify the script to make those few instructions in php execute after the page has been completely loaded?

I want a div to refresh automaticallywithout refreshing whole page

I have developed a comment system with ajax and its working fine. I want to add a ajax/js code to refresh my time ago div after every 5 seconds so that the time changes while one is on same post.
Please note:
Sir, i just want code to request server to refresh div after a specific time period. I do not want to load page or div but i want contents within that div should be refreshed after a specific period of time.
I'm new in js/ajax and Ii tried this but not working yet
$(document).ready(function () {
setInterval(function () {
$("#showtimeago!").load();
}, 1000);
});
Result I want is:
<div class="p_timeAgo" id="showtimeago"> <?php time_stamp($timePost);?></div>
Can anyone help me to solve that issue?

I don't know what UI you are using, here is for the php(since Jquery is same) you can tune this up for your requirement.
function loadlink(){
$('#showtimeago').load('test.php',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 5000);
Try this:
<div id="showtimeago"></div>
setInterval(function(){
$('#showtimeago').load('test.php');
},5000);
test.php is the page the refresher stand.

Refresh div which includes sprintf

I have two php files. The first is named index.php, the second one is named data.php. I tried to get the contents from the file data.php into index.php. Initially it gave me an error using the include_once statement but I now got it to work with:
<?php $str = sprintf(include_once ("/www/index1.php"));
echo $str; ?>
Now, I want this part to refresh every minute without reloading the complete page.
I tried inserting into index.php the following:
<!-- Div refresh function -->
<script type="text/javascript">
var auto_refresh = setInterval(
(function () {
$("#data").load("/www/data.php"); //Load the content into the div
}), 60000);
</script>
<div id="data"><?php $str = sprintf(include_once ("/www/data.php"));
echo $str; ?></div>
I admit, it looks a bit wrong and guess what, it doesn't work. I this is because it tries to load data.php in de script-part and afterwards I try to include the file again in the < div>-statement. I can't get it to work.
I have looked a various examples but can't find any using the sprintf function. I must admit that my knowledge of java, ajax and or json is not great.
Hope someone can help!

Javascript is a front end script. If you want to load something via ajax, you should know its based on js. While js is based on web browser. So make sure you can access that url from browser first.
You can access /www/data.php from php, but if you want to load it in js, make sure it can be visit from web first. How can you visit your index.php?
If you can visit index.php via http://xx.com/index.php, then change $("#data").load("/www/data.php"); to $("#data").load("http://xx.com/data.php");, you will find it works.
Update: Based on your comment, try $("#data").load("data.php");
Also, you can use developer tools to debug it. If js gets error, you will see it.

You're doing something wrong.
What you need to do:
Create file with needful data (for example data.php).
Create file for loading data-file (for example loader.php). If you are using php (I see you are), you can file_get_contents for data.php and then echo it.
On page, where you want to get your data, use something like this:
JS:
function loadData() {
$("#data-container").load("loader.php", function() {
console.log("Load was performed.");
});
}
loadData(); // load first then refreshing every 1 min:
setInterval(loadData, 60000);
HTML:
<div id="data-container"></div>
So, what all of this doing here?
First, script on your page create request to loader.php;
Second, loader.php executes (I hope your server execute php, huh?) and get content of data.php (so in this context data.php can have any file name extention; data.txt, data.log, etc); then it echo that content;
Third, script on your page get echoed (by loader.php) content of data.php and paste it in your #data-container.
These steps repeat again every 1 min.
Note: If data.php in your context is not a programming code (just some data), you can create just data.html and load it directly in jQuery script. It's not need any php-loader files, etc.

jQuery stops working after ajax loading

some info
I'm working on a webpage that can load data on multiple layouts, so user can choose which one is best. It can be loaded in a list or a cards like interface, and the data is loaded using ajax.
In this page I also have a notifier for new messages that the user received. The ajax function is new, and when page was loaded by the php scripts, the js script (that add a badge with the number of unread messages to a link on a menu item) was working ok.
I'm using HTML5, PHP, jQuery and a mySQL DB.
jQuery is imported onto the HTML using
<script src="https://code.jquery.com/jquery.js"> </script>
So it's a recent version.
the problem
Now, when I load the data onto the page using ajax, the js script won't work anymore. I had the same issue with another js script and I managed to solve it by using the delegate event binder.
But my unread messages updater runs on a time interval, using
<body onload="setInterval('unread()', 1000)">
the unread() js is quite simple:
function unread() {
$(document).ready(function(){
$('#menu_item').load('ajax_countNewMsgs.php');
});
}
it calls a php script which grabs the unread msgs count from the DB and echo into a element that jQuery will point. Hope I'm being clear.
The problem is that I cannot figure out how I would call a timed event using delegate. Without much hope I've tried
$(document).on('ready()','#menu_item', function () {
$(this).load('ajax_countNewMsgs.php');
});
That didn't work.
I read many posts about js stop working after changes in the DOM, but, again, I couldn't figure out a way to solve that, nor found a similar question.
Any help or tips would be highly appreciated.
EDITED to change second php script's name
2nd EDIT - trying to make things clearer
I tried the way #carter suggested
$(document).ready(function(){
function unread(){
$.ajax({
url: 'ajax_countNewMsgs.php',
type: 'GET',
dataType: 'html',
success: function(response){
$('#menu_item').html(response);
},
error: function(response){
//no error handling at this time
}
});
}
setInterval(unread(), 1000);
});
the ajax_countNewMsgs.php script connects to the DB, fetch the unread messages, and echoes the number of unread messages.
If I try to apply the ajax reponse to another element, say, the <body> the results are as expected: at each 1 sec , the body html is changed. So the function is working.
As I said, none of my JS changes the #menu_item. Actuallly this element is part of another php scritp (menu.php) which is imported to the top of the page.
the page structure is this way:
<html>
<head>
some tags here
</head>
<body>
<?php include (php/menu.html); ?>this will include menu with the #menu_item element here
<div id='wrapper'>
<div id='data'>
here goes the data displayed in two ways (card and list like). Itens outside div wrapper are not being changed.
</div>
</div>
</body>
</html>
Even though the elemente is not being rewritten js cannot find it to update it's value.
It's not the full code, but I think you can see what is being done.

$(document).on('ready()','#menu_item', function () {
is an invalid event listener. If you wanted to be made aware of when the DOM is ready you should do this:
$(document).ready(function () {
However I don't think that is actually what you want. Your function unread will fire repeatedly but it attaches an event listener everytime. Instead if you want to make an ajax call every so many seconds after initial page load, you should do something like this (dataType property could be html, json, etc. pick your poison):
$(document).ready(function(){
function makeCall(){
$.ajax({
url: 'ajax_countNewMsgs.php',
type: 'GET',
dataType: 'html',
success: function(response){
//handle your response
},
error: function(response){
//handle your error
}
});
}
setInterval(makeCall, 1000);
});

remove that on your unread function:
$(document).ready(function(){
WHY?
The Document is already "ready" and this document state will only fired 1x - After that the "ready state" will never ever called. Use follwing syntax:
jQuery(function($){

How to refresh a Div every 10 seconds without refreshing the entire page?

I'm working on a website platform that doesn't allow for any server sided scripting, so jquery and javascript are pretty much all I have to work with. I am trying to create a script to work with the site that will update a div that contains an inbox message count every 10 seconds. I've been successful with making the div refresh every ten seconds, but the trouble lies in the page views count. My script is refreshing the whole page and counting for a page view, but I only want to refresh just the one div. An example of the trouble my script causes is when viewing anything on the site that has a page view counter (forum posts, blog posts, ect...), the page views go crazy because of the script refreshing. I'm pretty new to Javascript, so I'm not entirely sure there is a way around this.
What I'm working with is below:
<div id="msgalert" style="display: none"; "width: 100px !important">
You have $inbox_msg_count new messages.
</div>
$inbox_msg_count is a call that grabs the message count, and provided by the platform the site is on. It displays the message count automatically when used.
Then the script that does all the work is this:
<script>
setInterval(function(facepop){
var x= document.getElementById("SUI-WelcomeLine-InboxNum");
var z = x.innerText;
if(x.textContent.length > 0)
$("#msgalert").show('slow');
}, 1000);
facepop();
</script>
<script>
setInterval(function() {
$("#msgalert").load(location.href+" #msgalert>*","");
}, 1000); // seconds to wait, miliseconds
</script>
I realize I've probably not done the best job of explaining this, but that's because I'm pretty confused in it myself. Like I mentioned previously, this code function just how I want it, but I don't want it to refresh the entire page and rack up the page views. Any help is much appreciated.

You might try to look into iframe and use that as a way to update/refresh your content (div). First setup an iframe, and give it an id, then with JS grab the object and call refresh on it.

well your prob seems a little diff so i think submitting a from within the div might help you so ...
$(document).ready(function()
{
// bind 'myForm' and provide a simple callback function
$("#tempForm").ajaxForm({
url:'../member/uploadTempImage',//serverURL
type:'post',
beforeSend:function()
{
alert(" if any operation needed before the ajax call like setting the value or retrieving data from the div ");
},
success:function(e){
alert("this is the response data simply set it inside the div ");
}
});
});

I think this could probably be done without a form, and definitely without iframes (shudder)..
Maybe something like this?
$(document).ready(function()
{
setInterval(function(facepop)
{
var x= document.getElementById("SUI-WelcomeLine-InboxNum");
var z = x.innerText;
if(x.textContent.length > 0)
$("#msgalert").show('slow');
$.ajax({
type: "POST",
url: location.href,
success: function(msg)
{
$("#msgalert").html(msg);
}
});
},1000);
It's not entirely clear exactly what you're trying to do (or it may just be that I'm ultra tired (it is midnight...)), but the $.ajax() call in the above is the main thing I would suggest.
Encapsulating both functions in a single setInterval() makes things easier to read, and will extinguish the 1 second gap between showing the msgalert element, and "re-loading" it.