Изпращане на формуляри от множество вградени рамки във Firefox

Имам страница, която съдържа множество вградени рамки. Всички вградени рамки препращат към една и съща страница. Всяка страница с iframe съдържа формуляр, който искам да изпратя на сървъра. Има бутон „Изпращане на всички“ на страницата, съдържаща вградени рамки, които при щракване извикват тази функция:

    function submitAll() {
    var fs = d3.selectAll('iframe')[0];
    for (var i = 0; i < fs.length; i++) {
        try {
            var el = fs[i];
            var doc = el.contentDocument;
            var root = el.contentWindow['root'];
            var f = doc.getElementById('submit-form');
            removeParentNodeReference(root);
            doc.getElementById('POST-name').value = document.getElementById('name').value;
            doc.getElementById('POST-email').value = document.getElementById('email').value;
            doc.getElementById('POST-phone').value = document.getElementById('phone-number').value;
            doc.getElementById('POST-json').value = JSON.stringify(root);
            doc.getElementById('POST-submit-info').click();
        }
        catch (e) {
            console.log(e.message);
        }
    }

Функцията грабва документа със съдържание от всеки iframe. С документа на iframe той ще продължи да попълва някои стойности на формуляра в страницата на iframe. След това функцията ще хване бутона на формуляра и ще щракне върху него. Това извиква функция във iframe, която извършва известна обработка и изпраща формуляра.

В chrome всички формуляри на iframes се изпращат. Във firefox обаче изпращането на формуляр ще се случи само за първия формуляр. Влязох в програмата за отстраняване на грешки и видях, че въпреки че преминава през всички страници с iframe, всъщност се случва само едно изпращане.

Някой има ли идеи?

Благодаря.


person Quy    schedule 26.06.2014    source източник
comment
Опитвате ли се да спамите сайт?   -  person blex    schedule 26.06.2014
comment
@blex изобщо не. Страницата в iframe се намира на моя уеб сървър. Не съм сигурен дали това е най-добрата реализация за случая на използване (използване на един или повече iframes) или не. Имам страница, която създава дърво с помощта на d3. Един потребител може или не може да създаде няколко от тези дървета. Ако го направят, всеки път ще създават нов iframe (и раздел към него). В случай, че създават няколко дървета, искам да изпратя всяко дърво, което са направили, на сървъра, за да го съхрани в база данни, за да го обработи по-късно.   -  person Quy    schedule 27.06.2014
comment
о, добре, не забелязах d3 за включване. Е, не знам как работи d3, но вместо да използвате няколко вградени рамки, трябва да погледнете Ajax (можете да публикувате колкото форми желаете, без да напускате страницата и без никакви вградени рамки) -› Погледнете тук :)   -  person blex    schedule 27.06.2014


Отговори (2)


Вместо да използвате вградени рамки, можете да използвате Ajax, който няма да трябва да задава до множество вградени рамки. Ajax ви позволява да правите заявки към страници, за да получите тяхното съдържание или да изпратите данни.

Пример

В този пример ще използвам jQuery, който има по-лесен синтаксис от чистия javascript, за да направя това. Уверете се, че сте включили jQuery във вашата страница, за да работи това.

Тъй като не знам начина, по който определяте броя на подаванията, които трябва да бъдат направени, ще предположа, че го давате като параметър на следната функция:

function submitAll(n){
    /* Get the values from your form
       --> they need to have the same name as in
       your php code (e.g "POST-name", etc) */
    var values = $("#myForm").serialize();

    /* Submit them n times */
    for(var i = 1; i <= n; i++){
        $.ajax({
            url: "yourpage.php",
            type: "post", // or get
            data: values, // declared above
            success: function(){
                console.log("Request "+i+"/"+n+" sent successfully.");
            },
            error: function(){
                console.log("Request "+i+"/"+n+" failed.");
            }
        });
    }
}

Добре е да се знае

Ajax е асинхронен, което означава, че javascript кодът, разположен след него, продължава да се изпълнява, докато ajax заявката чака отговор от вашия сървър. Ако, например, поставите този ред в края на функцията:

console.log("End of submitAll");

Вероятно ще се изпълни, преди да получите някой от n отговора.

Надявам се това да помогне, ако опитате това и срещнете проблем, уведомете ни.

person blex    schedule 27.06.2014
comment
Въпреки че приех това предложение, все още съм любопитен защо избирането на всички рамки и ръчното изпращане на формуляра на документа на всяка рамка не работи във firefox и дали има обща работа за това. - person Quy; 30.06.2014
comment
@Quy Благодаря ви, че приехте този отговор. Въпреки че не съм сигурен защо сте имали този проблем, реших, че ще е по-добре за вас да избягвате използването на множество вградени рамки. Те често се считат за лоша практика и трябва да се използват в конкретни случаи или ако няма други налични опции. Въпреки това се надявам, че някой ден ще намерите отговор на този мистериозен бъг! - person blex; 30.06.2014
comment
Съгласете се с @blex, че е по-лесно да видите всеки iframe като самостоятелен компонент. улеснява и поддържането на вашето приложение. - person alcedo; 27.09.2015

Имах същия проблем. Реших го, като добавих клас към iframe (notsendiframe). if($(".notsendiframe").length) { // преименуване на класа на iframe // изпращане на първия iframe $(".notsendiframe")[0] } в Публикуваната страница на iframe, добавих JS, който стартира JS от родителя отново. (така че следващият iframe ще бъде изпратен) може би трябва първо да покажете iframe, преди да го изпратите.

person tryitdifferent    schedule 27.09.2015