javascriptjquerysharepointsharepoint-2007content-editor

Add two or more script jquery in content editor web part Sharepoint 2007


i want to insert in my NewForm.aspx two or more script in jquery. I wrote the code in a Content Editor web part as many online tutorial.

I have two script that work fine separately, but when i merge the script doesn't work (exactly work just one of two).

This is my code in Content editor:

    <p>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js">
    </script>  
    <script type="text/javascript">
    function HideColumn(targetColumn, hideColumn) {  
        var columnObj = $("input[Title='" + hideColumn + "']");
        $("input[Title='" + targetColumn + "']").bind('click',function() { 

            if($(this).is(':checked')) {                  
                columnObj.closest("tr").show();
             }
             else {
                columnObj.closest("tr").hide();
             }
        });      
       }

     $(document).ready(function() {
            HideColumn('sino','descrizione');
        });
    </script>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js">
    </script>  
    <script type="text/javascript">
    function HideColumn(targetColumn, hideColumn) {  
        var columnObj = $("input[Title='" + hideColumn + "']");
        $("select[Title='" + targetColumn + "']").bind('click',function() { 

            if($(this).val() == "Pippo") {                
                columnObj.closest("tr").show();
             }
             else {
                columnObj.closest("tr").hide();
             }
        });      
       }

     $(document).ready(function() {
            HideColumn('Scelta','descrizione');
        });
    </script>
</p>

Thank for your help,

EDIT SOLVED:

This is the correct code:

<p>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js">
    </script>  
    <script type="text/javascript">
    function HideColumn(targetColumn1, hideColumn1, targetColumn2, hideColumn2) {  
        var columnObj1 = $("input[Title='" + hideColumn1 + "']");
        $("input[Title='" + targetColumn1 + "']").bind('click',function() { 

            if($(this).is(':checked')) {                  
                columnObj1.closest("tr").show();
             }
             else {
                columnObj1.closest("tr").hide();
             }
        });

        var columnObj2 = $("input[Title='" + hideColumn2 + "']");
    $("select[Title='" + targetColumn2 + "']").bind('click',function() { 

        if($(this).val() == "Pippo") {                
            columnObj2.closest("tr").show();
         }
         else {
            columnObj2.closest("tr").hide();
         }
    });       
       }
      $(document).ready(function() {
            HideColumn('sino','descrizione','Scelta','Titolo');
        });
    </script>

</p>

Regards, Francesco


Solution

  • I see a couple of issues, some that will outright break this (the duplicate function definitions) & others that are less-than-optimal design. You don't need to load the jQuery library twice and you shouldn't define the same function twice with different contents.

    Try this:

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>  
    <script type="text/javascript">
        function HideColumn(targetColumn, hideColumn) {  
            var columnObj = $("input[Title='" + hideColumn + "']");
            $("input[Title='" + targetColumn + "']").bind('click',function() { 
    
                if($(this).is(':checked') || $(this).val() == "Pippo") {                  
                    columnObj.closest("tr").show();
                 }
                 else {
                    columnObj.closest("tr").hide();
                 }
            });      
        }
        $(document).ready(function() {
            HideColumn('sino','descrizione');
            HideColumn('Scelta','descrizione');
        });
    </script>
    

    To also have the ability to hide certain columns on initial page load, consider the below:

    UPDATE:

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>  
    <script type="text/javascript">
        function HideColumnOnLoad(hideColumn) {
            $("input[Title='" + hideColumn + "']").closest("tr").hide();
        }
        function HideColumnOnClick(targetColumn, hideColumn) {  
            var columnObj = $("input[Title='" + hideColumn + "']");
            $("input[Title='" + targetColumn + "']").bind('click',function() { 
    
                if($(this).is(':checked') || $(this).val() == "Pippo") {                  
                    columnObj.closest("tr").show();
                 }
                 else {
                    columnObj.closest("tr").hide();
                 }
            });      
        }
        $(document).ready(function() {
            HideColumnOnLoad('descrizione');
            HideColumnOnClick('sino','descrizione');
            HideColumnOnClick('Scelta','descrizione');
        });
    </script>