• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 314
  • Last Modified:

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
0
garethtnash
Asked:
garethtnash
  • 3
1 Solution
 
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
 
garethtnashAuthor Commented:
Thanks Scott
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now