web-dev-qa-db-fra.com

le formulaire jquery ne fonctionne pas comme prévu. ajaxForm n'est pas une fonction

J'essaye d'employer le formulaire de jquery mais il sais dans le ajaxForm concole n'est pas une fonction. Le jquery.form.js est correctement inclus et le code est dans une fonction prête pour le document ...

Voici le script:

$("#apply-form").ajaxForm({

                beforeSend: function()
                {
                    $("#progress").show();
                    //clear everything
                    $("#bar").width('0%');
                    $("#message").html("");
                    $("#percent").html("0%");
                },
                uploadProgress: function(event, position, total, percentComplete)
                {
                    $("#bar").width(percentComplete+'%');
                    $("#percent").html(percentComplete+'%');

                },
                success: function()
                {
                    $("#bar").width('100%');
                    $("#percent").html('100%');

                },
                complete: function(response)
                {
                    $("#message").html("<font color='green'>"+response.responseText+"</font>");
                },
                error: function()
                {
                    $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

                }
            });

Et voici le formulaire HTML

<form id="apply-form" enctype="multipart/form-data" method="post" action="">


    <table>
                <tr><td>CV:</td>
                    <td>
                        <input type="file" name="cover">
                    </td>
                </tr>
                <tr><td>Cover Letter:</td>
                    <td>
                        <input type="file" name="curriculum">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="progress">
                            <div id="bar"></div>
                            <div id="percent">0%</div >
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="message"></div>
                    </td>
                </tr>
            </table>
        </form>

je fais le site en codeigniter et j'ai un modèle d'en-tête qui est inclus sur chaque page. et dans la section head j'inclus tous mes scripts dans cet ordre:

<script src="/jobs/public/js/jquery.js"></script>
<script src="/jobs/public/js/jquery.form.js"></script>
<script src="/jobs/public/js/javascript.js"></script>
<link href="/jobs/public/js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

J'utilise également jQuery UI. Est-ce que cela pourrait être le problème?

jqueryajaxformsjquery-forms-pluginajaxform
12
Beniamin Szabo

Vous chargez jQuery deux fois. Le deuxième chargement de jQuery remplace le premier et détruit tous les plugins.

<script src="/jobs/public/js/jquery.js"></script>
<script src="/jobs/public/js/jquery.form.js"></script>
...
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>

C'est cette seconde jquery-1.9.1 qui n'obtient pas .ajaxForm. Utilise l'un ou l'autre.

Ajoutez le formulaire jquery au bas des scripts

22
Explosion Pills

Utilisez-le et le travail est fait

<script src="http://malsup.github.com/jquery.form.js"></script>
8
Gautam

j'ai conçu un bon uploader comme ceci:

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.form.js"></script>

et travaillé ajax complet et utilisé comme ceci:

$('form').ajaxForm
    ({

    beforeSend: function() 
    {
    var percentVal = '20%';
    prog.css("width",percentVal);

    },
    uploadProgress: function(event, position, total, percentComplete) 
    {
    var percentVal = percentComplete + '%';

    prog.css("width",percentVal);
    darsad.html(percentVal + ' uploading .');
    //console.log(percentVal, position, total);
    },
    success: function() 
    {
    var percentVal = '100%';

    darsad.html(percentVal + ' uploaded success.');
    prog.css("width",percentVal);

    },
    complete: function(xhr) 
    {
    //status.html(xhr.responseText);
    darsad.html(percentVal + ' uploaded complete.');
    }

    });
1
barnameha