jQuery - 如何从两个不同的事件加载公共 div 中的内容？

Question

I am not a JS ninja hence I am asking for some guidance here. I have following scenario

1. page loads and commondiv is hidden
2. if user clicks button showeditform, I load editform in commondiv and show the commondiv
3. if user clicks button showeditform and editform is visible, remove it and hide commondiv
4. if user clicks button showpasswordform and if the editform is visible and I remove editform and show passwordform
5. if user clicks button showpasswordform and if the passwordform is visible, remove it and hide the common div
6. if user clicks button showeditform and if the passwordform is visible and I remove passwordform and show editform

As of now, I have set up flags and if elses but its not very good way to do it. How can I achieve this using minimum of jQuery code?

Update : Following is my attempt

$('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('');
    }

});

The editpo and resetpass are classes applied on hyperlinks in column of table, namely Edit personal info and reset pass, clicking these load up the form in a tr>td . As I said, am not good at JS and specially jQuery, hence if you feel that code can be optimised at some step please feel free to do so. Thanks!

Answer 1

Try this

    $(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();

        });
    });

Answer 2

I have done this like a week ago, but the code is at home, where I am not at right now. But basically, you give your forms names in a array, and hide the ones that are not selected and if the one that is selected is clicked again use .toggle(); function to hide it.

Answer 3

You can give this a try. This is assuming you are storing your form HTML in JS. If you are storing it in a hidden container I can show you how to move that into the new parent or just copy the html into it.. hope this helps!

$("#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 4

You would do something like this:

  $('#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();
      }
  });

Honestly, it sounds like your page is doing far too much on a single page. The rules shown above give me a kind of a headache.