I have code:
<div id='chatbox-list'></div>
<script>
function Test() {
$.ajax({
type: 'post',
url: '/blabla'
}).done(function (data) {
if (data.length > 0) {
$('#chatbox-list').append(data);
}
});
}
setInterval(Test, 2000);
</script>
date is:
<div id='test'> </div>
Any HTML
<script>
function Name(){
$.ajax()
.....
$('#test').append('blabla');
.....
}
setInterval(Name,1000);
</script>
After adding HTML and Javascript to the div id='chatbox-list', how to make setInterval(Name,1000) and function Name() run accordingly?
Maybe there is some other solution that allows to perform a dynamically added function after a certain period of time?
function Test(){
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
type: 'get',
success: function(response){
$('#chatbox-list').append(`<li>${response.title}</li>`);
}
});
}
$(function(){
setInterval(Test,1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="chatbox-list"></ul>
here is demo how append data with interval. you can do same with post method. just listen it on success callback and append delivered data to dom
Related
Is it possible to get the attribute id from JQuery AJAX generated HTML data?
I have these in my index.php
<script>
$(document).ready(function () {
function viewRooms()
{
$.ajax({
url:"rooms.php",
method:"POST",
success:function(data){
$('#rooms').html(data);
}
});
}
viewRooms();
$('#save').click(function()
{
var room_number = $('#room_number').val();
var room_type = $('#room_type').val();
$.ajax({
url: "save.php",
method: "POST",
data: 'room_number='+room_number+'&room_type='+room_type,
success: function(data)
});
});
});
</script>
<div id="rooms"></div>
and inside rooms.php
<input type="text" id="room_number" />
<input type="text" id="room_type" />
<button id="save" > </button>
The function save button doesn't work from index.php. also with the id attributed to it.
Please help me if it is possible to do that? Thank's a lot.
Wrap save click handler call in a function something like this.
function saveClick() {
$('#save').click(function()
{
var room_number = $('#room_number').val();
var room_type = $('#room_type').val();
$.ajax({
url: "save.php",
method: "POST",
data: 'room_number='+room_number+'&room_type='+room_type,
success: function(data)
});
});
}
and call this function in ajax success.
I have an ajax call which grabs data from a php file that connects to an api. I have a success handler that receives the data from the ajax call and then loads a function from the API library. The issue is, I want the user to click a button and then run the function inside of the success call (using the same data from the ajax call earlier).
I believe my ajax call needs to stay inside the window.onload = function(), it doesn't work if I try to run the ajax call when the user clicks the button.
<html>
<head>
<title>hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.screenleap.com/js/screenleap.js"></script>
<script>
function hello(){
alert("hi");
}
function successHandler(data){
screenleap.startSharing('DEFAULT', data, {
nativeDownloadStarting: hello
});
}
window.onload = function() {
$.ajax({
type: "POST",
url: "key.php",
data: '',
success: successHandler,
dataType: "json"
});
};
</script>
</head>
<body>
<input type="submit" value="submit" id="submit">
</body>
</html>
Please let me know how I can do this, any help would be greatly appreciated.
Update:
so I have tried adjusting my code, but for some reason nothing happens anymore when I click the button. It doesn't even shoot out my console.log confirming I had even clicked the button.
<html>
<head>
<title>hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.screenleap.com/js/screenleap.js"></script>
<script>
var dataFromServer;
function hello(){
alert("hi");
}
function successHandler(data){
dataFromServer = data;
console.log("data from server: ")
console.log(dataFromServer);
}
window.onload = function() {
$.ajax({
type: "POST",
url: "key.php",
data: '',
success: successHandler,
dataType: "json"
});
};
$("#submit").click(function(){
console.log('clicked submit');
if(dataFromServer)
{
console.log(datafromserver);
screenleap.startSharing('DEFAULT', dataFromServer, {
nativeDownloadStarting: hello
});
}
});
</script>
</head>
<body>
<input type="submit" value="submit" id="submit">
</body>
</html>
all the best,
-- 24x7
You can store data to some global variable and on button click use same variable.
var dataFromServer;
function successHandler(data){
dataFromServer = data;
}
jQuery("#submit").click(function(){
if(dataFromServer)
{
screenleap.startSharing('DEFAULT', dataFromServer, {
nativeDownloadStarting: hello
});
}
});
Update:
Instead of window.onload use jquery onload function to populate data.
http://jsfiddle.net/ZGggK/
$(function() {
$.ajax({
type: "GET",
url: "https://api.github.com/users/mralexgray",
data: '',
success: successHandler,
dataType: "json"
});
});
I have the below jquery function to load data from database which works fine, however I would like to show that same data again over the same page, When I do that it doesn't work. it will only shows for the first one. could someone help me out?
<script type="text/javascript">
$(document).ready(function() {
loadData();
});
var loadData = function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "second.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
setTimeout(loadData, 1000);
}
});
};
</script>
<div style='display:inline' id='responsecontainer'></div><!--only this one is displayed-->
<div style='display:inline' id='responsecontainer'></div><!-- I want it to show me the same data here too-->
ID of an element must be unique in a document, use class attribute to group similar elements
<div style='display:inline' class='responsecontainer'></div>
<div style='display:inline' class='responsecontainer'></div>
then use class selector
$(document).ready(function () {
loadData();
});
var loadData = function () {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "second.php",
dataType: "html", //expect html to be returned
success: function (response) {
$(".responsecontainer").html(response);
setTimeout(loadData, 1000);
}
});
};
The ID selector will return only the first element with the given ID
I try to remove elements from my table in my django project, but I would like to have such a removal to be confirmed. Using this article
http://www.developmentwall.com/delete-row-from-html-table-jquery/
I wrote such function:
<script>
function deleteAjax(row_id){
$.ajax({
url: "delete_item/"+ row_id +"/",
type: "POST",
data: {'id':row_id},
success: function (){
if(!confirm('Are you sure you want to delete?')){
ev.preventDefault();
return false;
}else{
$('#my_row_'+row_id).remove();
}
}
});
}
</script>
Unfortunately, despite of the fact that I click that I won't to delete object, the object is removed.
Have you any hints? I suppose that it can be something wrong with ev, but I am fairly new to javascript and ajax and I do not know how to cope with this.
try this:
<script>
function deleteAjax(row_id){
if (!confirm('Are you sure you want to delete?')) { return; }
$.ajax({
url: "delete_item/"+ row_id +"/",
type: "POST",
data: {'id':row_id},
success: function (){
$('#my_row_'+row_id).remove();
}
});
}
</script>
I am using jQuery and Ajax.
My MainFile has the following code:
<html>
<head>
<script src="Myscript.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: 'POST',
url: 'ajax.php',
success: function(data){
$("#response").html(data);
}
});
});
</script>
<body>
<div id="response">
</div>
</body>
</html>
My ajax.php get the sample data
...
MyScript.js has the following
function display (text,corner)
{
}
..
I have Myscript.js. In this, I have a function called display(text,corner). I have to call this function after executing ajax.php.
How do I do it in jQuery for the above code?
Is it possible to decide the order of execution after ajax.php and make call for display(text,corner)?
You should invoke the display function in the callback function of the Ajax Request, like such:
$.ajax({
type:'POST',
url: 'ajax.php',
success: function(data){
display(data, /* your other parameter, corner */); //Invoking your data function
}
});
In the above case, data is the response that is received from ajax.php