CODEWITHSUNDEEP
javascriptjquery
Tarikh Chouhan
Tarikh Chouhan

Reputation: 435

button jquery ui not working

I am trying to use the button from the jQuery UI. for some reason, my button does not work properly. To test it out, I tried making the button to be disabled but when I run the program, it is still clickable. My script path files are right because I was using the slider jquery ui widget and it worked.

This is my code for my the script of my button:

<script>$(document).ready(function(){ 
$("#dateButton").button({
disabled:true
}); 

});
});
</script>

This is my button delcaration:

<button id="dateButton"> Date </button>

And these are the scripts I am using (using bootstrap):

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="jquery-ui.js"></script>

  <link rel="stylesheet" href="jquery-ui.css">

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

ALSO, if I were to call a function when the button is clicked, would I write it like this?:

$("#dateButton").button({
Code goes in here for the function
});

Upvotes: 1

Views: 1151

Answers (2)

epascarello
epascarello

Reputation: 207501

bootstrap and jQuery UI do not get along with button see https://github.com/twbs/bootstrap/issues/6094

Solution is to use noConflict

(function() {
  var bootstrapButton = $.fn.button.noConflict();
  $.fn.bootstrapBtn = bootstrapButton;
}());

$(document).ready(function() {
  $("#dateButton").button({
    disabled: true
  });
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" />

<button id="dateButton"> Date </button>

https://jsfiddle.net/m5ergv2a/

Upvotes: 4

DinoMyte
DinoMyte

Reputation: 8858

Even though your declaration is current for initializing a jquery UI button, you need to associate it during the page load which can be done during document.ready function.

$().ready(function()
    {

$("#dateButton").button({
}); 

$("#dateButton").click(function(){
 // do stuff here
 alert();
});
});

Example : http://jsfiddle.net/DinoMyte/xBB5x/10222/

Also, make sure to get the reference to jquery-ui.css from CDN to confirm that the api is loaded correctly . 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

Upvotes: 0

Related Questions