Всплывающее окно с использованием jQuery?

Question

Я пытаюсь сделать довольно простую вещь, я верю. Мне нужно открыть диалоговое окно подтверждения успеха после того, как пользователь нажмет, чтобы добавить кого-то в свой список друзей. Просто есть ссылка для добавления на страницу с URL (mysite.com/add/friendname). Мне нужно было выполнить этот запрос асинхронно, поэтому я использовал встроенную функцию jQuery.ajax для отправки запроса. Посмотрите на следующий код:

$(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;
        }
    });
});

Теперь вот что мне нужно сделать вкратце:
1- Мне нужно использовать уже разработанную HTML-форму в качестве сообщения об успешном или неудачном подтверждении, а не просто предупреждать!
2. Мне также нужно заменить заполнитель (### username ###) на этой html-странице фактическим именем пользователя (firstname space lastname), которое является значением другого поля в документе. Как манипулировать этим html, прежде чем вывести его на клиент?

p.s: Мои навыки работы с HTML / Javascript совершенно потрясающие;) (ну, не совсем)!

Answer 1

Для первой части

Вы можете использовать

показать

функция для отображения div в функции успеха ajax.

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

если divResult - идентификатор отображаемого элемента div

Для второй части

Вы можете получить значение имени и фамилии, используя

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

и

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

если идентификатор вашего текстового поля имени txtFirstname и идентификатор текстового поля фамилии txtLastName

Answer 2

Для формы я бы предложил метод html () , который внедряет необработанный HTML, который вы должны предоставить. Поскольку он у вас уже есть, вы можете передать его Методу через параметры.

Для Заполнителя, я бы предложил val () Методы в сочетании со встроенными в Javascript функциями регулярных выражений .

Если ваш местозаполнитель "### firstname ###", то вам следует попробовать что-то вроде

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);

Answer 3

Вот так я настраиваю диалог подтверждения, который можно быстро изменить, чтобы он стал подтверждением действия, подобного вашему. http://professionalaspnet.com/archive/2009/06/02/Displaying-a-Confirmation-Dialog-with-the-JQuery-UI-Dialog.aspx