Динамический, включая JavaScript с JQuery - PullRequest
Новая
       24

Динамический, включая JavaScript с JQuery

1 голос
/ 25 августа 2009

Я столкнулся с проблемой при использовании IE здесь. Мне нужно вставить форму на отдельных веб-страницах на разных серверах и доменах. Я делаю это через Javascript, например, так: 

<script type="text/javascript" src="http://www.sisgol.com.br/teste/write_js.php?content=form_content"></script>
<div id="form_hypescience">
</div>

Включает загрузку следующего содержимого в div: 

$(document).ready(function(){
$('#form_hypescience').html('\
    <style>\n\
        #form_hypescience {\n\
            width: 250px;\n\
            height: 250px;\n\
        }\n\
        #form_hypescience p {\n\
            margin: 0;\n\
            padding: 0;\n\
        }\n\
        #form_hypescience label {\n\
            font-size: x-small;\n\
            display: block;\n\
        }\n\
        #form_hypescience input[type=text], textarea{\n\
            font-size: x-small;\n\
            width: 240px;\n\
        }\n\
        #form_hypescience textarea {\n\
            height: 40px;\n\
        }\n\
        #form_hypescience button {\n\
            background:#000000 none repeat scroll 0 0;\n\
            border: medium none;\n\
            color: #e7e7e7;\n\
            padding: 1px;\n\
            font-size: 60%;\n\
        }\n\
    \n\
    </style>\n\
    \n\
    <form class="form_hypescience" method="post" action="<!URL_PROCESS_FORM_DATA!>">\n\
    <p>\n\
        <label for="nome">Seu Nome</label>\n\
        <input type="text" id="nome" name="nome" size="30" />\n\
    </p>\n\
    <p>\n\
        <label for="email">Seu e-mail</label>\n\
        <input type="text" id="email" name="email" size="30" />\n\
    </p>\n\
    <p>\n\
        <label for="emails_amigos">E-mail dos seus amigos</label>\n\
        <textarea id="emails_amigos" name="emails_amigos" cols="10" rows="3"></textarea>\n\
    </p>\n\
    <p>\n\
        <label for="mensagem">Mensagem</label>\n\
        <textarea id="mensagem" name="mensagem" cols="10" rows="3"></textarea>\n\
    </p>\n\
    <p>\n\
        <label for="captcha">Digite o texto ao lado</label>\n\
        <input type="text" id="captcha" name="captcha" size="15" />\n\
    </p>\n\
    <button type="button" id="enviar">Enviar</button>\n\
    </form>\n\
    <span id="retorno_envio_form"></span>'
);
$('#enviar').click(function(){
    var parametros = new Array();
    parametros.push('nome=' + $('#nome').val());
    parametros.push('email=' + $('#email').val());
    parametros.push('emails_amigos=' + $('#emails_amigos').val());
    $('#retorno_envio_form').html('\
        <script type="text/javascript" \n\
        src="<!URL_PROCESS_FORM_DATA!>?' +
        encodeURI(parametros.join('&')) +
        '"></script>\n\
    ');
});});

Я отправляю данные формы через javascript include (потому что модель безопасности браузеров в отношении запросов к отдельным доменам). В FireFox код работает хорошо, и я просто удивился следующему шагу, когда заметил, что этот код в браузерах Microsoft отправляет запрос дважды при нажатии кнопки. Я использовал программу под названием Fiddler, чтобы подтвердить этот факт.

Это пример первого запроса:

GET /teste/process_form.php?nome=maria%20&email=o%20cara&emails_amigos=um@email.com HTTP / 1.1

теперь второй запрос (который происходит сразу после первого):

GET /teste/process_form.php?nome=maria%20&email=o%20cara&emails_amigos=um@email.com&_=1251168480125 HTTP / 1.1

Я пытался использовать функцию protectDefault () (возвращает false в конце функции), обрезал форму, использовал тип ввода = 'submit' вместо кнопки, использовал ссылку вместо кнопки, создал скрипт с использованием $ ('body'). append (). У кого-нибудь есть идеи, чтобы помочь здесь?

Заранее спасибо. PS: код, который я пробовал, как сказал Сет: 

$('#data_form').submit(function(){
    var parametros = new Array();
    parametros.push('nome=' + $('#nome').val());
    parametros.push('email=' + $('#email').val());
    parametros.push('emails_amigos=' + $('#emails_amigos').val());
    parametros.push('mensagem=' + $('#mensagem').val());
    $('#retorno_envio_form').html('\
        <script type="text/javascript" \n\
        src="<!URL_PROCESS_FORM_DATA!>?' +
        encodeURI(parametros.join('&')) +
        '"></script>\n\
    ');
    return false;
});

1 Ответ

2 голосов
/ 25 августа 2009

EDIT

ОК, оригинальный ответ был неверным. Ваша форма делает POST, но вы видите два запроса GET. Извини за это. Пропустил в первый раз.

Вместо написания тега script в HTML, почему бы просто не использовать функцию $. GetScript ? 

$('#enviar').click( function(evt) {
  var parametros = new Array();
  parametros.push('nome=' + $('#nome').val());
  parametros.push('email=' + $('#email').val());
  parametros.push('emails_amigos=' + $('#emails_amigos').val());
  $.getScript('<!URL_PROCESS_FORM_DATA>?' + encodeURL(parametros.join('&') ),
    function() {
     // something you'd like to do afterwards
    });
});

Это потому, что форма отправляется, когда нажимается кнопка отправки, а затем происходит и ваш JS-вызов.

Вы можете прекратить, что мое соединение с onsubmit в вашей форме (вместо onclick).

Вот так: 

  $("#id_to_your_form").submit(function() {
     var parametros = new Array();
     parametros.push('nome=' + $('#nome').val());
     parametros.push('email=' + $('#email').val());
     parametros.push('emails_amigos=' + $('#emails_amigos').val());
     $('#retorno_envio_form').html('\
         <script type="text/javascript" \n\
          src="<!URL_PROCESS_FORM_DATA!>?' +
          encodeURI(parametros.join('&')) +
     '"></script>\n');
      return false;
  });

return false запретит отправку формы.

...