I'm using $().post and php to change the contents of a <textarea>.
The script is succeeding - firebug clearly shows that the text in between the textarea tags has changed, and my little alert fires.
The user, however, doesn't see the changes. In Firefox the change doesn't occur at all, and in IE, the textarea updates up to 10 seconds late.
Here's the jquery I'm using:
$(document).ready(function() {
$('#pv_list li:first').addClass('hilite');
$("input[name='db_entries']:first").attr('checked', 'checked');
$("input[name='db_entries']").click(function () {
$.post("changeEntry.php", {post: $(this).val()}, function(data) {
$("textarea").text(data);alert('done');
});
$('#pv_list li').removeClass('hilite');
$(this).parent().addClass('hilite');
});
});
At first I thought it was because the page didn't validate, but it validates xhtml transitional.
The thing that's really bugging me is I had it working earlier and can't figure out what I changed.
Set .val() instead of .text()
Stackoverflow Archive:
Set Value of Textarea in jQuery
Insert text into textarea with jQuery
How to retrieve the value of a textarea with Javascript
Appending input-value to textarea-value
Have you tried using val() to set the value of the textarea instead of text()?
$.post("changeEntry.php",{post: $(this).val()},
function(data) {
$("textarea").val(data);
alert('done');
});
Wouldn't it be easier to use the load() function?
$("input[name='db_entries']").click(function () {
$("#outputarea").load("?", {"paramName":this.value});
});
I'm not sure, but one possibility is that you should do:
function(data){
$("textarea").attr("value",data);
alert('done');
}
Related
I have the following code
<html>
<head>
//included all jquery related stuff ..not shown here
</head>
<body>
<button id = 'btn' />
<div id = 'ct'>
<?php echo file_get_contents('my_ajax_stuff.php'); ?>
</div>
</body>
<script>
$('.datepicker').datepicker({dateFormat: "dd-mm-yy"});
$('#btn').click(function() {
$.ajax({
type: "GET",
url: "my_ajax_stuff.php" ,
success: function(response) {
$('#ct').html(response);
/*added following line to solve this issue ..but not worked*/
//$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"});
} ,
error: function () {
$('#ct').html("Some problem fetching data.Please try again");
}
});
});
</script>
</html>
The page
my_ajax_stuff.php
contains a jquery ui datepicker with class = 'datepicker'.On the first load the datepicker works.But when I click on the button to reload it again , the contents are replaced with new contents.But the datepicker is not working.I have tried initialising the datepicker inside the ajax success handler ,as you see.But it also failed.What is the issue.How can it be solved???
You need to reinitialize the date picker in Ajax success
$('.datepicker').datepicker({dateFormat: "dd-mm-yy"});
$('#btn').click(function() {
$.ajax({
type: "GET",
url: "my_ajax_stuff.php" ,
success: function(response) {
$('#ct').html(response);
$( "#datepicker" ).datepicker();
/*added following line to solve this issue ..but not worked*/
//$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"});
} ,
error: function () {
$('#ct').html("Some problem fetching data.Please try again");
}
});
});
The answer you are looking for may be similar to this question:
jQuery datepicker won't work on a AJAX added html element
You're replacing the datepicker element in the DOM with the ajax response.
The reason this works for the first time is that PHP renders the my_ajax_stuff.php on first load already in the HTML so it becomes available to jQuery in the DOM.
// do this once the DOM's available...
$(function(){
// this line will add an event handler to the selected inputs, both
// current and future, whenever they are clicked...
// this is delegation at work, and you can use any containing element
// you like - I just used the "body" tag for convenience...
$("body").on("click", ".datepicker", function(){
$(this).datepicker();
$(this).datepicker("show");
});
});
I came across this question because I was having the same problem as OP.
Mooed Farooqui's recommendation to reinitialize in Ajax success worked, but not initially.
Ended up that I was also calling the datepicker function in my equivalent of my_ajax_stuff.php. After I took that out it worked perfectly on button reload and postbacks. Hope this helps someone that stumbles upon this old question...
Call your picker inside .ajaxComplete function.
$(document).ready(function () {
// setup picker here...
});
$(document).ajaxComplete(function() {
// setup picker here...
});
Here is a link
This may be a primitive solution, but I found that If I have in my main document a function MakeDatePicker and I used it in the OnChange portion of my input, I was able to make any object, ajax, or otherwise, turn into a date picker before, and after an ajax call.
Here is the function and the call. (please note, I have ColdFusion # functions, as this is a return on a coldfusion query with a CFOutput.)
<td><input type="date" class="EstDeliveryDatePicker" chassis="#chassis#" value= "#DateFormat(EstDelivery,'mm/dd/yy')#" onclick="MakeDatePicker(this);"></input></td>
here is the function at the top of my page:
function MakeDatePicker(obj)
{
$(obj).datepicker({
changeMonth: true,
changeYear: true
});
$(obj).datepicker("show");
}
like I said, its crude, but it works.
I was having an issue with the way my tables would display their sorts. I have it so when you enter the page, you have 1 field that you can click on to select a date. If you click on one of the headers, it would sort SQL command, and re-display the table. This would break the .datepicker function. So I change it to not read off the class, but make the click, trigger the function. the problem with trying to get it to run on the .class was it would initialize after the table was redrawn and lose the scope of the DOM.
I've got a dynamic page which I'm loading from an external PHP file when the booking link is clicked.
My issue is the jQuery code I need to run straight after it sometimes tries to execute before the PHP page is fully loaded (the follow and remove parts specifically). So when I try load the div, jQuery works sometimes, and other times not.
From what I've seen on other examples $(document).ready(function() is supposed to prevent the jQuery executing until the page is fully loaded, however since I'm loading a specific div (content) and not the entire page it seems to not work?
$(document).ready(function(){
$(document).on('click', '.booking', function (){
$('#content').load('calendar.php');
$.getJSON(url,data, function(data) {
$.each(data, function(index, data) {
$("#blocksid"+data.slot_id).css("background-color","#009cd0");
$("#follow"+data.slot_id).hide();
$("#remove"+data.slot_id).show();
});
});
return false;
});
});
Thanks in advance for any assistance!
To achieve what you are expecting in a predicable way you should run dependent javascript code
after loading content to div. Just create a call-back function for load method and have your dependent code inside it.
$('#content').load("calendar.php", function() {
//put the code here, that you need to run after loading content to above div
});
You need to set:
$.ajaxSetup({ async: false });
and then turn it back on by:
$.ajaxSetup({ async: true });
or use
$.ajax({
async:false
});
I've this script:
<script>
$(document).ready(function() {
$('#signUpForm').submit(function() {
$.ajax({
type: 'POST',
url: "process.php",
data: $("#signUpForm").serialize(),
success: function(data)
{
$('#errors').show();
$('#errors').append(data);
}
});
return false;
});
});
</script>
It displays errors from php script. And right now every time I click submit button, new errors are added to old ones. I wonder, is it possible to reset old errors and show just new, after I click submit button?
Use $('#errors').html(data); instead of $('#errors').append(data);, When you use .append(), you add to the content you already had. .html() replaces the content.
Another alternative might be to empty first and then append. Like $('#errors').empty().append(data);
I wonder why do you have $('#errors').show();? If it was hidden first, maybe better to put .show() after the .html() / .append()`
Use $('#errors').empty().append(data);
I am implementing the search functionality through ajax jquery, though I am new in this. I have done that by using keyup event. Whenever type something, according to that letter(s), my searching list has been coming. But thing is that, I am not getting any record when refresh the page. If I search something then only I am getting record and if in that position I delete all the texts typed over the search field, then the correct list of records are coming, but not initially.
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("user-account-other.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
<div id="search_results"></div>
Now please tell me how can solve this issue.
Put ajax_search() funcion in on onload of document and also on blur of a text box element then it will work perfectly
Im not 100% sure what you're asking. I'd be happy to update this answer with some more information once I can understand the problem. I did, however, want to show you how to better streamline your code.
See: http://api.jquery.com/load/
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
function ajax_search(){
var url = "user-account-other.php?search_term=" + $("#search_term").val();
$("#search_results").load(url, function(){
//Ajax Load is Done
}).show();
}
I have some input like:
'<input type="text" name="display-count" class="display-count" value="23" autocomplete="off" readonly="readonly" />';
And I'm using this jQuery code to remove the value it has and replace it with another one:
var count = $('form.user-count-form').find('.display-count');
$(count).val('');
$(count).load("admin/user-count.php");
But the new value it isn't loaded. I have tried some other ways like:
$(count).val().load("admin/user-count.php");
or
$(count).val(load("admin/user-count.php"));
But didn't work as well. How do I do what I want ?
You need to use the JQuery get method here. You are improperly calling the script from your server and therefore, no call is actually firing and no data is being returned. I'm assuming that the value you are getting is a single string of either text or numbers.
the question is a bit vague so I'm not sure why you have the initial value set at 23 and I'm also not sure when you want to change the value so I am going to show you how to do it upon the dom being ready using the $(document).ready method.
$(document).ready(function(){
$.get('admin/user-count.php', function(data){
$('.display-count').val(data);
});
});
depends of what your script returns
you can do it so, for example:
$.ajax({
url: 'admin/user-count.php',
success: function( data ) {
$(count).val(data);
}
});
In additional you can return you user-count in JSON format, using php-function json_encode()
why dont your just try this
$('input.display-count').load("admin/user-count.php);
or try this onLoad of your HTML doc
$.get('admin/user-count.php', function(response){
$('input.display-count').val(response);
});
.load() will return the Html Contents to matched Element ,it wont set any value. Better you can use $.get or $.post or $.ajax
$.get('admin/user-count.php', function(resultdata){
$('input.display-count').val(resultdata);
});
or
$.ajax({
url: 'admin/user-count.php',
success: function( resultdata ) {
$(count).val(resultdata);
}
});