We Keep Coding

Javascript functions keeps executing even after updating the DIV

I have certain content that gets updated using ajax on that Id, for example, let's suppose I have a complete main page and inside the body I have this code:
<div id="content">
<button onclick="update1()"></button>
<button onclick="update2()"></button>
</div>
<script>
function update1(){
$.ajax({
url:"Page1/index.html",
type:'GET',
success: function(data){
$('#content').html((data));
}
});
}
function update2(){
$.ajax({
url:"Page2/index.html",
type:'GET',
success: function(data){
$('#content').html((data));
}
});
}
</script>
<script src="js/script.js"></script>
And the index.html of Page1 contains some code like this:
<button onclick="update1()"></button>
<button onclick="update2()"></button>
<div id="page1"> .....</div>
And the index.html of Page2 contains some code like this:
<button onclick="update1()"></button>
<button onclick="update2()"></button>
<div id="page2"> .....</div>
And the script.js contains some code like this:
$(document).ready(
function() {
setInterval(function() {
$.ajax({
url: "someapi",
type: "POST",
dataType: "json",
success: function (result) {
console.log(result)
}
});
}, 2000);
});
What I want to do is when the button is pressed to call Ajax that gets the index.html from Page1 and puts it inside the id content, run a script.js this script only executes when the id page1 exists, I have found this trick from this answer, by using an if with jQuery for example if($('#page1').length ){my sj code} the javascript code runs only when that id exists, but unfortunately when I click the button to get the Page2 that has another id page2 that code keeps running, is there a way to stop this js code when that div is updated???

The function is not stopping because the interval will not stop firing unless you clear it, using clearInterval() function.
just put all your JS code in one file like this:
$(document).ready(function() {
var the_interval = setInterval(function() {
$.ajax({
url: "someapi",
type: "POST",
dataType: "json",
success: function (result) {
console.log(result)
}
});
}, 2000);
function stopTheInterval(){
clearInterval(the_interval);
}
function update1(){
$.ajax({
url:"Page1/index.html",
type:'GET',
success: function(data){
$('#content').html((data));
}
});
}
function update2(){
$.ajax({
url:"Page2/index.html",
type:'GET',
success: function(data){
$('#content').html((data));
stopTheInterval(); // we stop the first interval
}
});
}});
what I did here is saved the interval number in a variable, and created a new function to clear it.
next, all I did was put my new function in your update2() function, so once I get the data back I clear the interval and stop the repeating function.

script.js
dont use setInterval.
function some_function(){
$.ajax({
url: "someapi",
type: "POST",
dataType: "json",
success: function (result) {
console.log(result)
}
});
}
And call above function in update1.because you want it only when page1 updated
<script>
function update1(){
$.ajax({
url:"Page1/index.html",
type:'GET',
success: function(data){
$('#content').html((data));
some_function() // call function here
}
});
}
function update2(){
$.ajax({
url:"Page2/index.html",
type:'GET',
success: function(data){
$('#content').html((data));
}
});
}
</script>

Try using update1().stop()
in starting of update2 function

my ajax results are attached to html then disappears

<script type="text/javascript">
function login(id){
var dataString = 'Id='+ id;
$("#infos").show();
$("#infos").fadeIn(900).html('Please wait... <img src="dashboard/images/loading.gif" />');
alert(id);
$.ajax({
type: "POST",
url: "ajax-login.php",
data: dataString,
cache: false,
success: function(data){
$("#infos").hide();
alert(data);
$('#info').html(data);
$("#info").show();
}
});
}
</script>
<p class="help-block redtext" id="infos" ></p>
<div id="info"></div>
Above is my code and apparently when i attach the results to the div with id='info', they stay there for like 2 seconds then they disappear, the php script that loads data loads very well and it actually shows but it doesnt stay, it gets lost after 1 or 2 seconds, please help

Get data from baseurl with ajax

I want to send information to the screen id that information sent to it by the echo. I get this interaction takes place via ajax would like to receive information from the entire screen again displays. Please help
$(document).ready(function(){
$('#button').click(function(){
var id = $(this).attr('id_1');
$.ajax({
url:'get.php',
type: 'get',
data:{id:id},
success: function(data){
//alert(data);
$('#result').html(data);
}
});
});
});
<body>
<?php if(isset($_GET['id'])){echo $_GET['id'];}?>
test
<div id="result"></div>
after result
20
<a>test</a>****------------------------------>Is repeated
<a>test</a>
but i want just this result
20

Change you type as GET in AJAX
$('#result').empty();
$.ajax({
url:'get.php?id='+ id,
type: "GET",
//data:{id:id},
success: function(data){
//alert(data);
$('#result').html(data);
}
});
});

Try this. It will displays the output as you said.
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(){
var id = $(this).attr('id_1');
$.ajax({
url:'get.php',
type: "get",
data:{id:id},
success: function(data){
$('#result').html(data);
}
});
});
});
</script>
<div id="result">
test</div>
This is get.php
<?php if(isset($_GET['id'])){echo 'hi';}
?>
if you want exit:20 as output, then change get.php as
<?php if(isset($_GET['id'])){echo 'exit : '.$_GET['id'];}
?>

Jquery : add inner html to dynamically generated div

In the below code while try to change the inner html of the dynamically geneted div , the inner html dosent change.
$.ajax({
url: 'xxx.xxx',
beforeSend: function() {
$('#scroll_items').append('<div class="list_item more_content" align="center"><img src="loader.gif"></div>');
},
success: function(data) {
$('#scroll_items div:last').html("hai to all");
}
});
The html part
<div id="scroll_items">
<div class="list_item1">
Scroll beyond this container to automatically load more content
</div>
<div class="list_item">
[ List Item 2 ]
</div>
</div>
</div>

just remove one extra curly brace, it may work.
$.ajax({
url: 'xxx.xxx',
beforeSend: function() {
$('#scroll_items').append('<div class="list_item more_content" align="center"><img src="loader.gif"></div>');
},
success: function(data) {
$('#scroll_items div:last').html("hai to all");
}
});
try this.
or try
success: function(data) {
setTimeout(function(){
$('#scroll_items div:last').html("hai to all");
},100);
}

loading a element of same file through jquery

I have a file data.php, when a user clicks update the database is updated in background with jquery but in response i want to reload the particular table whose data was updated.
my html:
<div id="divContainer">
<table id="tableContainer" cellspacing='0' cellpadding='5' border='0'>
<tr>
<td>No.</td>
<td>Username</td>
<td>Password</td>
<td>Usage Left</td>
<td>%</td>
</tr><!-- Multiple rows with different data (This is head of table) -->
my jquery:
$('#UpdateAll').click(function() {
$.ajax({
type: 'post',
url: 'update.php',
data: 'action=updateAll',
success: function(response) {
$('#response').fadeOut('500').empty().fadeIn('500').append(response);
$('<div id="divContainer" />').slideUp('500').empty().load('data.php #tableContainer', function() {
$(this).hide().appendTo('#divContainer').slideDown('1000');
});
}
});
});
Everything is working fine the database is getting updated and in success #response is getting loaded with success message but the table is not refreshing.

You already have a div with an id of divContainer but you are creating this element again
$('<div id="divContainer " />').slideUp....
you need
$('#divContainer')
.slideUp('500')
.empty()
.load('data.php #tableContainer', function() {
$(this).slideDown('1000');
});

$('#UpdateAll').click(function () {
$.ajax({
type: 'post',
url: 'update.php',
data: 'action=updateAll',
success: function (response) {
$('#response').fadeOut('500').empty().fadeIn('500').append(response);
$('#divContainer').slideUp('1000').load('data.php #tableContainer', function () {
$(this).hide().appendTo('#tableContainer').slideDown('1000');
});
}
});
});