Correct JS

Hi,
How to correct code below?

20q.png
LVL 12
HuaMin ChenProblem resolverAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
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 ChenProblem resolverAuthor 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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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 ChenProblem resolverAuthor 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 ChenProblem resolverAuthor 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 ChenProblem resolverAuthor 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 ChenProblem resolverAuthor Commented:
How to ensure to "get your codes once"?
0
Julian HansenCommented:
I don't understand the question.
0
HuaMin ChenProblem resolverAuthor 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 ChenProblem resolverAuthor 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HuaMin ChenProblem resolverAuthor Commented:
Very sorry, what is DOC READY BLOCK?
0
Julian HansenCommented:
$(function() {
 // ANYTHING INSIDE HERE
})

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.