Форма подписки на рассылку новостей с использованием Mootools, без перезагрузки страницы - PullRequest
Новая
       40

Форма подписки на рассылку новостей с использованием Mootools, без перезагрузки страницы

0 голосов
/ 23 февраля 2011

Я много искал хороший скрипт mootools для простой формы подписки на новостную рассылку с однострочным полем ввода + кнопкой отправки.

Некоторые вещи, которые я пытаюсь рассмотреть:

  • отправка формы без перезагрузки
  • Я не хочу использовать jQuery или Protoype или любую другую библиотеку за пределами Mootools (у меня уже есть Mootools для некоторых других частей сайта, и добавлениея думаю, что больше библиотек создаст слишком много беспорядка?)
  • Попытка найти библиотеку с хорошими, но простыми эффектами (например, вращающейся "загрузкой" изображения при отправке ... но нашел это только для jQuery / Prototypeпока)
  • Я использую чистые URL: .htaccess для отправки URI в index.php, который затем анализирует URL-адрес и выясняет, какие php-файлы включить для создания каждой страницы.Другими словами, я не уверен, есть ли способ выполнить проверку / вставку записей в mysql, не вмешиваясь в URL?

Любая помощь будет высоко ценится, спасибо!

Ответы [ 2 ]

1 голос
/ 26 февраля 2011

для исправления северного креативного примера, чтобы он работал с 1.2+:

http://jsfiddle.net/dimitar/gEdqa/

код для перехвата отправки формы настолько прост, насколько может быть: 

document.id("myForm").addEvent("submit", function(e) {
    e.stop();

    new Request({
        url: this.get("action"),
        method: "post",
        data: this,
        onRequest: function() {
            document.id("result").set("html", "sending...");
            // or do whatever spinner you want.
        },
        // update: $("results"),
        // evalScripts: true, // etc etc options to request class
        onComplete: function() {
            document.id("result").set("html", this.response.text);
        }
    }).send();
});

также, сохранение экземпляра запроса в ярлыке прототипа element.send по-прежнему работает, но я оставлю вам прочитать на деталях.

1 голос
/ 23 февраля 2011

Вы можете использовать метод Ajax.Form, найденный здесь - это метод ajax post / post-back для хранения ваших данных.

Вот тощий на коде: 

$('myForm').addEvent('submit', function(e) {
    /**
     * Prevent the submit event
     */
    new Event(e).stop();

    /**
     * This empties the log and shows the spinning indicator
     */
    var log = $('log_res').empty().addClass('ajax-loading');

    /**
     * send takes care of encoding and returns the Ajax instance.
     * onComplete removes the spinner from the log.
     */
    this.send({
        update: log,
        onComplete: function() {
            log.removeClass('ajax-loading');
        }
    });
});

HTML / CSS для использования с этим ссылочным кодом: 

<h3>Send a Form with Ajax</h3>
<p><a href="demos/Ajax.Form/ajax.form.phps">See ajax.form.phps</a></p>

<form id="myForm" action="demos/Ajax.Form/ajax.form.php" method="get">
    <div id="form_box">
        <div>
            <p>First Name:</p>
            <input type="text" name="first_name" value="John" />
        </div>
        <div>
            <p>Last Name:</p>
            <input type="text" name="last_name" value="Q" />
        </div>
        <div>
            <p>E-Mail:</p>
            <input type="text" name="e_mail" value="john.q@mootools.net" />
        </div>
        <div>
            <p>MooTooler:</p>
             <input type="checkbox" name="mootooler" value="yes" checked="checked" />
        </div>
        <div>
            <p>New to Mootools:</p>
            <select name="new">
              <option value="yes" selected="selected">yes</option>
              <option value="no">no</option>
            </select>
        </div>
        <div class="hr"><!-- spanner --></div>
        <input type="submit" name="button" id="submitter" />
    <span class="clr"><!-- spanner --></span>
    </div>
</form>
<div id="log">
    <h3>Ajax Response</h3>
    <div id="log_res"><!-- spanner --></div>
</div>
<span class="clr"><!-- spanner --></span>

Дополнительная ссылка CSS: 

#form_box {
    float: left;
    width: 290px;
    background: #f8f8f8;
    border: 1px solid #d6d6d6;
    border-left-color: #e4e4e4;
    border-top-color: #e4e4e4;
    font-size: 11px;
    font-weight: bold;
    padding: 0.5em;
    margin-top: 10px;
    margin-bottom: 2px;
}

#form_box div {
    height: 25px;
    padding: 0.2em 0.5em;
}

#form_box div.hr {
    border-bottom: 2px solid #e2e2e1;
    height: 0px;
    margin-top: 0pt;
    margin-bottom: 7px;
}

#form_box p {
    float: left;
    margin: 4px 0pt;
    width: 120px;
}


#log {
    float: left;
    padding: 0.5em;
    margin-left: 10px;
    width: 290px;
    border: 1px solid #d6d6d6;
    border-left-color: #e4e4e4;
    border-top-color: #e4e4e4;
    margin-top: 10px;
}

#log_res {
    overflow: auto;
}

#log_res.ajax-loading {
    padding: 20px 0;
    background: url(http://demos111.mootools.net/demos/Group/spinner.gif) no-repeat center;
}

Надеюсь, это поможет.

...