call ajax function automatically - javascript

I have a dynamically generated post, where i use ajax to find, the no of comments and likes in it. so, i gave a onmouseovr selector and called the js function. but i want it to automatically be called once every 2 seconds. how should i do it?
echo "</div>";
//the div has to be updated every 2-3 seconds.
//but i dont know how. so, i gave a mouseoverfunction.
echo '<div onmouseover="yopahshareloader(';
echo "'" .$id. "',";
echo "'" .$postype. "'";
echo ');" id="'.$id.'_action" style="height:20px;width:100%;margin-bottom:5px;overflow:hidden;">' ;
echo '</div>';

Use setInterval
<script type="text/javascript">
window.setInterval(function() {
yopahshareloader('<?php echo $id; ?>', '<?php echo $postype; ?>');
}, 2000);
</script>

Related

Make new variable in script calling from php

I'm using jquery-3.3.1.min to live update and calling it to my main.php
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#show').load('smoke.php')
$('#show2').load('pids.php')
$('#show3').load('flame.php')
$('#show4').load('panic.php')
}, 2000);
});
/////
I'm echo in php using
$smoke_status = $row['smoke_status'];
$pids_status = $row['pids_status'];
$flame_status = $row['flame_status'];
$panic_status = $row['panic_status'];
$startdate = $row['startdate'];
$stopdate = $row['stopdate'];
echo "<tr>";
echo "<td id='show'></td>";
echo "<td id='show2'></td>";
echo "<td id='show3'></td>";
echo "<td id='show4'></td>";
echo "<td>$startdate</td>";
echo "<td>$stopdate</td>";
echo "</tr>";
but now...i want to make my live update data into a variable in script
how can i declare it.
i'm success calling this
var i = <?php echo $panic_status ?>;
and how can i call
echo "<td id='show'></td>";
echo "<td id='show2'></td>";
echo "<td id='show3'></td>";
echo "<td id='show4'></td>";
into new variable??plsss help and srry for the long question
Hello I do not know what you are actually doing with the code. its so scattered that one cannot easily know where to start
1.) You are displaying a result and i did not see where you are trying to escape those database with htmlentities() or htmlspecialchars() functions against xss attack.
2.) I do not know whether you are still using mysql_connect deprecated functions in your database query. if so please better move it to mysqli or PDO.
3.) i can see you calling simultaneously four php files simultaneously with 2 seconds call. What is it you are trying to achieve. This will cause alot of issues to the server including latency, poor performance and over consumption
of data. If you need a real time update why don't you switch over to nodejs and socket.io.
To answer your question, I have created an ajax example to get you started
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//$('#result').click(function(){
var post1 = 'data to post if any';
$('#loader').fadeIn(400).html('Please Wait. Data is being Loaded');
// assuming that you want query result by posting a variable
var datasend = "alert1="+ post1;
$.ajax({
type:'POST',
url:'smoke.php',
data:datasend,
crossDomain: true,
cache:false,
success:function(msg){
$('#loader').hide();
$('#result').fadeIn('slow').prepend(msg);
}
});
//})
});
</script>
<div id="loader"></div>
<div id="result"></div>
The above script will make a call to smoke.php and display any result contained there in
<?php
$smoke_status = 'I am not smoking';
/* if data is to be displayed in html form, you have to escape it with either htmlspecialchars() or htmlentities() functions to ensure
that XXS attack is not possible. you can read further on how to escape both single, double quotes with it as case may be
*/
echo htmlspecialchars($smoke_status);
?>

Ajax Auto refresh - Table not refreshing

I'm having a serious problem in my code and I can't manage to fix it.
I'm currently using Ajax to setTimeout and get the data from it.
The problem here is that it's not refreshing (if I go the page getdata.php via url it refreshes but I wanted to refresh without going to that page).
This is my current ajax script:
<div id="tableHolder"></div>
<script>
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getdata.php', function(){
setTimeout(refreshTable, 1000);
});
}
</script>
The code in getdata.php is the following one:
<?php
require_once("config.php");
$req2 = mysqli_query($con, 'select user_id, user_name from users LIMIT 5');
while ($dnn = mysqli_fetch_array($req2)) {
echo "<table>";
echo "<tr>";
echo "<td>" . $dnn['user_id'] . "|</td>";
echo "<td>" . $dnn['user_name'] . "</td>";
echo "</tr>";
echo "</table>";
}
?>
I can't find any solution to this problem so my last hope is on you StackOverflow!
The issue is because the $.load method is serving you the cached data. You need to add some random text in url like timestamp
You can use like this
<script>
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getdata.php?time=' + new Date().getTime(), function(){
setTimeout(refreshTable, 1000);
});
}
</script>
Instead of setTimeout you can use setInterval with some querystring
function refreshTable(){
setInterval(function(){
$('#tableHolder').load('getdata.php?v=1')
}, 1000);
}
Settimeout is usually used for one-time execution
Try setInterval instead if you want to repeat calling load function

Stuck in endless loop while creating buttons

I'm trying to create a website, where I can insert products with a button.
So for now I got one button which creates one div as a product box. When the button is clicked it becomes invisible, under this I can see the div now; and under the div, there's the next button which should be able to create one more divs (always the same way).
The problem is that I can't find any solution to do that. I always land in an endless loop.
If you're wondering about the mailer, the idea for the first step is, to send a mail as newsletter for every created product.
Here's my code:
<?php
echo "<form action='index.php' method='GET'>";
echo "<input type='submit' name='insert' id='insert' value='INSERT'>";
echo "</form>";
if ($_GET["insert"]) {
echo " <script language='JavaScript'> ";
echo "";
echo " ";
echo " document.getElementById('insert').style.visibility='hidden' ";
echo "";
echo "</script>";
echo " <div class='article'>";
echo "<h2>product</h2>";
echo "<p>";
echo "EXAMPLE";
echo "</p>";
echo "</div> ";
echo "<form action='index.php' method='GET'>";
echo "<input type='submit' name='ins ert' id='insert' value='INSERT'>";
echo "</form>";
//send mail
$message = "hello TEST!";
for ($i = 0; $i < $z; $i++) {
mail('' . $res[$i] . '', 'Newsletter', $message);
}
}
?>
You are hiding an "id=insert" item, and then creating a second "id=insert" item. So you get 2 identical id, which is not good.
You should "remove" the "id=insert" rather than "hide" it. jquery may help you on that.
(And so you may not need to remove the "id=insert" item, but rather "add" a new div "after" your last product).

(window).load(function() { ... }); making the whole page go white

I have this function that resizes a div on the basis of whether or not its scrollHeight is greater than 175. It worked fine like this:
var this_div = $('#content_' + <?php echo $counter ?>);
var this_div_height = this_div[0].scrollHeight; // 0 refers to the 0th child, i. e. the div itself
if (this_div_height > 175) {
document.write('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
}
The problem was that some generated items which contributed to the div height were not being taken into consideration, not having yet been loaded when the script is run, so I put it inside of a (window).load(function() { ...}); like so:
$(window).load(function() {
var this_div = $('#content_' + <?php echo $counter ?>);
var this_div_height = this_div[0].scrollHeight; // 0 refers to the 0th child, i. e. the div itself
if (this_div_height > 175) {
document.write('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
}
});
...and now what happens is that the content blinks on the page for like a nanosecond and then the whole window is just white.
Your problem is caused by your use of document.write(). After the page has fully loaded and the whole document has been parsed, subsequent calls to document.write() obliterate whatever was there.
You're using jQuery, so you can just use .append() to add the new content.
Instead of document.write() which replaces everything on the page, append to the body:
var newsutff = $('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
$('body').append(newstuff);

javascript variable content in quotes

this is regarding passing arguments to a function in javascript.
This code is not working. Is it because of the _(underscore) in the $l?? if yes, what change should be brought in the code. Thanks in advance. Please not the $l value will be passed to another page using ajax and queried into a database.
<script>
function show(str)
{
var r=str;
alert(r);
}
</script>
<?php
$l=Somethin_nothin_anythin;
echo "<select onChange='show($l)'>";
echo "<option></option>";
echo "</select>";
?>
it should be:
$l="something_nothing_anything":
echo "<select onChange='show(\'".$l."\')'>";
echo "<option></option>";
echo "</select>";

Categories