jQuery - comment charger du contenu dans un div commun à partir de deux événements differnet?

Question

Je ne suis pas un ninja JS donc je demande des conseils ici. Je suivant le scénario

1. chargement de la page et commondiv est caché
2. si le bouton utilisateur clique showeditform, je charge EditForm en commondiv et montrer la commondiv
3. si le bouton utilisateur clique showeditform et EditForm est visible, retirez-le et cacher commondiv
4. si l'utilisateur clique sur le bouton showpasswordform et si le EditForm est visible et je supprimer EditForm et spectacle passwordform
5. si le bouton utilisateur clique showpasswordform et si le passwordform est visible, retirez-le et cacher la div commune
6. si le bouton utilisateur clique showeditform et si le passwordform est visible et je supprimer passwordform et montrer EditForm

A partir de maintenant, je l'ai mis en place des drapeaux et si elses mais ce ne est pas très bonne façon de le faire. Comment puis-je y parvenir en utilisant un minimum de code jQuery?

Mise à jour: Après ma tentative

$('a.editpo, a.resetpass').click(function(event){ 
    event.preventDefault(); 
    var urlToCall = $(this).attr('href'); 
    var hyperlinkid = '#'+$(this).attr('id'); 
    var targetId = $(this).attr('id').match(/\d+/); 
    var targetTrDiv = '#poformloadertr_'+targetId; 
    var targetTdDiv = '#poformloadertd_'+targetId; 
    var toToggle = $('#resetuserpassform_'+targetId).is(':visible') || $('#account-home-container-'+targetId).is(':visible') ; 
    console.log(toToggle); 
    if(toToggle == true || $(targetTdDiv).html()==''){ 
     $.ajax({ 
      url:urlToCall, 
      success: function(html){ 
       $(targetTdDiv).html(html); 
       $(targetTrDiv).show(); 
      } 
     }); 
    }else{ 
     $(targetTrDiv).hide(); 
     $(targetTdDiv).html(''); 
    } 

}); 

Le editpo et resetpass sont des classes appliquées sur les liens dans la colonne de la table, à savoir Modifier les informations personnelles et réinitialiser passe, en cliquant ces charger la forme dans un tr>td . Comme je l'ai dit, je ne suis pas bon à JS et spécialement à jQuery, donc si vous pensez que le code peut être optimisé à un moment donné, n'hésitez pas à le faire. Merci!

Answer 1

Je l'ai fait comme il ya une semaine, mais le code est à la maison, où je ne suis pas en ce moment. Mais fondamentalement, vous donnez vos noms de formes dans un tableau, et cachez ceux qui ne sont pas sélectionnés et si vous cliquez à nouveau sur celui qui est sélectionné, utilisez la fonction .toggle(); pour le masquer.

Answer 2

Vous pouvez essayer. Ceci suppose que vous stockez votre formulaire HTML dans JS. Si vous le stockez dans un conteneur caché, je peux vous montrer comment le déplacer dans le nouveau parent ou simplement copier le code HTML. J'espère que cela vous aidera!

$("#commondiv").hide(); 

$("#showeditform").click(function(){ 
    if($("#commondiv").is(":visible")) { 
    $("#commondiv").html("").hide(); 
    } else { 
    $("#commondiv").html(editformHTML).show(); 
    } 
}); 
$("#showpasswordform").click(function(){ 
    if($("#commondiv").is(":visible")) { 
    $("#commondiv").html("").hide(); 
    } else { 
    $("#commondiv").html(passwordformHTML).show(); 
    } 
}); 

Answer 3

Vous feriez quelque chose comme ceci:

$('#showeditform').click(function() 
    { 
     if($('#commondiv').is(':visible')) 
      $('#commondiv').hide(); 
     else 
      $('#commondiv').html('The text you want to set').show(); 

     if($('#passwordform').is(':visible')) 
     { 
      $('#passwordform').remove(); 
      $('#editform').show(); 
     } 
    }); 

    $('#showpasswordform').click(function() 
    { 
     if($('#editform').is(':visible')) 
     { 
     $('#editform').hide(); 
     $('#passwordform').show(); 
     } 

     if($('#passwordform').is(':visible')) 
     { 
     $('#passwordform').remove(); 
     $('#commondiv').hide(); 
     } 
    }); 

Honnêtement, il semble que votre page est en train de faire beaucoup trop sur une seule page. Les règles ci-dessus me donnent une sorte de mal de tête.

Answer 4

Essayez cette

$(function(){ 

     var $commonDiv = $("#commondiv"); 

     //Add the edit and password forms into common div and hide them initially 
     $("#editform").hide().appendTo($commonDiv); 
     $("#passwordform").hide().appendTo($commonDiv); 

//Editing answer based on your comments. 

     $(".showeditform").live('click', function(){ 

      if($("#editform").hasClass("loading")){//If form is already loading just return 
       returnl 
      } 

      if(!$("#editform").is(":visible")){ 
       $("#editform").addClass("loading").load("EditFormUrl", function(){ 
        $(this).removeClass("loading").show(); 
       }); 
      } 
      else{ 
       $("#editform").hide(); 
      } 

      //Always hide the passwordform 
      $("#passwordform").hide(); 
     }); 

     $(".showpasswordform").live('click', function(){ 

      if(!$("#passwordform").is(":visible")){ 
       $("#passwordform").addClass("loading").load("PasswordFormUrl", function(){ 
        $(this).removeClass("loading").show(); 
       }); 
      } 
      else{ 
       $("#passwordform").hide(); 
      } 

      //Always hide the editform 
      $("#editform").hide(); 

     }); 
    });