CODEWITHSUNDEEP
javascriptjquery
Kumar
Kumar

Reputation: 5147

jQuery - how to load content in a common div from two different events?

I am not a JS expert hence I am asking for some guidance. 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.

Upvotes: 0

Views: 192

Answers (4)

ShankarSangoli
ShankarSangoli

Reputation: 69915

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

        });
    });

Upvotes: 1

Tejs
Tejs

Reputation: 41246

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.

Upvotes: 0

rlemon
rlemon

Reputation: 17666

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

Upvotes: 0

Grigor
Grigor

Reputation: 4049

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.

Upvotes: 0

Related Questions