The jquery file doesn't seem to be linking with my html code. The jquery file is suppose to validate the inputs and add the respective glyphicons depending on the validation. I have tried searching for errors, closing tags but can't find any problem. Could anyone please check and point me in the right direction. Thanks in advance.
//validate.js
function validateText(id) {
if ($("#" + id).val() == null || $("#" + id).val() == "") {
var div = $("#" + id).closest("div");
div.removeClass("has-success");
$("#glypcn" + id).remove();
div.addClass("has-error has-feedback");
div.append('<span id="glypcn' + id + '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
return false;
} else {
var div = $("#" + id).closest("div");
div.removeClass("has-error");
div.addClass("has-success has-feedback");
$("#glypcn" + id).remove();
div.append('<span id="glypcn' + id + '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
return true;
}
}
$(document).ready(function() {
$("#loginbtn2").click(function() {
if (!validateText("#USN")) {
return false;
}
if (!validateText("#Password2")) {
return false;
}
$("form#students_form").submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" type="/WP Project/image/png" href="/bmsce.png">
<title>BMS Login Page</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<style>
.one:hover {
color: red;
}
.modal-backdrop {
z-index: -1;
}
h4 {
cursor: pointer;
}
</style>
</head>
<body>
<h4 data-toggle="modal" data-target="#modal">
LOGIN
</h4>
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="Modal" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close one" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<div class="modal-title" id="ModalLabel">
<div align="center">
<img src="/WP Project/bmsce.png" width="150px" height="150px" />
</div>
</div>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li class="active"><a class="btn btn-danger" data-toggle="tab" href="#students">Students</a>
</li>
</ul>
<br />
<div class="tab-content">
<div class="tab-pane active" id="students">
<div class="well">
<form role="form" action="" id="students_form" method="post">
<div class="form-group">
<label class="control-label" for="USN" id="students_form">Username</label>
<div class="input-group">
<input type="text" class="form-control" id="USN" placeholder="Enter USN" name="username" size=30 aria-describedby="PasswordStatus" />
</div>
</div>
<div class="form-group">
<label for="Password2">Password</label>
<div class="input-group">
<input type="password" class="form-control" id="Password2" placeholder="Password" name="password" size=30 />
</div>
</div>
<hr />
<p>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-arrow-left"></span>Back</button>
<button type="button" class="btn btn-primary" id="loginbtn2"><span class="glyphicon glyphicon-lock"></span>Sign in</button>
<br />
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="validate.js"></script>
<script>
$(document).ready(function() {
$('#modal').modal({
backdrop: 'static',
keyboard: false,
show: false
});
});
</script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
You have included two jQuery versions in the one HTML file. Remove the
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> From above your DocType declaration
You seem to be loading two different versions of jquery in the same page:
jquery-2.1.3.min.js
jquery/2.1.1/jquery.min.js
Related
I'm trying to make Create Quiz Page. there should be dynamically inputs on-page. there is no defined number of questions and a number of answers to each question. for add question, I'm using bootstrap accordion and it works. after click add question it appends new accordion and inputs inside. but in a second-level load more after button click, nothing happens. also, I want dynamically add answers. I'm using same logic. after #question click I creating HTML element ad trying to append inside answersAccordion.
jQuery click event not working.
$(document).ready(function () {
var next = 0;
$("#add-more").click(function(e){
e.preventDefault();
let _html = '';
_html+='<div class="card">';
_html+='<div class="card-header" id="heading'+next+'">';
_html+='<h5 class="mb-0">';
_html+='<button class="btn btn-link" data-toggle="collapse" data-target="#collapse'+next+'" aria-expanded="true" aria-controls="collapse'+next+'">';
_html+='Quiz question: '+next;
_html+='</button>'
_html+='</h5>';
_html+='</div>';
_html+='<div id="collapse'+next+'" class="collapse" aria-labelledby="heading'+next+'" data-parent="#accordion">';
_html+='<div class="card-body">';
_html+='<input form="myform" type="text" name="questions[][question]">'
_html+='<input form="myform" type="file" name="questions[][image]">'
_html+='<div class="col-md-3">';
_html+='<button id="question" name="add-question" class="btn btn-primary">Add Question</button>'
_html+='<div id="answersAccordion">';
_html+='</div>';
_html+='</div>';
_html+='</div>'
_html+='</div>'
_html+='</div>'
$('#accordion').append(_html);
next+=1;
});
$("#question").click(function(e){
console.log(12121)
let _html = '';
_html+='<div class="ml-5">'
_html+='<input type="text" name="questions[][answers][][title]">';
_html+='<textarea name="questions[][answers][][description]"></textarea>';
_html+='<input type="file" name="questions[][answers][][image]" ';
_html+='</div>'
$(this).next().append(_html);
console.log($(e))
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<div class="col-md-12">
<button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
</div>
</div>
<form id="myform" method="post" action="post.php" enctype="multipart/form-data">
<button>send</button>
</form>
<div class="col-xs-12">
<div class="col-md-12" >
<h3> Actions</h3>
<div id="accordion">
</div>
</div>
</div>
</body>
</html>
console.log not working also
in the console, there is no error
There is other way to make the code better and cleaner.
I hope it helps.
$(document).ready(function () {
var next = 0;
$("#add-more").click(function(e){
e.preventDefault();
let _html = `
<div class="card">
<div class="card-header" id="heading ${next}">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-${next}" aria-expanded="true" aria-controls="collapse-${next}">
Quiz question: ${next}
</button>
</h5>
</div>
<div id="collapse-${next}" class="collapse" aria-labelledby="heading ${next}" data-parent="#accordion">
<div class="card-body">
<input form="myform" type="text" name="questions[][question]">
<input form="myform" type="file" name="questions[][image]">
<div class="col-md-3">
<button id="question" name="add-question" class="btn btn-primary add-question-${next}">Add Question</button>
<div id="answersAccordion">
</div>
</div>
</div>
</div>
</div>
`;
$('#accordion').append(_html);
$(`.add-question-${next}`).click(function(e){
let _html = `
<div class="ml-5">
<input type="text" name="questions[][answers][][title]">
<textarea name="questions[][answers][][description]"></textarea>
<input type="file" name="questions[][answers][][image]"
</div>
`;
$(this).next().append(_html);
});
next+=1;
});
});
I would like to automate the process of logging to a webpage everyday.
First I want the process of entering and submitting my credentials automatically working correctly and then I'll see how I can make it run periodically with cron jobs or something like that.
Here is the source code of the page I want to login to : (https://customer.sunvalleytek.com/login)
<html lang="en"><head>
<title>Sunvalley - Your Login | RAVPower, TaoTronics, HooToo, VAVA</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-KC4S8Q"></script><script type="text/javascript">
var ctxPath = '';
var brand = 'RAVPower';
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/bootstrapValidator.min.css">
<link rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="/css/styles.css?v=1.0">
<script src="/js/jquery-1.12.1.min.js"></script>
<script src="/js/bootstrap/bootstrap.min.js"></script>
<script src="/js/bootstrap/bootstrapValidator.js"></script>
<script src="/js/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="/js/util.js"></script>
<script src="/js/jquery.blockUI.js"></script>
<script src="/js/i18n/front-lang-en.js"></script>
<script src="/js/front-base.js"></script>
<script src="/js/common.js"></script>
<link href="/images/favicon.ico" type="image/x-icon" rel="icon">
<link href="/images/favicon.ico" type="image/x-icon" rel="Shortcut Icon"><!--地址栏和标签上显示图标-->
<link href="/images/favicon.ico" type="image/x-icon" rel="Bookmark"><!--收藏夹显示图标-->
<script type="text/javascript">
var pageValidate = {
fields:{
email: {
validators:{
notEmpty: {
message: bootstrapValidatorMsg.required
},
emailAddress: {
message: bootstrapValidatorMsg.email
}
}
},
password: {
validators:{
notEmpty: {
message: bootstrapValidatorMsg.required
}
}
}
}
};
var login = {
forms:[{
id:'loginForm',
submit:true,
url: '/noaccount/login',
validate:pageValidate,
confirmFn:function(rtmsg){
var opt;
if(rtmsg.SUCCESS){
if(rtmsg.backto){
window.location.href = ctxPath + rtmsg.backto;
}else{
window.location.href = ctxPath + "/account/welcome";
}
}else{
$('#boxModalTitle').html(PromptMsg.prompt);
$('#boxModalBody').html(rtmsg.MESSAGE);
opt = function () {
};
$('#boxModal').modal('show');
$('#boxModal').on('hide.bs.modal', opt);
}
}
}]
};
var pageValidateResetPwd = {
fields:{
accountEmail: {
validators:{
/*notEmpty: {
message: bootstrapValidatorMsg.required
},
emailAddress: {
message: bootstrapValidatorMsg.email
}*/
}
}
}
};
var resetPwd = {
forms:[{
id:'resetPwdForm',
submit:true,
url: '/noaccount/password/reset',
validate:pageValidateResetPwd,
confirmFn:function(rtmsg){
var opt;
if(rtmsg.SUCCESS){
$('#forgetPasswordModel').modal('hide');
$('#boxModalTitle').html(PromptMsg.prompt);
opt = function () {
};
$('#boxModalBody').html(rtmsg.MESSAGE);
$('#boxModal').modal('show');
$('#boxModal').on('hide.bs.modal', opt);
}else{
$('#msgTip').text(rtmsg.MESSAGE);
$('#msgTip').show();
}
},
beforeSendFn:function(){
$('#msgTip').text("");
}
}]
};
$().ready(function(){
bootValidate(login.forms);
bootValidate(resetPwd.forms);
});
</script>
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KC4S8Q"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KC4S8Q');</script>
<!-- End Google Tag Manager -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 login margin-t1">
<div class="logo">
<img src="/images/login-logo.png" class="img-responsive center-block">
</div>
<form role="form" id="loginForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<input type="hidden" name="brandId" id="brandId" value="1">
<input type="hidden" name="preUrl" value="null">
<input type="hidden" name="backto" value="">
<h5>Your session has time out, please log in again.</h5>
<!-- email -->
<div class="form-group has-feedback">
<label class="control-label">Email :</label>
<input type="text" id="email" name="email" autocomplete="off" autofocus="autofocus" class="form-control" placeholder="enter your e-mail" data-bv-field="email"><i class="form-control-feedback" data-bv-icon-for="email" style="display: none;"></i>
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="email" data-bv-result="NOT_VALIDATED" style="display: none;">This field is required.</small><small class="help-block" data-bv-validator="emailAddress" data-bv-for="email" data-bv-result="NOT_VALIDATED" style="display: none;">Invalid Email Address</small></div>
<!-- end email -->
<!-- password -->
<div class="form-group has-feedback">
<label class="control-label">Password :</label>
<input type="password" id="password" name="password" autocomplete="off" class="form-control" placeholder="confirm password" data-bv-field="password"><i class="form-control-feedback" data-bv-icon-for="password" style="display: none;"></i>
<a class="pull-right forget" href="#" data-toggle="modal" data-target="#forgetPasswordModel">Forget password</a>
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="password" data-bv-result="NOT_VALIDATED" style="display: none;">This field is required.</small></div>
<!-- end password -->
<!-- sign -->
<div class="form-group text-center">
<button type="submit" class="btn blue-bg" data-toggle="modal">SIGN IN</button>
<a class="btn blue-bg" href="/noaccount/register/init?backto=&utm_source=&utm_medium=&utm_campaign=">Register Now</a>
</div>
<!-- end sign -->
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="forgetPasswordModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Forget your password?</h4>
</div>
<div class="modal-body">
<p class="text-center">Please enter your email address below. Your will receive a link to reset your password.</p>
<form role="form" id="resetPwdForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<div class="form-group has-feedback">
<span id="msgTip" class="col-md-5 col-md-offset-3 col-sm-6 col-xs-9 red-color"></span>
<span class="col-md-5 col-md-offset-3 col-sm-6 col-xs-9">
<input type="text" class="form-control" id="accountEmail" name="accountEmail" autocomplete="off" placeholder="user#domain.com" data-bv-field="accountEmail"><i class="form-control-feedback bv-no-label" data-bv-icon-for="accountEmail" style="display: none;"></i>
</span>
<span class="col-md-2 col-sm-2 col-xs-3">
<button type="submit" class="btn org-bg">Submit</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END modal -->
<!-- modal box start-->
<div class="profile-modal">
<div class="modal fade" id="boxModal" tabindex="-1" role="dialog" aria-labelledby="boxModalTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h4 class="modal-title" id="boxModalTitle"></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h5 id="boxModalBody" style="margin-bottom:30px;"></h5>
</div>
<div class="form-group text-center">
<span class="col-md-4 col-md-offset-4">
<button type="button" class="btn org-bg" data-dismiss="modal">OK</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- modal box end-->
</body></html>
I have tried to automatically enter my credentials with HTML using POST method (https://crunchify.com/automatic-html-login-using-post-method-autologin-a-website-on-double-click/) and also using a different method outlined here (https://help.risevision.com/hc/en-us/community/posts/115019363963-Auto-Login-on-Webpage-using-Javascript) where I replaced the http://www.exemple.com url by https://customer.sunvalleytek.com/login but it doesn't work.
My guess is that the form type is in Javascript whereas the links just above outline how to fill an html type form. However I haven't found anything about auto-filling Javascript type forms.
Any help would be greatly appreciated.
Many thanks.
So I have this code, I am trying to make the login/register buttons to hide the buttons once clicked, they instead flash (hide and quickly come back).
I am new to web development in general so I may be doing something stupid
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--CSS-->
<link rel="stylesheet" href="Login.css" />
<meta charset="utf-8" />
</head>
<body>
<div class="jumbotron">
<!--Login/Register Tabs-->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#loginTab">Login</a></li>
<li><a data-toggle="tab" href="#registerTab">Register</a></li>
</ul>
<!--Tabs Content-->
<div class="tab-content">
<div id="loginTab" class="tab-pane active">
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="loginUsernameText" type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="loginPasswordText" type="password" class="form-control" placeholder="Password">
</div>
<button id="loginButton" class="btn btn-primary btn-block">Login</button>
</form>
</div>
<div id="registerTab" class="tab-pane fade">
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="registerUsernameText" type="text" class="form-control" placeholder="Username (3-24 Char)">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="registerPasswordText" type="password" class="form-control" placeholder="Password (3-24 Char)">
</div>
<button id="registerButton" class="btn btn-primary btn-block">Register</button>
</form>
</div>
</div>
</div>
<!--Scripts-->
<script src="Login.js" type="text/javascript"></script>
</body>
</html>
Login.js written with jquery
$('#loginButton').click(function () {
$('#loginButton').addClass('hidden');
$('#registerButton').addClass('hidden');
});
$('#registerButton').click(function () {
$('#loginButton').addClass('hidden');
$('#registerButton').addClass('hidden');
});
Any help is appreciated
SOLVED: settings attribute type="button" for the buttons saved my life, thanks for help!
try the following :
1) Add type="button" attributes to your buttons, might save you from some cases where buttons in form act as submits unless stated as of type=button.
2) Rewrite to the following
var registerButton = $('#registerButton');
var loginButton= $('#loginButton');
function hideButtons(){
registerButton.hide(); // or add your custom class here
loginButton.hide(); // or add your custom class here
return false; // avoid bubling
}
loginButton.on('click',function () {
hideButtons();
});
registerButton.on('click',function () {
hideButtons();
});
Tell me if it worked
var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q=funny&searchType=image&safe=high";
$(function () {
var jqxhr = $.getJSON(url, function () {
console.log("success");
}).done(function (data) {
for (var i = 0; i < 4; i++) {
var item = data.items[i];
document.getElementById("content11").innerHTML += "<br><div class='c'>"
+ "<div class='b'><img src="+ item.link +" height=200px width=200px /></div><div class='a mn-video-title'> "
+ item.title+"</div></div>";
}
}).fail(function (data) {
console.log("error");
});
});
button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>
Hello Friends, I am new in google custom search API and jquery.
This code is perfect on page load but i want to load images on button click.
How to load images on button click i tried other peoples code but it can't do what i want.
I want to get the URL of images from custom search and display that images in html.
so, please help me
Add the json calling function inside the button click.And passing the input string to the URL
$('#findNow').on('click',function(){
document.getElementById("content11").innerHTML ="";
var a =$('#search1').val();
var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q="+a+"&searchType=image&safe=high";
var jqxhr = $.getJSON(url, function() {
console.log("success");
}).done(function(data) {
for (var i = 0; i < 4; i++) {
var item = data.items[i];
document.getElementById("content11").innerHTML += "<br><div class='c'>" + "<div class='b'><img src=" + item.link + " height=200px width=200px /></div><div class='a mn-video-title'> " + item.title + "</div></div>";
}
}).fail(function(data) {
console.log("error");
});
})
button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>
I'm in a refactoring mood, so I've moved all my login controller stuff out of Autenticate.html and into HTML templates. It was all working before the move but now the Javascript I am using is not being called. I have Javascript like this:
login.js
$(function () {
$("#userNameInput").keypress(function (e) {
if (e.keyCode === 13) $("#passwordInput").focus();
});
$("#passwordInput").keypress(function (e) {
if (e.keyCode === 13) $("#loginButton").click();
});
});
Authenticate.html
<!DOCTYPE html>
<html ng-app="iBOSModule">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /><base href="/">
<title>Welcome to iBOS</title>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/Scripts/promise-tracker.js"></script>
<script src="/Scripts/angular-busy.min.js"></script>
<script src="/Scripts/http-interceptor.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="/Scripts/angular-animate.min.js"></script>
<script src="/Scripts/dirPagination.js"></script>
<script src="/Scripts/linq.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/angular/components/login/scripts/login.js"></script>
<script src="/angular/components/shared/scripts/app.js"></script>
<script src="/angular/components/login/controllers/login.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/acs.css" rel="stylesheet"/>
</head>
<body style="background-image: url(/Content/Images/Jet-Above-The-Clouds.jpg);" ng-cloak>
<div class="container body-content top-buffer">
<ng-include src="'/angular/components/login/templates/login-template.html'"></ng-include>
</div>
</body>
</html>
login-template.html
<div class="well center-block" style="max-width: 489px;" ng-controller="LoginCtrl">
<div class="container">
<div class="row">
<img src="/Content/Images/ibos_logo.png" class="img-responsive" />
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer remove-bottom-buffer" ng-show="hasFailed()">
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Invalid credentials. Please try again.
</div>
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer remove-bottom-buffer" ng-show="hasFault()">
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
An error occurred.
</div>
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer">
<input ng-model="userName" type="text" class="form-control" placeholder="User Name" ng-disabled="isAuthenticating()" id="userNameInput" tabindex="0">
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer">
<input ng-model="password" type="password" class="form-control" placeholder="Password" ng-disabled="isAuthenticating()" id="passwordInput" tabindex="1">
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer">
<button id="loginButton" class="btn btn-default pull-right" ng-hide="isAuthenticating()" ng-click="authenticate()" tabindex="2">Login</button>
<button id="loadingButton" class="btn btn-default pull-right disabled" ng-show="isAuthenticating()"><img src="/Content/Images/ajax-loader.gif" /></button>
</div>
</div>
</div>
The problem is that the Javascript is not being called when the key press events are fired. The actual bindings are happening - I checked in F12 and the binding function is being called.
Nothing else has changed. Why are the functions not being called?