web-dev-qa-db-fra.com

Ciblez un iframe avec une publication HTML avec jQuery

Si j'utilise jQuery ou JavaScript pour faire un post, comment puis-je le faire cibler un iframe plutôt que la page actuelle?

jQuery.post( 
    url, 
    [data], 
    [callback], 
    [type] 
)

C'est le format de la publication jQuery, il ne semble pas qu'il y ait n'importe où pour spécifier la cible comme il y en a dans le <form> tag.

Des idées?

javascriptjqueryajaxiframe
27
Matt

Vous pouvez le faire via un formulaire régulier:

<form action="targetpage.php" method="post" target="iframename" id="formid">
   <input type="hidden" name="foo" value="bar" />
</form>

Vous pouvez ensuite utiliser jQuery pour envoyer le formulaire:

$("#formid").submit();
30
Josh

Peut-être que vous manquez le point d'une demande AJAX - pourquoi essayez-vous de spécifier la "cible" d'une demande asynchrone? Cela n'a aucun sens car tout le point de AJAX est que la demande du serveur est renvoyée au Javascript, sans rechargement de page ni destination HTML.

Si vous souhaitez charger le résultat de la demande sur un iframe, vous pouvez faire:

$.post('myurl', function(data) {
    $('#myframe').html(data);
}, 'html');
5
Paolo Bergantino

Vous pouvez résoudre le problème no-form-allowed-within-a-form en créant dynamiquement le formulaire et en l'ajoutant au corps. Vous feriez donc quelque chose comme ceci:

$().ready(function() {
    $('body').append('<form 
       action="url" 
       method="post" 
       target="iframename" 
       id="myspecialform">
         <input type="hidden" name="parameter" value="value" />
       </form>');
});

Cela crée votre formulaire de mise à jour iframe en dehors du formulaire principal qui englobe tout le reste de la page. Ensuite, appelez-le comme Josh l'a recommandé: $('#myspecialform').submit();.

4
Alexander Garden

voici comment je l'ai fait en javascript avec du html simple:

var form=$("<form/>").attr({
    method: "post",
    action: "iframe.php",
    target: "list_frame"
});
form.append($("<input/>").attr({name:"field1",value:0}));
form.append($("<input/>").attr({name:"field2",value:1}));
form.append($("<input/>").attr({name:"field3",value:2}));
form.append($("<input/>").attr({name:"field4",value:3}));
form.append($("<input/>").attr({name:"field5",value:4}));
$("body").append(form);
form.submit();
4
Christopher Thomas

Je sais que cette question est ancienne, mais voici comment je l'ai fait sur ASP.Net (C #) en utilisant jQuery.

//Create the form in a jQuery object
$("<form action='/FormPostTo.aspx' method='post' target='nameofframe'></form>")
    //Get the value from the asp textbox with the ID txtBox1 and POST it as b1
    .append($("<input type='hidden' name='b1' />").attr('value',$('#<%= txtBox1.ClientID %>').val()))
    //Get the value from the asp textbox with the ID txtBox2 and POST it as b2
    .append($("<input type='hidden' name='b2' />").attr('value',$('#<%= txtBox2.ClientID %>').val()))
    //Add the form to the body tag
    .appendTo('body')
    //Submit the form which posts the variables into the iframe
    .submit()
    //Remove the form from the DOM (so subsequent requests won't keep expanding the DOM)
    .remove();

Juste une note rapide: j'ai fait les balises d'entrée comme ça plutôt que de les concaténer, au cas où la valeur de la zone de texte avait une citation (') dedans. Si vous le concaténiez, il gâcherait le code HTML et ne serait pas analysé correctement.

En outre, cela supprime le formulaire du DOM après son utilisation afin de ne pas remplir le DOM avec des éléments de formulaire si vous publiez plusieurs fois sur l'iFrame.

Une légère modification que vous pourriez apporter serait de créer l'élément de formulaire s'il n'existe pas, puis de le référencer simplement par ID s'il existe déjà et de le réutiliser.

3
Richard Marskell - Drackir

Voici ce que j'ai fait pour contourner le problème d'avoir un formulaire dans un formulaire sur une page asp.net lorsque je devais soumettre des données à une page distante via un formulaire en utilisant idéalement AJAX/jQuery.

  1. J'ai créé des variables pour capturer le nom du formulaire asp.net, la cible, l'action, la méthode, etc.

  2. J'ai conservé ces informations du formulaire dans ces variables, puis j'ai changé le formulaire lui-même en utilisant jQuery pour faire ce dont j'avais besoin.

  3. Ensuite, j'ai posté le formulaire via AJAX (parce que j'avais besoin d'un formulaire pour publier dynamiquement sur une page séparée afin que l'autre page puisse obtenir les informations).

  4. Enfin, j'ai modifié le formulaire asp.net pour qu'il fonctionne correctement afin que le reste de la page fonctionne correctement.

Cela semble avoir résolu mon besoin d'une solution similaire.

0
Adam