Javascript jquery AutoComplate İnput not Working .I can try but not this. Add package link but AutoComplate İnput not Working.
I want only add pack after autocomplete input working. Only this..I think insertCell Hard this.I dont understend this. id ='dap'
$(function() {
var availableTags = [
"arta",
"barta",
"barta2",
];
$("#dap").autocomplete({
source: availableTags
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title></title>
</head>
<body>
<form method="post" action="add.php">
<table id="table1">
<tr>
<br>
<td colspan="4"><a onclick="myFunction1()" style=" color: #000; margin-top: 10px"><i></i> Paket Ekle</a> <a onclick="myDeleteFunction1()" style="color: #000; margin-top: 10px"><i ></i> Paket Sil</a></td>
</tr>
<tr>
<td valign="bottom"><strong>GTIP No.</strong></td>
</tr>
<tr>
<td><input name="dap" type="text" style="width:90%; margin-top: 15px"></td>
<script>
var i = 1;
function myFunction1() {
var table = document.getElementById("table1");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML = "<input name='dap" + i + "' id='dap' type='text' style='width:90%;margin-top:15px;' >";
i++;
}
function myDeleteFunction1() {
document.getElementById("table1").deleteRow(-1);
}
</script>
</table>
</form>
</body>
</html>
You can use on to bind event on dynamically added element
$(function() {
var availableTags = [
"arta",
"barta",
"barta2",
];
$(document).on('keydown.autocomplete', '#dap', function() {
$(this).autocomplete({
source: availableTags
});
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title></title>
</head>
<body>
<form method="post" action="add.php">
<table id="table1">
<tr>
<br>
<td colspan="4"><a onclick="myFunction1()" style=" color: #000; margin-top: 10px"><i></i> Paket Ekle</a> <a onclick="myDeleteFunction1()" style="color: #000; margin-top: 10px"><i ></i> Paket Sil</a></td>
</tr>
<tr>
<td valign="bottom"><strong>GTIP No.</strong></td>
</tr>
<tr>
<td><input name="dap" type="text" style="width:90%; margin-top: 15px"></td>
<script>
var i = 1;
function myFunction1() {
var table = document.getElementById("table1");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML = "<input name='dap" + i + "' id='dap' type='text' style='width:90%;margin-top:15px;' >";
i++;
}
function myDeleteFunction1() {
document.getElementById("table1").deleteRow(-1);
}
</script>
</table>
</form>
</body>
</html>
Related
This question already has answers here:
What is DOM Event delegation?
(10 answers)
Closed 4 years ago.
I have a table in which an input control calls a java script event
oninput="this.value=this.value.replace(/[^0-9]/g,'');
By Clicking on Add Row new Row is being inserted but i want to call this event on new row as well . This event is to stop except positive whole numbers
using the following code.
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Roll No</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='rollno0' oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />
<script>
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "rollnoo" + (rowCount);
element1.className = "form-control";
cell1.appendChild(element1);
rowCount = parseInt(rowCount)+ 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
</script>
</body>
</html>
Try the following syntax to add event handler to newly created element:
element1.oninput = function() {
this.value = this.value.replace(/[^0-9]/g,'');
}
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Roll No</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='rollno0' oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />
<script>
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "rollnoo" + (rowCount);
element1.className = "form-control";
element1.oninput = function() {
this.value = this.value.replace(/[^0-9]/g,'');
}
cell1.appendChild(element1);
rowCount = parseInt(rowCount)+ 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
</script>
</body>
</html>
First let me start by saying I am very new to javascript. I am currently studying the subject as part of a course I am doing.
I have an assignment that requires me to put together image slices in a table built by javascript and place it in a on a HTML page.
I have had success with all of this except when i attempt to resize the table and div section with CSS the images separate leaving gaps in the image. Is there anyone out there who can see why i am getting this issue? Im pulling my hair out.
here is my code.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bazaar Ceramics</title>
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ie_only.css"/> <![endif]-->
<link href="../../CSS/ie_only.css" rel="stylesheet" type="text/css">
<link href="../../CSS/laptop.css" rel="stylesheet" type="text/css">
<link href="../../CSS/Layout.css" rel="stylesheet" type="text/css">
<link href="../../CSS/mobile.css" rel="stylesheet" type="text/css">
<link href="../../CSS/style.css" rel="stylesheet" type="text/css">
<link href="../../CSS/tablet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainwrapper">
<div id="header"><img id="logo" src="../../images/bazaar-logo.jpg" alt="Bazaar Ceramics Logo"><h1 class="title">Bazaar Ceramics</h1>
</div><!--this is the end of div Header-->
<div id="ImageContent"><script src="../../Script/ImageContent.js"> </script></div><!--this is the end of div id ImageContent-->
<div id="formContent">
<h1 class="prodhead">Order Item</h1>
<form action="#" name="orders">
<table id="formtab">
<tr>
<td width="20%"><label>Item Description:</label></td> <td><input type="text" name="description" size="100%" value="Red Bowl" disabled></td>
</tr>
<tr>
<td><label>Quantity:</label></td><td><input type="text" name="quantity" value="1" min="1"></td>
<tr>
<td><label>Price:</label></td><td><input type="text" name="price" value="$350" disabled></td>
</tr>
<tr>
<td><label>Total Price:</label></td><td><input type="text" name="total"></td>
</tr>
<tr>
<th colspan="2"><input type="button" name="clear" value="Clear Form" id="button"> <input type="button" name="calculate" value="Calculate Total" id="button"> <input type="button" name="Submit" value="Submit Order" id="button"></th>
</table>
</form>
</div><!--this is the end of div id formContent-->
<div id="footer">
Home
Close
<br style="clear:both"><p id="copyright">Copyright 2018 Online System Solutions</p></div><!--this is the end of dive id footer-->
</div><!--end of mainwrapper-->
</body>
</html>
CSS Code
.myTable {
max-width:90%;
}
.myImg{
display:block;
max-width: 100%;
height: auto;
width: auto;
vertical-align:middle;
}
javascript
// constants
var colCount=5;
var rowCount=4;
// input data
var col1 = new Array("r1_c1","r2_c1","r3_c1","r4_c1");
var col2 = new Array("r1_c2", "r2_c2", "r3_c2", "r4_c2");
var col3 = new Array("r1_c3", "r2_c3", "r3_c3", "r4_c3");
var col4 = new Array("r1_c4", "r2_c4", "r3_c4", "r4_c4");
var col5 = new Array("r1_c5", "r2_c5", "r3_c5", "r4_c5");
// create the column array.
var collist = [col1,col2,col3,col4,col5];
// make the table.
document.write('<table class="myTable" cellspacing="0" cellpadding="0" align="center">');
for (rownum = 1; rownum <= rowCount; rownum++) {
document.write("<tr>");
for (colnum = 1; colnum <= colCount; colnum++) {
document.write("<td>" + '<img src="../../images/Large/bcpot002_' + (collist[(colnum-1)])[(rownum-1)] + '.jpg"' + 'class="myImg">' + '</img>' + "</td>");
}
document.write("</tr>");
}
document.write('</table>')
Any help here would be great thanks.
I was challanged recently to "hack" into my router, by that I mean already having connected to the internet, but hack into the local IP. So basically bypass the login screen. The router is a Livebox. I already have tried looking at the source code but the password seems to be hidden.
Here's a picture of the login screen.
If you can help than thank you very much.
Oh by the way, here's the source code:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript">
var remote_clt=0;
var sipp_proxy_flag=1;
var pcp_gui_enable=1;
var nat_from_upnp=1;
var my_auto_detect_fxo=0;
var my_isolate_wlan=1;
var X02_pf=1;
var adsl_para_page=0;
var my_ddns=1;
var my_wlan_mac=0;
var my_snmp=0;
var my_dialup=0;
var my_printer=0;
var my_bridge=0;
var my_8021x=0;
var my_tiny=0;
var my_vpn=0;
var my_upnp=1;
var my_usb=1;
var my_usb_storage=1;
var my_usb_printer=1;
var operation_func=10;
var my_wps=1;
var my_wcn=1;
var my_ralink_ver=0;
var feature_func=1;
var product_code=1024020;
var my_file_share=1;
var my_umts=0;
var vlan_func_enable=1;
var vlan_ip="";
var vlan_mask="";
var my_qos=2;
var my_isdn=0;
var my_voip=1;
var FXS_Num=8;
var my_voip_h323=0;
var my_voip_sip=1;
var ipsec_func=0;
var pptp_func=0;
var br_dhcpd_func=0;
var iptv_func=0;
var static_rt_func=0;
var my_upnpIgd=1;
var my_upnpAv=1;
var PM="DSL Router";
var BACKUP_LOG_NAME="dsl_log.log";
var BACKUP_CONFIG_NAME="config_dsl.bin";
var resetButton=0;
var hasUpgrade=0;
var ftpcRun=0;
var dhcpd_fixip_func=1;
var vendor_code=6;
var my_http_redir=0;
var arcor_umtsPin=0;
var my_ncidd=0;
var ipv6_service=1;
var ipv6_enable=1;
var hyper_link="<a href='http://www.arcadyan.com' target='_blank'>";
var urlname="www.arcadyan.com";
var product_name="Arcadyan ARV7519";
var vendor_name="DSL-EasyBox";
var company="Arcadyan Inc.";
var mouseover="'#FF6600'";
var mouseout="'#FFFFFF'";
var wizardbg="'#FFFFFF'";
var menu_link="<td height='0' align='left' bgColor='#FFFFFF' valign='middle'>";
var vendor_no=2;
var helplink="<p></p>";
var logo_fn="logo.gif";
var help_hyper_link="<a href='http://www.arcadyan.com/802' target='_blank'>";
var help_urlname="www.arcadyan.com/802";
var fw_hyper_link="<a href='http://www.arcadyan.com' target='_blank'>";
var fw_urlname="www.arcadyan.com";
var product_pic_fn="product_zz.gif";
var firmware_ver='00.96.806B';
if (parent.location.href != window.location.href)
parent.location.href = window.location.href;
function evaltF() {
document.tF.submit();
}
function kDown(e)
{
var key = 0 ;
if(window.event) key = window.event.keyCode;
else if(e) key = e.which ;
if(key==13) document.tF.submit();
//if (navigator.appName =='Netscape'&&(e.which ==3||e.which ==2|| e.which ==13))
// document.tF.submit();
//else if (navigator.appName == 'Microsoft Internet Explorer' &&(event.keyCode == 13))
// document.tF.submit();
}
document.onkeypress=kDown;
if (document.layers) window.captureEvents(Event.KEYDOWN);
//window.onkeypress=kDown;
function init()
{
var f=document.tF;
f.pws.focus();
if(remote_clt==1)
f.user.readOnly=false;
}
</script>
<link rel="stylesheet" type="text/css" href="fonts.css">
<link rel="stylesheet" type="text/css" href="page.css">
<link rel="stylesheet" type="text/css" href="menu.css">
<link rel="stylesheet" type="text/css" href="header.css">
<link rel="stylesheet" type="text/css" href="contener.css">
<link rel="stylesheet" type="text/css" href="subcontener.css">
<link rel="stylesheet" type="text/css" href="array.css">
<link rel="stylesheet" type="text/css" href="hardware.css">
<link rel="stylesheet" type="text/css" href="button.css">
<link rel="stylesheet" type="text/css" href="lbpopup.css">
<link rel="stylesheet" type="text/css" href="progressbar.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<style type="text/css">
.style1 {
text-align: right;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" cellpadding="0" cellspacing="0" width="97%" height="83">
<tr height="55">
<form ACTION="/cgi-bin/changef.exe" method="post" name="tFF">
<input type="hidden" name="language_flag" value="0">
<input type="hidden" name="menupage" value="/login.stm">
<td class="header" width="313"><div id="header"><h4>livebox</h4></div></td>
<td class="style1">
<img src="/images/language_en_gray.gif" width="70" height="29" border="0">
<input type="image" src="/images/language_es.gif" width="70" height="29" border="0">
</td>
</form>
</tr>
<tr>
<td class= bgstripe height="28" colspan="2"> </td>
</tr>
</table>
<form action="/cgi-bin/login.exe" method="post" name="tF">
<div id="menu" style="margin-left: 40%; margin-top: 60px;">
<table>
<tr>
<td class="topleft"></td>
<td class="top"></td>
<td class="topright"></td>
</tr>
<tr>
<td class="left"></td>
<td>
<div class="info_accueil">
<table class="info_accueil">
<tr>
<td class="info_pref"><img src="images/preferencesbutton.gif">Authentication</td>
</tr>
<tr>
<td class="info_label">Login:</td>
</tr>
<tr>
<td class="info_field"><input type="text" name="user" value="admin" class="login" readonly></td>
</tr>
<tr>
<td class="info_label">Password:</td>
</tr>
<tr>
<td class="info_field"><input type="password" maxlength="12" size="32" name="pws" class="password"></td>
</tr>
<tr>
<td class="info_statusnok"> </td>
</tr>
</table>
</div>
</td>
<td class="right"></td>
</tr>
<tr>
<td class="sepleftbig"></td>
<td class="sepactbig">
Click here to validate <img src="images/nextbutton.gif" border="0"></td>
<td class="right"></td>
</tr>
<tr>
<td class="bottomleft"></td>
<td class="bottom"></td>
<td class="bottomright"></td>
</tr>
<tr><td colspan=3></td></tr>
<tr><td colspan=3></td></tr>
</table>
</div>
</form>
<br><br><br>
<p>
<style type="text/css">
p { text-align:center;
font-size:20;
color: #FF6600;
}
a {
color: #FF6600;
font-weight: bold;
text-decoration: underline;
}
A:link {text-decoration: underline color: #FF6600;}
A:visited {text-decoration: underline color: #FF6600;}
A:active {text-decoration: underline color: #FF6600;}
A:hover {text-decoration: underline; color: #FF6600;}
</style>
<a href="http://www.orange.es/livebox/apps">
Here please download the Livebox Apps for your Smartphone
</a>
</p>
<p>
<a href="http://www.orange.es/livebox/apps">
<img src="/images/QR_code.png">
</a>
</p>
<script language="JavaScript">
init();
</script>
</body>
</html>
I think this link will help you understand how brute-force works and I hope it will guide you the right way
As far as I can tell (and I may be wrong), when you log into a router, it is like logging into a computer remotely.
That means you can automatically cross XSS, MySQL injection, and any other form of web hacking. There may be a script that you can plug directly into the USB port of your router to effectively hack it or just brute force your way in.
I am not a hacker by any means so anything you read here is merely educated guesses.
Hope I helped.
I'm creating a data grip for a project and I need to use Bootstrap Datepicker to the Date field.
The problem is that in the table only the first row (that is previously created) has the datepicker working.
If I create a second row, the datepicker isn't working.
Could you please help me? I would like to have the datepicker working fine in every created row and only on the Date field.
Below is my code:
function getElementsByClassName(c,el){
if(typeof el=='string'){
el=document.getElementById(el);
}
if(!el){
el=document;
}
if(el.getElementsByClassName){
return el.getElementsByClassName(c);
}
var arr=[],
allEls=el.getElementsByTagName('*');
for(var i=0;i<allEls.length;i++){
if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
}
return arr;
}
function killMe(el){
return el.parentNode.removeChild(el);
}
function getParentByTagName(el,tag){
tag=tag.toLowerCase();
while(el.nodeName.toLowerCase()!=tag){
el=el.parentNode;
}
return el;
}
// Delete table row
function delRow(){
killMe(getParentByTagName(this,'tr'));
}
// Insert table row
function addRow() {
var table = getParentByTagName(this,'table')
var lastInputs=table.rows.length>2?
table.rows[table.rows.length-2].getElementsByTagName('input'):[];
for(var i=0;i<lastInputs.length-1;i++){
if(lastInputs[i].value==''){return false;}
}
// New table row vars
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.id = "expenseDate";
element1.type = "text";
element1.className="form-control datepicker";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.className="form-control";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.className="form-control";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.className="form-control";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "button";
element5.className="del btn btn-sm btn-danger";
element5.value='X';
element5.onclick=delRow;
cell5.appendChild(element5);
}
#ExpensesTable {
margin-top: 30px;
}
#ExpensesTable tr {
margin: 10px 0px 10px 0px;
}
#ExpensesTable td {
padding: 5px 5px 0px 5px;
}
#ExpensesTable th {
padding: 0px 5px 5px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<table id="ExpensesTable">
<tr>
<th>Date:</th>
<th>From:</th>
<th>To:</th>
<th>Nr. Km:</th>
</tr>
<tr>
<td><input class="add btn btn-sm btn-success" type="button" value="Add expense" id="AddExpense"/></td>
</tr>
</table>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
(function(){
var els=getElementsByClassName("add","ExpensesTable");
for(var i=0;i<els.length;i++){
els[i].onclick=addRow;
}
els[0].onclick();
})();
</script>
<script>
$('#expenseDate').datepicker({
});
</script>
</body>
</html>
try to leverage jquery to speed coding up and then you end up with like,, 4-5 lines of code to do what you need :)
cheers,
$('.dateP').datetimepicker();
$('.dupli').on( 'click', function(e){
var dup = $('.cpy').first().clone();
$('.table').append( dup );
$('.dateP').datetimepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<table class="table table-striped">
<tr>
<th>Event name</th>
<th>Date:</th>
<td><button type="submit" class="btn btn-default dupli">+</button></td>
</tr>
<tr class="cpy">
<td>
<input type="text" class="form-control" id="e1">
</td>
<td>
<div class='input-group dateP'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</td>
</tr>
</table>
Data shows in console but cannot display in browser. I almost tried in all browser but same result. row's are creating according to search result but nothing appears inside rows, all rows are blank. Any help will be appreciable.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMDB</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="imdb.js"></script>
</head>
<body>
<div class="container">
<h1>Search IMDB</h1>
<input type="text" id="movieTitle" class="form-control" placeholder="Ex: Titanic"/>
<button id="searchMovie" class="btn btn-primary btn-block">Search Movie</button>
<table class="table table-striped" id="results">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Rating</th>
<th>Image</th>
</tr>
</thead>
<tbody id="container">
<tr id="template">
<td></td>
<td class="plot"></td>
<td class="rating"></td>
<td><img src="" class="poster"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
imdb.js
(function(){
$(init);
function init(){
$("#searchMovie").click(searchMovie);
var movieTitle = $("#movieTitle");
var tbody = $("#container");
var template = $("#template").clone();
function searchMovie(){
var title = movieTitle.val();
$.ajax({
url: "http://api.myapifilms.com/imdb/idIMDB?title="+title+"&limit=3&token=1ec543f9-d889-4865-8aab-62a2515f24e8",
dataType: "jsonp",
success: renderMoviesWithTemplate
}
);
function renderMoviesWithTemplate(movies){
console.log(movies);
tbody.empty();
for(var m in movies){
var movie = movies[m];
var title = movie.title;
var plot = movie.plot;
var rating = movie.rating;
var posterUrl = movie.urlPoster;
var movieUrl = movie.urlIMDB;
var tr = template.clone();
tr.find(".link")
.attr("href",movieUrl)
.html(title);
tr.find(".plot")
.html(plot);
tr.find(".rating")
.html(rating);
tr.find(".poster")
.attr("src",posterUrl);
tbody.append(tr);
}
}
}
}
})();