Question

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

Était-ce utile?

La 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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top