• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 90
  • Last Modified:

Correct JS

Hi,
How to correct code below?

20q.png
0
HuaMin Chen
Asked:
HuaMin Chen
  • 8
  • 6
  • 2
  • +2
1 Solution
 
Ryan ChongCommented:
can you paste the code as codes instead of image here?
0
 
Jeffrey Dake Senior Director of TechnologyCommented:
You are missing a closing } to close the anonymous function on the change event

The second to last line should be }}) to close the if statement and the function declaration.
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Thanks to all.
Jeffrey,
By that part of JS codes, I want to disable button below (when readonly=y)
20r.png
but it cannot do that below. What to adjust?
http://my-friend.co/UserMaintenance2/Default.aspx?userid=mc4&readonly=y
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Dorababu MSenior Software EngineerCommented:
I guess this code you need to write on document.ready
var isreadonly = getUrlParameter('readonly');
        if (isreadonly == "y") {
            $("#tb_birth").datepicker("disable");
        }

Open in new window

0
 
HuaMin ChenSystem AnalystAuthor Commented:
Is it to put such codes to Java script in above? How to adjust the above codes? Where is document.ready?
0
 
Jeffrey Dake Senior Director of TechnologyCommented:
What you are trying to do is fine. I meant the syntax of your JavaScript is incorrect.
At the end it should be
        if (isreadonly == "y") {
            $("#tb_birth").datepicker("disable");
        }})

Open in new window


See how I added an extra }, that is to close the function you opened earlier
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Yes, I have codes like
$(function () {
    $("#tb_birth").datepicker({
        dateFormat: "dd/mm/yy",
        changeYear: true,
        showOn: "button",
    }).next('button').text('').button({
        icons: {
            primary: 'ui-icon-calendar'
        },
        label: "选择日期",
        text: false
    }).on("change", function () {
        var isreadonly = getUrlParameter('readonly');
        if (isreadonly == "y") {
            $("#mybutton").attr("disabled", "disabled")
        }
        var isreadonly = getUrlParameter('readonly');
        if (isreadonly == "y") {
            $("#tb_birth").datepicker("disable");
        }
    });
    });

Open in new window

but after deployment, I still cannot disable the button next to date field below.

http://my-friend.co/UserMaintenance2/Default.aspx?userid=mc4&readonly=y
0
 
Julian HansenCommented:
Firstly you have this
var isreadonly = getUrlParameter('readonly');

Open in new window

Which is INSIDE the .on("change") so the check for readonly is only going to happen when you actually change the date.

If you want to disable the button based on the URL parameter at page load you have to move this OUTSIDE of the function chain you have going

Then you can optimise your code to do this
// ONLY GET THIS ONCE
 var isreadonly = getUrlParameter('readonly');
if (isreadonly == "y") {
  // USE prop RATHER THAN attr AND SET IT TO TRUE
  $("#mybutton").prop("disabled", true)
 // DISABLE THE DATEPICKER
  $("#tb_birth").datepicker("option", { disabled: true });
}

Open in new window

However, we can make this even simpler. Firstly, there is no id="mybutton" in your code so that line is totally useless.
Secondly, if you disable the datepicker the button will no longer open the DatePicker and is effectively disabled. You can therefore just do this
$(function() {
  // ONLY GET THIS ONCE
 var isreadonly = getUrlParameter('readonly');
  if (isreadonly == "y") {
    // DISABLE THE DATEPICKER
    $("#tb_birth").datepicker("option", { disabled: true });
  }
})

Open in new window


If you want to disable the button then use the first code listing making sure you reference an id that actually exists in your page.

Some things to remember

When disabling controls use .prop() and remember that disabled is a Boolean and should be set to true or false.
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Thanks to all.
Julian,
Here is the current codes
$(function () {
    $("#tb_birth").datepicker({
        dateFormat: "dd/mm/yy",
        changeYear: true,
        showOn: "button",
    }).next('button').text('').button({
        icons: {
            primary: 'ui-icon-calendar'
        },
        label: "选择日期",
        text: false
    }).on("change", function () {
        var isreadonly = getUrlParameter('readonly');
        if (isreadonly == "y") {
            // DISABLE THE DATEPICKER
            $("#tb_birth").datepicker("option", { disabled: true });
        }
    });
});

Open in new window

but I still cannot disable the datepicker, after re-deployment, below.

http://my-friend.co/UserMaintenance2/Default.aspx?userid=mc4&readonly=y
0
 
Julian HansenCommented:
Please read my previous comment

YOU ARE PUTTING YOUR DISABLE CODE INSIDE AN ONCHANGE


}).on("change", function () {
 // ************************************
 // THIS CODE WILL ONLY FIRE WHEN YOU CHANGE THE VALUE IN THE DATEPICKER - IS THIS WHAT YOU WANT?
 // ************************************
        var isreadonly = getUrlParameter('readonly');
        if (isreadonly == "y") {
            // DISABLE THE DATEPICKER
            $("#tb_birth").datepicker("option", { disabled: true });
        }
    });

Open in new window

0
 
HuaMin ChenSystem AnalystAuthor Commented:
How to ensure to "get your codes once"?
0
 
Julian HansenCommented:
I don't understand the question.
0
 
HuaMin ChenSystem AnalystAuthor Commented:
Per your advice

// ONLY GET THIS ONCE
 var isreadonly = getUrlParameter('readonly');
if (isreadonly == "y") {
  // USE prop RATHER THAN attr AND SET IT TO TRUE
  $("#mybutton").prop("disabled", true)
 // DISABLE THE DATEPICKER
  $("#tb_birth").datepicker("option", { disabled: true });
}

what do you mean by

"ONLY GET THIS ONCE"?
0
 
Julian HansenCommented:
In your original code you had
}).on("change", function () {
       // THIS LINE IS IDENTICAL ....
        var isreadonly = getUrlParameter('readonly');
        if (isreadonly == "y") {
            $("#mybutton").attr("disabled", "disabled")
        }
       // TO THIS ONE. 
       // THIS LINE IS UNNECESSARY - YOU ALREADY HAVE THIS VALUE ABOVE
        var isreadonly = getUrlParameter('readonly');
        if (isreadonly == "y") {
            $("#tb_birth").datepicker("disable");
        }
    });
    });

Open in new window

0
 
HuaMin ChenSystem AnalystAuthor Commented:
Using these codes
$(function () {
    $("#tb_birth").datepicker({
        dateFormat: "dd/mm/yy",
        changeYear: true,
        showOn: "button",
    }).next('button').text('').button({
        icons: {
            primary: 'ui-icon-calendar'
        },
        label: "选择日期",
        text: false
    }).on("change", function () {
        var isreadonly = getUrlParameter('readonly');
        if (isreadonly == "y") {
            $("#mybutton").attr("disabled", "disabled")
        }
        if (isreadonly == "y") {
            $("#tb_birth").datepicker("disable");
        }
    });
});

Open in new window

I now still cannot disable the option to choose the datepicker (when readonly=y). What to adjust?
0
 
Julian HansenCommented:
You are not reading my responses

$(function () {
    $("#tb_birth").datepicker({
        dateFormat: "dd/mm/yy",
        changeYear: true,
        showOn: "button",
    }).next('button').text('').button({
        icons: {
            primary: 'ui-icon-calendar'
        },
        label: "选择日期",
        text: false
    }).on("change", function () {
// THIS CODE WILL ONLY FIRE WHEN YOU CHANGE THE DATE
// IF YOU WANT TO DISABLE THE BOX ON PAGE LOAD YOU HAVE
// TO PUT THIS CODE IN THE ROOT OF THE DOC READY BLOCK
        var isreadonly = getUrlParameter('readonly');
        if (isreadonly == "y") {
            $("#mybutton").attr("disabled", "disabled")
        }
        if (isreadonly == "y") {
            $("#tb_birth").datepicker("disable");
        }
    });
});

Open in new window

Like this (refer 42424719)
$(function() {
  // CREATE THE DATEPICKER
  $("#tb_birth").datepicker({
    dateFormat: "dd/mm/yy",
    changeYear: true,
    showOn: "button",
  }).next('button').text('').button({
    icons: {
      primary: 'ui-icon-calendar'
    },
    label: "选择日期",
    text: false
  });

  // Set diabled using  .prop() rather than attr()
  // IN THE ROOT OF THE DOC READY
  var isreadonly = getUrlParameter('readonly');
  if (isreadonly == "y") {
    // DISABLE THE DATEPICKER
    $("#tb_birth").datepicker("option", { disabled: true });
  }
})

Open in new window

0
 
HuaMin ChenSystem AnalystAuthor Commented:
Very sorry, what is DOC READY BLOCK?
0
 
Julian HansenCommented:
$(function() {
 // ANYTHING INSIDE HERE
})

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 8
  • 6
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now