Question

I have ‘n’ number of javascript functions in javascript which nearly gets an element and sets its display property.

function ShowDivforassignclick() {
    document.getElementById("FollowupDiv").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
}
function HideDivforassignclick() {
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable2").style.display = 'block';
    document.getElementById("ImageButtonDiv2").style.display = 'block';
    document.getElementById("close1").style.display = 'block';
    return false;

}
function HideDivforassignclick1() {
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable2").style.display = 'block';
    document.getElementById("ImageButtonDiv2").style.display = 'block';
    document.getElementById("close1").style.display = 'block';
    return false;

}
function HideDiv() {
    document.getElementById("adddiv").style.display = 'none';
}
function HideImageButtonDivcontactinfollowup() {
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable4").style.display = 'block';
    document.getElementById("ImageButtonDiv1").style.display = 'block';
    return false;
}
function HideImageButtonDivcontact() {
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable1").style.display = 'block';
    document.getElementById("ImageButtonDiv1").style.display = 'block';
    document.getElementById("close").style.display = 'block';
    return false;
}

function HideImageButtonDivclose() {
    document.getElementById("adddiv").style.display = 'block';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable1").style.display = 'none';
    document.getElementById("ImageButtonDiv1").style.display = 'none';
    document.getElementById("ImageButtonDiv2").style.display = 'none';
    document.getElementById("close").style.display = 'none';
    return false;
}
function HideImageButtonDivclose1() {
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable2").style.display = 'none';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("ImageButtonDiv1").style.display = 'none';
    document.getElementById("ImageButtonDiv2").style.display = 'none';
    document.getElementById("close1").style.display = 'none';
}
function HideImageButtonDivclose1forfollowup() {
    document.getElementById("adddiv").style.display = 'block';
    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable2").style.display = 'none';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("ImageButtonDiv1").style.display = 'none';
    document.getElementById("ImageButtonDiv2").style.display = 'none';
    document.getElementById("close1").style.display = 'none';
}
function HideImageButtonDivuser() {

    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable2").style.display = 'block';
    document.getElementById("ImageButtonDiv2").style.display = 'block';
    document.getElementById("close").style.display = 'block';
    document.getElementById("close1").style.display = 'none';

    return false;
}
function HideImageButtonDivuser1() {

    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable2").style.display = 'block';
    document.getElementById("ImageButtonDiv2").style.display = 'block';
    document.getElementById("close").style.display = 'none';
    document.getElementById("close1").style.display = 'block';
    return false;
}
function HideImageButtonDivuserinfollowup() {
    document.getElementById("FollowupDiv").style.display = 'none';
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("ImageButtonDiv2").style.display = 'block';
    return false;
}
function HideImageButtonDivforAdd() {
    document.getElementById("ImageButtonDiv").style.display = 'none';
    document.getElementById("datatable").style.display = 'none';
    document.getElementById("adddiv").style.display = 'block';
    document.getElementById("ctl00_ContentPlaceHolder1_ImgNoRecords").style.display = 'none';
    return false;
}

function HideImageButtonDivforEdit() {
    document.getElementById('ImageButtonDiv').style.display = 'none';
    document.getElementById("datatable").style.display = 'none';
    document.getElementById("adddiv").style.display = 'block';
    return true;
}
function ShowImageButtonDiv() {

    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("adddiv").style.display = 'none';
    return true;
}
function ShowImageButtonDivs() {

    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("close").style.display = 'none';
    document.getElementById("close1").style.display = 'block';
    return true;
}
function ShowImageButtonDivss() {

    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("adddiv").style.display = 'block';
    document.getElementById("close1").style.display = 'block';
    return true;
}
function ShowImageButtonDivforfollowup() {
    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("adddiv").style.display = 'block';
    return true;
}
function ShowImageButtonDiv1() {

    document.getElementById("ImageButtonDiv1").style.display = 'block';
    document.getElementById("datatable1").style.display = 'block';
    document.getElementById("adddiv").style.display = 'none';
    document.getElementById("ImageButtonDiv").style.display = 'none';

    return true;
}
function showDisplaydiv() {
    document.getElementById("ConfirmationPanel").style.display = 'block';
    document.getElementById("datatable").style.display = 'block';
    document.getElementById("ImageButtonDiv").style.display = 'block';
    document.getElementById("adddiv").style.display = 'none';
    return false;
}

I think there must be a really simple way to make these functions into a single one using jquery. Any suggestion?

Answer 1

There are many ways you can go.

First, instead of document.getElementbyId('something'), in jQuery you can use $('#something'). Instead of using style.display = block and style.display = none, the jQuery way is:

$('#something').hide();
$('#something').show();

or even:

$('#something').toggle();

Next, rather than identify long lists of items by their individual IDs, hopefully your page is structured so you can select by class, or by an enclosing container. If you have ten elements to hide, and they’re all inside a div container, don’t select each one by ID for hiding. Select the container:

$('#container').find('.setOne').hide(); // assume class "setOne" on all
                                        // elements in a particular group

$('#container_of_datatable2').hide(); // if hiding the container works for you

$('#container_of_datatable2') 
  .find('table, div') // to hide tables or divs within the specific container
  .hide(); 

If the container approach doesn’t work for you (your IDs seem to almost but not quite fit a fixed pattern), you can set up arrays containing selectors for the IDs that work together.

var setOne = ['#datatable4','#adddiv','#imagebuttondiv','#etc'];
var setTwo = ['#something','#something-else','#etc2'];

and then use those something like this:

$( setOne.join(",") ).hide();

It looks like you’re trying to wrap your code in functions that have meaningful (to you) names. But those function names seem to be related more closely to the kinds of objects you’ll be showing and hiding, than to the business rule. So perhaps instead of HideImageButtonDivclose1forfollowup(), you might have:

function beginFollowup(){
  $( setOne.join(",") ).hide();
  $( setFive.join(",") ).show();
  ...etc...
}

So when you actually sequence these functions and behaviors, your code will be clearer:

beginFollowup();
endFollowup();
if( something ) {
  beginSomeOtherThing();
}

Just some ideas to get you started.