So I have this little script that fetches word definition from database. It's working fine. But as soon as I try to replace the default html input and button with Bootstrap stuffs by including Bootstrap CDN link in the header, it no longer works. There is no error, but the script simply won't fetch the result.
I have tried with different CDN link and everything I could with my limited jQuery knowledge. But I stuck. Below is my script. I have not included PHP script that responses JSON to jQuery AJAX script because it works fine too.
How can I fix my script so that I get it working? Right now, even simply inserting CDN link in the header make the script stop working.
$('document').ready(function(){
$('#word-submit').on('click', function(){
var word = $('#word').val();
if ($.trim(word) != ''){
$.post('ajax/name.php', {word: word}, function(data){
var obj = jQuery.parseJSON(data);
console.log(obj);
});
};
});
});<html>
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<form autocomplete="off" class="form-inline">
<input type="text" id="word" >
<input type="button" id="word-submit" value="Tam" class="sr-only" >
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/global.js" charset="UTF-8"></script>
</body>
</html></div>
