This question already has answers here:
How can I "reset" <div> to its original state after it has been modified by JavaScript?
(10 answers)
Closed 6 years ago.
I have a php file which contains a div element with id= containerbox.
<div id=containerbox>
<button id="buttonme" type="button">click me</button>
</div>
<script>
$("#buttonme").click(function(){
jQuery.ajax({
type: 'POST',
url: 'testone.php',
success: function (data) {
response = jQuery.parseJSON(data);
if (response.status == 'error') {
erroroccur(response);
}
}
});
})
function erroccur(abc) {
alert(error);
//here i want something that only Refreshes/Reloads the containerbox
}
</script>
testone.php
<?php
//...something
$response=Array(
"status"=>'error'
);
return json_encode($response);
?>
it contains one function which makes an ajax call and depending on the response recieved it decides if it is an error.Whenever it recieves an error in the response it fires a function which need to show an alert box and reset the Div element to the way it was when i first came to that page.Can this be achieved?
Note: I know nothing will change there but just for the sake of simplicity i have used this example
What about :
// keep a reference to the initial html in your div
var initialState = $("#containerbox").html()
/* ... */
function erroccur(abc) {
alert(error);
// revert the div content to its initial state
$("#containerbox").html(initialState)
}
Related
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 4 years ago.
In the code added here, I pass on value from PHP parameter to JS parameter:
Both parameters are called 'stv'.
I wonder how do I do the exact opposite?
Thanks!
<script>
var stv="<?php echo $stv; ?>";
</script>
send a request with ajax using jquery if using jquery already in document.
If you don't have Jquery added, you can add it ath the end of your html body using a script tag and getting the download adress from google:
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
function ajax(value) {
var x = {
'info': value //data to send can be json or something else
};
$.ajax({
url: 'index.php', //page where to send
type: 'POST', //type of request
data: x, // data to send
success: function(data) { //what happends when request is success
try {
getAjPromise(JSON.parse(data));
} catch (e) {
console.log("error");
}
}
});
}
in PHP you check if there is a $_POST['info'], get the value and do something
This question already has answers here:
Replace content in div after successful ajax function
(2 answers)
Closed 7 years ago.
How can i display the return result after ajax make an request.
So it can be a solution where i can just replace the table value or replace the page without being reloaded
<script>
$(document).ready(function () {
$("#searchform").on('submit', function (e) {
$.ajax({
url: '/home',
type: 'post',
data: {contentSearch: $('#contentSearch').val()},
success: function (data) {
// what should i do here so it replace the page and display
// the result result without being reloaded
},
error: function(){
alert('error!');
}
});
});
return false;
});
});
</script>
Html code ---
<form method="post" id="searchform">
<div align="center" class="col-md-10">
<input type="text" id= "contentSearch" name="contentSearch" >
</div>
<button type="submit" class="btn btn-default" id="submitSearch">
Search
</button>
</form>
and the result or the value should be display is rendering to the twig/html file as chrisvalues
return $this->render('MyBundle:Content:content.html.twig', array(
'chrisvalues' => $chrisvalues,
)
);
The return value can be display in a table or just as a plain html as well. Where it will be replace overtime when we make a request with ajax
Anyone knows any solution to this problem !!
Desperately need some help on this, thanks a lot in advanced
You can try this:
success: function (data) {
$("#divId").html(data);
}
where divId is the id of the div, whose content want to be replaced with the returned data.
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 7 years ago.
im making and update in mysql table when button click, the problem is ajax jquery not working sometimes. It works fine and somehow after x attempts it stop working and stars cancelling my petitions
the problem is after x number of attempts the success part of ajax object is not being used and im getting the STATUS (canceled) from network.
Pass these values to hidden fields. These fields are called through ajax to send data to next-page to update.
<input type='hidden' value="<?echo $costo_sem;?>" class="costosemanal">
<input type='hidden' value="<?echo $fi;?>" class="fechai">
<input type='hidden' value="<?echo $ff;?>" class="fechaf">
echo "<script>
var r = confirm('OK to update, CANCEL to do nothing');
if(r === false){
document.location.href = 'costos.php';
}else{
var costosemanal=$('.costosemanal').val();
var fechai=$('.fechai').val();
var fechaf=$('.fechaf').val();
$.ajax({url:'UpdatePage.php?costosemanal='+costosemanal+'&fechai='+fechai+'&fechaf='+fechaf,cache:false,success:function(result){
alert('Updated');
}});
}
</script>";
Add one UpdatePage.php to update your query.
UpdatePage.php
<?
$costosemanal=$_GET['costosemanal'];
$fechai=$_GET['fechai'];
$fechaf=$_GET['fechaf'];
$update = "UPDATE tbl_costos SET costo_semanal = '$costosemanal' WHERE fechai = '$fechai' AND fechaf ='$fechaf' ";
//Write Mysql Command To Update This Query
?>
$('.removeItem').click(function (event) {
if (confirm('Are you sure you?')) {
$.ajax({
url: 'myUrl',
type: "POST",
data: {
// data stuff here
},
success: function () {
// does some stuff here...
}
});
}
});
Use above code inside url there must be php page url...
I'm attempting to learn to make use of AJAX. I removed most of the complexity of the program to just isolate the problem I'm having. So I have a text area and beneath that a div that has "STATUS" printing out. On button submit using AJAX I want to change the word "STATUS" to the value of my variable, status, which in this case should be "SUCCESS".
What happens instead when I click is it prints out the word STATUS. It appears like nothing is happening when I click my submit button. Any ideas what I am doing wrong?
$(document).ready(
function () {
$('#sub').live('click',
function () {
url = 'http://whatever.php'
success = "Success!"
$.ajax({
url: url,
type: 'POST',
data: null
dataType: 'xml',
async: false,
success: function (data, statusText, reqObj) {
status = $(data).find('status').text()
if (status == 'SUCCESS') {
$('#succ').html(status)
} //if( status == 'SUCCESS' ) {
else {
msg = $(data).find('msg').text()
alert('NOT ADDED: ' + msg)
return
} // else
} //function()
}) //$.ajax( {
} /* function */ ) //live(
} //function()
) //$(document).ready
HTML:
<div id="buttonArea">
<textarea name="txtarea" cols=80 rows=30>>THIS TEXT BOX
IS USED FOR THINGS I WILL WORK ON LATER
</textarea><br/>
<input type=submit value='Submit Textbox Info!' id='sub'>
</div>
<div class="float-left" id='succ'>STATUS</div>
I think your find is empty. Try to replace with
status = $(data).text()
I'm not sure you use .find() the right way. it's used on html elements and expects to be passed a jquery selector or element or jquery object.
here's more details http://api.jquery.com/find/
what you want is to get your response text, so assign your ajax call to a variable:
xmlhttp = $.ajax({
then on success use your response text:
status = xmlhttp.responseText;
Your code works fine for me, on the proviso that:
(i) you add the missing comma from the line:
data: null,
(ii) the content-type returned by your php handler is text/xml
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery refresh if PHP file echo's 'true'
I have the following div on my index:
<div id='tv'> <? include 'tv.php' ?> </div>
I have a script that changes content in tv.php and returns 'true' at a certain time called checktime.php.
I'm trying to have jQuery in the index header to check the PHP page every 10 seconds and if checktime.php returns 'true' jQuery 'refreshes' the content of the #tv div. This is the code I currently have but it's not working. It seems to check checktime.php but the div doesn't automatically refresh.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval("checkTime()", 10000);
function checkTime(){
$.ajax({
url: 'checktime.php',
success: function(refresh){
if($.trim(refresh) == "true"){
$('#tv').load('tv.php');
}
}
});
}
});
</script>
See if this works better for you, you need to adjust SetInterval to work with jQuery:
$(document).ready(function(){
setInterval(function() {
$.ajax({
url: 'checktime.php',
success: function(refresh){
if($.trim(refresh) == "true"){
$('#tv').load('tv.php');
}
}
});
}, 10000);
});