Popup using jQuery?

Question

I'm trying to do a pretty simple thing, I believe. I need to popup a success confirmation dialog after a user clicks to add someone to his friends list. Simply there's an add link on the page with the url (mysite.com/add/friendname). I needed to make issue this request asynchronously so I used jQuery.ajax built-in function to send the request. Take a look at the following code:

$(document).ready(function() {
    $('.track_links').click(function() {
        if (confirm("are you sure you want to track <firstname lastname>?")) {
            $.ajax({ 
                type: "GET",
                url: this.href,
                success: function() {
                alert("Congratulation! you're now tracking <firstname lastname>");
                },
                error: function() {
                    alert("Oops! An error occured, plz try again later!");
                }

            });
            return false;
        }
        else {         
            return false;
        }
    });
});

Now, here's what I need to do in short:
1- I need to use an already designed Html form as the success or failure confirmation message, instead of just alerting!
2- I also need to replace a placeholder (###username###) on that html page with the actual user name (firstname space lastname) which is the value of another field on the document. How to manipulate this html before poping it up on the client?

p.s: My Html/Javascript skills is totally awesome ;) (well, not really)!

Answer 1

For the first part

You can use the

show

function to show a div in the ajax success function.

$("#divResult").show();

if divResult is the id of the div to be shown

For the second part

you can get the value of first name and last name using

$("#txtFirstname" ).val();

and

$("#txtLastname" ).val();

if your first name text box id is txtFirstname and last name text box id is txtLastName

Answer 2

This is how I setup an Acknowledgement dialog, which could quickly be modified to be a confirmation for an action like yours. http://professionalaspnet.com/archive/2009/06/02/Displaying-a-Confirmation-Dialog-with-the-JQuery-UI-Dialog.aspx

Answer 3

For the Form, I would suggest the html() Method, which injects raw HTML you have to provide. Since you already have it, you can give it to the Method via parameters.

For the Placeholder Part, I would suggest the val() Methods, coupled with Javascript's built-in regex functions.

If your placeholder is "###firstname###", then you should try something like

var firstname = jQuery('input#firstname').val();
var lastname = jQuery('input#lastname').val();
var text = jQuery('span#ThePlaceMyPlaceholderIsAt').text();
text = text.replace(/\#\#\#firstname\#\#\#/,firstname);
text = text.replace(/\#\#\#lastname\#\#\#/,lastname);
jQuery('span#ThePlaceMyPlaceholderIsAt').text(text);