July 2008


 
  

We had to implement a tab functionality without postback, wherein the image of each tab changed on being clicked . This could be done very easily by implementing javascript and showing an hiding of different <div> on being clicked.

We had four divs, country1, country2, country3, country4.

On first time load only country1 is displayed and the others are hidden, consecutively, on clicking the second image country2 is displayed and the others are hidden.

 

I had a table displaying all the images,

<table>

<tr>

<td>

<div style=”float:left”>

<a href=”#” rel=”tcontent1″ >

<img id=”Img1″ src=”/_layouts/images/basics_hover.gif” onclick=”return changeImage(1);” style=”border:0″ />

</a>

</div>

<div style=”margin-left:-8px; float:left”>

 <a href=”#” rel=”tcontent2″ >

<img id=”Img2″ src=”/_layouts/images/scope_active001.gif” onclick=”return changeImage(2);” style=”border:0″ />

</a>

</div>

<div style=”margin-left:-8px; float:left”>

 <a href=”#” rel=”tcontent3″ >

<img id=”Img3″ src=”/_layouts/images/kits_active001.gif” onclick=”return changeImage(3);” style=”border:0″ />

</a>

</div>

<div style=”margin-left:-8px; float:left”>

 <a href=”#” rel=”tcontent1″ >

<img id=”Img4″ src=”/_layouts/images/submit_active001.gif” onclick=”return changeImage(4);”  style=”border:0″ />

</a>

</div>

</td>

</tr>

</table>

 

 

 The javascript for doing the trick is given below,

function changeImage(opt)

    {

    //alert(opt);

    var currImage1=document.getElementById(“Img1”).src;

    var currImage2=document.getElementById(“Img2”).src;

    var currImage3=document.getElementById(“Img3”).src;

    var currImage4=document.getElementById(“Img4”).src;

   

    var rExp1 = /basics_hover.gif/gi;

    var newstring1 = new String(“basics_active001.gif”);

   

    var rExp2 = /scope_hover.gif/gi;

    var newstring2 = new String(“scope_active001.gif”);

   

    var rExp3 = /kits_hover.gif/gi;

    var newstring3 = new String(“kits_active001.gif”);

   

    var rExp4 = /submit_hover.gif/gi;

    var newstring4 = new String(“submit_active001.gif”);

   

    if (opt==1)

    {

    

       if (currImage1.indexOf(“basics_active001.gif”)!=-1)

       { 

        var rExp = /basics_active001.gif/gi;

        var newstring = new String(“basics_hover.gif”);

        var result = currImage1.replace(rExp, newstring);

       

        document.getElementById(“Img1”).src = result;  

       

        if(currImage2.indexOf(“scope_hover.gif”)!=-1)

        {

            var result = currImage2.replace(rExp2, newstring2);

            document.getElementById(“Img2”).src = result;

        }

        if(currImage3.indexOf(“kits_hover.gif”)!=-1)

        {

            var result = currImage3.replace(rExp3, newstring3);

            document.getElementById(“Img3”).src = result;

        }

        if(currImage4.indexOf(“submit_hover.gif”)!=-1)

        {

            var result = currImage4.replace(rExp4, newstring4);

            document.getElementById(“Img4”).src = result;

        }

       

        country4.style.display= “none”;

        country1.style.display = “block”;

        country2.style.display = “none”;

        country3.style.display = “none”;

        

        }

        else if(currImage1.indexOf(“basics_hover.gif”)!=-1)

       {

        var rExp = /basics_hover.gif/gi;

        var newstring = new String(“basics_active001.gif”);

        var result = currImage1.replace(rExp, newstring);

        document.getElementById(“Img1”).src = result;

       }

    }

   

    if (opt==2)

    {

    

       if (currImage2.indexOf(“scope_active001.gif”)!=-1)

       { 

        var rExp = /scope_active001.gif/gi;

        var newstring = new String(“scope_hover.gif”);

        var result = currImage2.replace(rExp, newstring);

        document.getElementById(“Img2”).src = result;

       

        if(currImage1.indexOf(“basics_hover.gif”)!=-1)

        {

            var result = currImage1.replace(rExp1, newstring1);

            document.getElementById(“Img1”).src = result;

        } 

      

        if(currImage3.indexOf(“kits_hover.gif”)!=-1)

        {

            var result = currImage3.replace(rExp3, newstring3);

            document.getElementById(“Img3”).src = result;

        }

        if(currImage4.indexOf(“submit_hover.gif”)!=-1)

        {

            var result = currImage4.replace(rExp4, newstring4);

            document.getElementById(“Img4”).src = result;

        }

       

        country4.style.display= “none”;

        country1.style.display = “none”;

        country2.style.display = “block”;

        country3.style.display = “none”;

       

        }

        else if(currImage.indexOf(“scope_hover.gif”)!=-1)

       {

      

       }

    }

    if (opt==3)

    {

        if (currImage3.indexOf(“kits_active001.gif”)!=-1)

        {

            var rExp = /kits_active001.gif/gi;

            var newstring = new String(“kits_hover.gif”);

            var result = currImage3.replace(rExp, newstring);

            document.getElementById(“Img3”).src = result;

           

            if(currImage1.indexOf(“basics_hover.gif”)!=-1)

            {

            var result = currImage1.replace(rExp1, newstring1);

            document.getElementById(“Img1”).src = result;

            }

            if(currImage2.indexOf(“scope_hover.gif”)!=-1)

            {

            var result = currImage2.replace(rExp2, newstring2);

            document.getElementById(“Img2”).src = result;

            }

            if(currImage4.indexOf(“submit_hover.gif”)!=-1)

            {

            var result = currImage4.replace(rExp4, newstring4);

            document.getElementById(“Img4”).src = result;

            }

           

            country4.style.display= “none”;

            country1.style.display = “none”;

            country2.style.display = “none”;

            country3.style.display = “block”;

           

        }

        else if(currImage.indexOf(“kits_hover.gif”)!=-1)

        {

           

        }

    }

    if (opt==4)

    {

   

        if (currImage4.indexOf(“submit_active001.gif”)!=-1)

        {

            var rExp = /submit_active001.gif/gi;

            var newstring = new String(“submit_hover.gif”);

            var result = currImage4.replace(rExp, newstring);

            document.getElementById(“Img4”).src = result;

           

            if(currImage1.indexOf(“basics_hover.gif”)!=-1)

            {

            var result = currImage1.replace(rExp1, newstring1);

            document.getElementById(“Img1”).src = result;

            }

            if(currImage2.indexOf(“scope_hover.gif”)!=-1)

            {

            var result = currImage2.replace(rExp2, newstring2);

            document.getElementById(“Img2”).src = result;

            }

            if(currImage3.indexOf(“kits_hover.gif”)!=-1)

            {

            var result = currImage3.replace(rExp3, newstring3);

            document.getElementById(“Img3”).src = result;

            }

           

            country4.style.display= “block”;

            country1.style.display = “none”;

            country2.style.display = “none”;

            country3.style.display = “none”;

           

        }

        else if(currImage.indexOf(“kits_hover.gif”)!=-1)

        {  

        } }}

 

In a particular scenario,we faced a problem with CAML query, returning an error “The property Query contains an invalid value.”.

Our CAML query was:

<Where>
<Contains><FieldRef Name=’Kits’/><Value Type=’Text’>Ray & Martin</Value></Contains>;
</Where>

After lots of tries we came to the solution that only in value’s containing ‘&’ we faced the problem, for other cases it worked fine.

We tried using CDATA, and it worked.

The reason being,a CDATA section is a section of element content that is marked for the parser to interpret as only character data, not markup.

So, our new approach as:

<Where> 
<Contains>   
<FieldRef Name=’Kits’/>     
<Value Type=’Text’>  <![CDATA[Ray & Martin]]></Value></Contains>
</Where>