Dynamically load contents of a form textarea using JQuery

Hello;

I have a page that lists multiple records. I want users to be able to click an edit link next to any record and be able to edit the record in a form that appears on the page without a page refresh. currently i am displaying the form using query to change the display setting, but i need to be able to populate the form with the data for that particular record.

I'm using classic ASP to create recordset which i then turn into an array to display the records.

Any suggestions on how to do this?

Thank you
garethtnashAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

garethtnashAuthor Commented:
Hello All,

Just to add a little extra information here, so far what i have is this;

<a href="#" class="editlinks" data-id="12">Edit</a><

Open in new window


and my JQuery is;

$(document).ready(
    function(){
        $("#AddProfile a.editlinks").click(function () {
	   		$('#Edit_Personal_Statement_text').val($(this).data('id'))
       		$('#Edit_Work_History').hide();
			$('#Edit_GCSE').hide();
			$('#Edit_Alevel').hide();
			$('#Edit_Degree').hide();
			$('#Edit_Masters').hide();
			$('#Edit_phd').hide();
			$('#Edit_other').hide();
			$('#Edit_Covering_Letter').hide();
           $('#Personal_Statement').hide();
            $('#Skills_Expertise').hide();
            $('#Work_History').hide();
            $('#QualificationSelect').hide();
            $('#GCSE').hide();
            $('#Alevel').hide();
            $('#Degree').hide();
            $('#Masters').hide();
            $('#phd').hide();
            $('#other').hide();
            $('#Covering_Letter').hide();
            $('#CVs').hide();
			$('#Edit_Personal_Statement').show();
        });

    });

Open in new window


So in principle, this should show the form #Edit_Personal_Statement with a texture with a value of 12.

The value isn't showing.

Any suggestions?

Thank you
0
garethtnashAuthor Commented:
Quick update; the above works on a standard textarea, but i'm using tinymce and nothing is displayed...
Help
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
To the main part of your question, you want to submit data without a page refresh and have the new data appear on the page.

To do that you will use jquery ajax http://api.jquery.com/jquery.ajax/ and the returned data gets injected to where you need on the page.  To start, create a new blank asp page that accepts form input just as if you were going to submit a form to it.  

$.ajax({
  method: "POST",
  url: "myapi/getHistory.asp",
  data: { name: "John", location: "Boston" }
})
  .done(function( data ) {
    //alert( "Data Saved: " + data );
  // assume for now you want the returned data to show up on a div#results
  $("div#results").html(data);
  });

Open in new window

If you are getting multiple results, I would probably either a) format the returned data on my asp page such as a table, then do as I show above or b) format the data from the asp page as either json or delimited with an odd character such as a pipe "|".   Then convert the delimited response in jquery and place the appropriate pieces of data in a form field or other area.

For you tinymce, if it has an id (and make sure it is unique) you should be able to do $("#TinyMCE_textarea").html("<h2>Heading</h2><p>some stuff</p>");

Also, check your browser console for errors.  An error in one place my prevent something else from working.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
garethtnashAuthor Commented:
Thanks Scott
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.