jQuery not replacing some text - javascript

I've been working on a project that involves ajax; it's a planner for school assignments. When a button is pressed, it's supposed to change the text inside of 31 <textarea>'s (and one <span>) based on data it gets from the server. The thing is, textareas that have been changed after the last time the window was refreshed don't change. I've looked over the JSON sent between the server and the webpage and vice-versa, and concluded that the bug is in the success function of the ajax call. Here's the code:
success: function(data) {
$("span#date").text(data['date']);
$("#assignments").find("textarea").each(function() {
$(this).text("");
$(this).html(data[$(this).attr("id")]);
});
console.log(data); // I was using this to see if the data received from the server was correct
}
Thanks very much in advance for any help.

you should use .val() for textarea as it's basically an input.
You can't really have html elements inside it.

Try $(textarea).val() instead of .html(). I noticed that html only works the first time the textarea is rendered.

Related

Callback Function .html(), and .val() together possible?

back again! been a while.
So this is my question.
I have a datatable set up that gets the information from the database and shows this in a modal (bootstrap4).
That works fine by the way, but now I wan't to add a dropdown option.
This dropdown needs to have information that is stored in the database (just one table with all the rows).
success:function(data){
$('#Modal').modal('show');
$('#Id').val(data.id);
$('.number').html("<select><option>".val(data.number)"</option></select>");
$('#skills').val(data.skills);
$('.modal-title').html("<i class='edit'></i> Edit ");
$('#action').val('Data');
$('#save').val('Save');
}
as you can see I tried to do this little trick but sadly it didn't take so I was wondering if something like this is even possible?
Thanks so much for the help/info.
Assuming that your modal already contains a select box in a .number div with several options in it then the following would add the extra option into it, generated from the data object:
$('.number select').append(`<option value="${data.number}">${data.number}"</option>`);

Updating multiple areas with ajax

I've started learning ajax and javascript recently, and still getting a handle on it. But I have a simple goal I'm trying to achieve, and I'm half way there.
For example. I am working on the ability to manage bookmarks saved by one user to be used by other members. I have the code built where I can add, edit, and delete the item live on the page. But how I learned how to do the edit part is a 'click the field area' to start the edit, then 'click out of the field area', to finish the update. I'd really like to change that to a way to click a button to submit the edit.
Also on the page it has a "View Bookmark" button right next to the delete option, but I am not sure how to update that link when I update the text area of it without refreshing the page.
So essentially I want to learn a more efficient way to do live updates via ajax, and then when the update is completed, update all the instances of that same item on the page (which is only two areas).
Any help would be greatly appreciated.
I can post my original code but I think I might be better to learn from someone who knows better. lol
This is a generic question so I will answer generic answer.
If you have, for example, 2 divs
<div id="area1"></div>
<div id="area2"></div>
And you want to call the server and get 2 data's for each div, So it will looks like this: (I'm using jQuery for the example..
$.ajax({
url:'server_url',
method: 'post',
success: function(data) {
$('#area1').html(data.objForArea1);
$('#area2').html(data.objForArea2);
}
});
The JSON that return from the server (for example)
{
objForArea1: '<div class="list-item">item 1</div>...'
objForArea2: '<div class="list-item">item 1</div>...'
}
So you read the response from the object that return from the ajax call, then you put the data wherever you want.

Asynchronous searching with AJAX and Jquery

I have a page I'm building which is powered primarily with AJAX. I want the searching on the page to be asynchronous so that as the user types, the search results change on the fly. I was able to make this work somewhat by sending an AJAX call on keyup from the text box, and it works well in Chrome, FF, etc.
The only problem I'm having is in IE7. The page starts to get really slow as you type, so I'm assuming that perhaps the function to call the AJAX is being opened several times without being closed, causing the page to get slow. Is there an easy way to do this where I can basically end the current AJAX call if another key is pressed? Or is there maybe some other reason that IE could be slow?
The general code is:
$('.search_input').keyup(function(e) { make ajax call and populate results }
Thanks in advance for your help.
Hmm...I have something just like this and I tested it out in IE7 without receiving any slowdowns. Here's what my code looks like:
$("#key").keyup(function(event) {
if(event.which != '13') {
$.get("hash.php", {key: $("#key").val()}, function(hashes) {
$("#hashvalues").html(hashes);
});
}
});
"#key" is a text input field, "hash.php" is the current page, and "#hashvalues" is the main container div on the hash.php page.
Are you returning an insane amount of data for any reason? I've seen IE slow way down if there's a LOT of HTML returned.
Use jQuery.Load() to keep loading a seperate page into a placeholder element (div for example), and pass the value of 'search_input' as a querystring value each time.
This will give that new Google search feel, if thats something youre after

dropdown menu populated from a database in a client side page

I want to populate the data from a database using client side programming either HTML or javascript. I looked online and got lot of sites giving examples on server side i.e. JSP,ASP or PHP for creating the dropdown menu. I know the simple syntax for creating the HTML dropdown menu and in other languages. But I don't know how to populate that HTML dropdown menu values from the database. Any technique which either gets the data from the JSP page which fetches the data from the database and on selecting a single item triggers a query to JSP page which again fetches data from the database can work for me.
Problem: I want to access the database fields from a html page. The dropdown list of html page should be populate from the database and on selecting a specific value it should get data specific to that option.
Any ideas or links to the sources I should look at.
Just so you can get a general idea of the mechanism: How about an Ajax-call triggered by an event listener like this (could also use click event or whatever):
After the html-document is loaded, add an event listener to the watched element (here onchange) and call a function when the event is triggered:
$(document).ready(function() {
$('#watchedElement').change(callAjaxFunction());
});
Function for Ajax-call:
In the data variable you can send information to the server to decide there which options to send back. Easiest way (though quick and dirty) would be to return (like "echo" in php) the option values in plain text/html and replace the old option-elements with this. I prefer the JSON-ways described in the link from your question's comment, since you have a lot more control on the data but for a first impression you could try if the mechanism works for you in general:
function callAjaxFunction() {
$.ajax({
type: "POST",
url: url,
data: { "selectedValue": $('#watchedElement').val() }
success: function(data) {
$("#idOfSelectElement").html(data);
}
dataType: "HTML"
});
}
Just for testing purposes without any evaluation of the value sent to the server you could send back two dummy options like this (example is php file for simplicity and you even could use an html-file that only contains the text itself):
<?php
echo "<option value='test1'>Test1</option>" .
"<option value="test2">Test2</option>";
?>
Still it's probably better to go the JSON way and add element by element, which makes dbugging and stuff way easier later on.

updating value in html table via javascript

Hi is there any way to upadte cell value with no events (i dont want to use 'onClick' or others)?
The scheme is: user is filling form value, then clicks 'ok', and then value should be showed in cell in html table ?
thx in advance for all help
Well, you can use a link with href="javascript:myFunction()" instead of an onclick, but I'm not sure if that counts as an event :)
No, you need to hook up on an even to trigger it.
Since the user is going to click the Ok link anyways that seems to be the most relevant place to invoke your javascript from.
Create a div with an id around the content you would like to change.
Create a javascript function that sets the innerHTML of the above div.
Call the javascript function when the user hits the Ok link.

Categories

Resources