How can I convert this working JAVASCRIPT code to JQUERY

Question

 <script language="javascript" type="text/javascript">


function hasPasswordChanged(value)
  {
        if(value == '1')
        {
            var container = document.getElementById("sNav");
            if(document.getElementsByTagName)
            {
               var hyperLinkList = container.getElementsByTagName("a");

               for(var currentLink in hyperLinkList)
               {
                    hyperLinkList[currentLink].disabled = true;
                    hyperLinkList[currentLink].onclick =function () { return false;}

               }

            }
        }
  }


  window.onload = function () 
  {
        hasPasswordChanged('<%  = HasPasswordAlreadyChanged %>');
  }

</script>

Answer 1

Assuming I'm correct in that you want to disable the nav links on the page if the password has already changed (1 is true).

$(function() {
   var changed = <%= HasPasswordAlreadyChanged %>;
   if (changed) {
      $('#sNav a').attr('disabled','disabled')
                  .click( function() { return false; } );
   }
});

Answer 2

function hasPasswordChanged(value)
  {
        if(value == '1')
        {
            $('#sNav a').attr('disabled', 'true').click(function(){ return false; });
        }
  }

$(function(){
    hasPasswordChanged('<%  = HasPasswordAlreadyChanged %>');
})

or a bit wierder:

$(function(){
    <%  = HasPasswordAlreadyChanged %> == 1 ? $('#sNav a').attr('disabled', 'true').click(function(){ return false; }) : ""; 
});

Answer 3

<script language="javascript" type="text/javascript">
  $(function(){
    if ('<%  = HasPasswordAlreadyChanged %>' == '1') {
      $("#sNav").find("a").attr("disabled","disabled").click(function(){return false;});
    }
  });
</script>

Answer 4

Presuming HasPasswordAlreadyChanged is either 0 or 1 (or flase/true)

jQuery(function($){
  !!<%= HasPasswordAlreadyChanged %> && $("#sNav a").attr("disabled",true).click(function(){return false;})
})

Also, does a disabled attribute on A element affect it in any way ?

Answer 5

function hasPassWordChanged(value) {
  if (value == '1') {
    $("#sNav a").attr("disabled", true).click(function() {return false;});
  }
}

$(function() {
  hasPasswordChanged('<%  = HasPasswordAlreadyChanged %');
});

This selects all a tags that are children of the node with id sNav, sets all of their disabled attributes to true, and sets the specified returning false function to be called upon the click event.

The last part, a call to $() with the specified function, runs the function when the DOM is ready to be worked on, and is a synonym for $(document).ready() when passed a function. You can also substitute this with your window.onload setting, but the call to $() is more preferred with jQuery.

Answer 6

As your JavaScript is working, there is probably no value in converting it to jQuery at the risk of introducing any bugs.

The only thing I might consider is using jQuery's event-handling rather than explicitly using window.onload :

function hasPasswordChanged() {
    // unchanged
}

$(document).ready(function() {
    hasPasswordChanged('<%  = HasPasswordAlreadyChanged %>');
});