Refresh page after Ajax call - javascript

I have two pages, on the first page you can select an item with a <select> </select>. When you select an item, a form is automatically displayed through an AJAX Call. In this form, data is automatically loaded from a mysql db in a <textarea> </textarea>. The moment you submit your form, I want the new data to be added to the <textarea> </textarea> I just can't manage this, who can help me?
$(document).ready(function () {
$("#btnAdd").click(function (e) {
/* Retrieving value from textboxes */
var besproken = $('#besproken').val();
$.post("save.php", {
besproken: besproken,
}, function (data) {
$("#autoSave").html("Coaching ");
$("#btnAdd").attr("disabled", true);
});
return false;
});
});

If all you want to do is insert the data into the textarea just use jQuery to selected the element $("textarea") then call the text method and pass in your data .text(data). The result call will look like $("textarea").text(data)
$(document).ready(function() {
$("#btnAdd").click(function(e) {
/* Retrieving value from textboxes */
var besproken = $('#besproken').val();
$.post("save.php", {
besproken: besproken,
}, function(data) {
$("#autoSave").html("Coaching ");
$("#btnAdd").attr("disabled", true);
$("textarea").text(data);
});
return false;
});
});

You can take a div. When you click submit you will get a ajax response, load this inside the div.
success: function(data){
$("#status").load("url of the php-file");
or
$("#status").html(data);
}

Related

How do I make the ajax run?

When I add the ajax it only runs once.
I try that when I enter a letter in the search engine or change a select field, it sends me the new search to display it on the screen.
formMenu is a form containing a select and an imput text.
$('#formMenu').on('keyup change',function() {
$.ajax(
{
url: '/calendar',
success: function( data ) {
$('body').html(data);
}
}
);
});
You can Try using the below.
$(document).on('keyup change', '#formMenu', function() {
// Your Ajax Call here
})
You instance of #formMenu is not existing after you replace the body even if the same element exists in the new body its still a different instance.
You have to register the listener on the highest parent that is not replaced (in this case the body):
$("body").on("keyup change", "#formMenu", function() {
//ajax call
});

Why returned value from AJAX disappears almost instantly?

this is my server-side code:
modify_emp.php
<?php
echo $_POST[id];
?>
And this is my Javascript in my html page:
<script>
$(document).ready(function () {
var alreadyClicked = false;
$('.element').hover(
//mouseenter function
function(){
$('.element').click(
function(){
$(this).css("color","blue");
var objName = $(this).attr('name');
var objColumn = $(this).attr('id');
if(!alreadyClicked){
alreadyClicked = true;
$(this)
.prepend('<form method="POST" class="newInput"><input type="text" name="newInput" style="width:140px"></input></form>');
var elemento = $(".newInput");
var position = elemento.position();
$(".newInput").css({
'position': 'absolute',
'top': position.top + 15,
'opacity':0.9,
'z-index':5000,
})
.focus();
//on enter keypress
$(document).keypress(function(e) {
if(e.which == 13) {
$.ajax({
url: 'modify_imp.php',
type: 'post',
data: { id : objName, column : objColumn },
success: function(data, status){
$("#debug").html(data);
}
});
}
});
} //if (!alreadyClicked) end
}); //end mouseenter function
},
//mouseleave function
function () {
alreadyClicked = false;
$(this).css("color","red");
$(".newInput").remove();
}
); //end .hover
});
The debug is a <div id="debug"> </div> at the end of my html page where i want to show my response from server. When i press 'ENTER' I can actually see the value for 0.1s inside that div, but then it disappears.
I already tried to pass the return value to a local or global variable but it didn't work.
For some reason the value inside response is lost after 0.1s, even if i pass it to another variable elsewhere.
Can someone explain me why and how can i "store" the server response?
EDIT: Just edited with my entire <script>
Since you see the result momentarily, I'm going to hazard a guess that you have a form element on your page and when you hit return, it's actually submitting the form. You briefly see the result of the ajax operation and then your form submits causing the page to reload as a new blank page. This is a common issue and always has these same symptoms.
You can either remove the form element or block the default submission of the form with javascript.
If you show us more of your actual HTML, we could help more specifically with how to prevent the form from submitting.
You can solve this by calling the function in the form tag i.e,
<form action="javascript:AnyFunction();">
your code goes here
.
Another way would be to assign a BUTTON to trigger the ajax, and set the button outside of the FORM

How to disable and enable all the buttons with same class present on form on AJAX function call in following scenario?

I've multiple buttons with same class called "normalbtn". If user clicks on any one of these button AJAX function is called. I want to disable all the other buttons having class "normalbtn" disbaled while the AJAX request processes.
When the success response comes from the request all the buttons with class "normalbtn" should get enabled.
How should I achieve this by making necessary change in following function code?
function change_value(data_url, op, id, value) {
var data_value = value;
$.post(data_url, {'op':op, 'id':id, 'value':data_status }, function(data) {
if(data_value=='0') {
var value = '1';
$('#data_value_'+id+' button').text("On");
} else {
var value = '0';
$('#data_value_'+id+' button').text("Off");
}
$('#data_value_'+id).attr('onClick', "change_value('"+data_url+"', '"+op+"', '"+id+"', '"+value+"');return false;");
});
}
Thanks in advance.
Disable it before the post and enable back on success.
$('.normalbtn').prop('disabled', true);
$.post(data_url, {'op':op, 'id':id, 'value':data_status }, function(data) {
/// on success
$('.normalbtn').prop('disabled', false);
});
EDIT:
instead of attr('onClick') way, try using the 'data' attribute http://api.jquery.com/data/

JQuery submit select field on change, ajax results

in my rails app, I have a select field by itself in a form. When the field changes I would like it to submit the form, and remotely retrieve the results.
Here is my current code (EDIT - this part works, I'm trying to add more to it):
$(function() {
$("#statusFilter").live("change", function() {
this.submit();
});
});
In a different part of the app I have the following, for a hyperlink, when clicked, returns the link remotely. So I'd like the same effect for the above form.
$(function() {
$("#posts_container th a").live("click", function() {
$.getScript(this.href);
return false;
});
});
here is another example of how it works with a search form
$("#dash_search input").keyup(function() {
$.get($("#dash_search").attr("action"), $("#dash_search").serialize(), null, "script");
return false;
});
The content I'm trying to remotely refresh lives in the posts_container
I personally wouldn't use a form around the select field in this instance if you are not using the form to house any other form elements.
From what you have said it looks like you are trying to achieve the following:
A user changes the select field.
The new value in the select field is then used to update the posts_container field.
If I have this correct I would code the following:
Select Field
<div>
<select id="statusFilter">
<option value="1">Option 1</option>
<!-- Other options... -->
</select>
</div>
JavaScript
<script type="text/javascript">
$(document).ready(function() {
$("#statusFilter").change(function() {
// Possibly show an ajax loading image $("#ajax_loading").show();
$("#posts_container").load("somepage.php", { value: $(this).val() }, function() {
// Do something to say the data has loaded sucessfully
// Possibly hide the ajax loading image $("#ajax_loading").hide();
});
});
});
</script>
I don't know if that helps or is on the right lines, but let me know and I will try and help further if not.
Try this
$(function() {
$("#statusFilter").live("change", function() {
//$(this).closest("form").submit();
var $form = $(this).closest("form");
$.post( {
url: $form.action,
data: $form.serialize(),
success: function(){ //Write code here to handle on success }
});
});

Remove html elements added dynamically with JQuery

In my html page, I have a select with some options.
When selecting an option, an ajax call is fired passing the option's value to a php script, which returns an html fragment (another select) with a certain id that is appended to the page.
When the user selects another option from the first select, the event is fired again, the ajax call is executed and another html fragment (with the same id) gets appended to the page.
I want that, if the event is fired a second time, the appended element is removed form the page before appending the new one.
At the moment I'm using this code:
$(document).ready(function() {
$("#id_serie").change(function() { //#id_serie is the if of the first select
if ($("#id_subserie_label")) { //#id_subserie_label is the id of the html element returned by the ajax call
console.log("Removing");
$("#id_subserie_label").empty().remove();
}
var url = 'myscript.php';
var id_s = $(this).val();
$.post(url, {id_serie: id_s}, function(data) {
$("#id_serie").parent().after(data);
});
});
});
This is not working though, the html element returned by the second ajax call is appended after the element returned from the first call (because the element with id #id_subserie_label is not in the page when the script is loaded?).
How can I achieve what I need?
You're very close.
Just change if ($("#id_subserie_label")) to if ($("#id_subserie_label").length):
$(document).ready(function() {
$("#id_serie").change(function() {
if ($("#id_subserie_label").length) { // <=== change this line
console.log("Removing");
$("#id_subserie_label").empty().remove();
}
var url = 'myscript.php';
var id_s = $(this).val();
$.post(url, {id_serie: id_s}, function(data) {
$("#id_serie").parent().after(data);
});
});
});
See The jQuery FAQ: How do I test whether an element exists?.
This is because, as Ivo points out:
$("#id_subserie_label") is an object, and objects always evaluate to true.
As per Andy E's comment, you can simplify your code to this, if you don't need the console.log() call:
$(document).ready(function() {
$("#id_serie").change(function() {
$("#id_subserie_label").empty().remove();
var url = 'myscript.php';
var id_s = $(this).val();
$.post(url, {id_serie: id_s}, function(data) {
$("#id_serie").parent().after(data);
});
});
});

Categories