Unable to add autocomplete feature in Cordova iOS Application - javascript

Here is my html code for performing auto complete text box in android cordova project but it is now working where as in the fiddle it is working
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Trial App</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var aTags = ["Krishna", "Shubham", "Sachin", "Android", "Windows", "Himalaya", "Bahubali", "Win", "Game"];
$("#autocomplete").autocomplete({
source: aTags
});
$('#get_value').on('click', getval);
function getval() {
var value_inside = $("#autocomplete").val();
alert("Value inside text box is: " + value_inside);
}
});
</script>
<body>
<input type='text' title='Tags' id='autocomplete' />
<button id="get_value">get</button>
</body>
</html>
the link of the fiddle is: https://jsfiddle.net/krishlahoti/g83x5wLz/
In the fiddle i have used the same code as in the above HTML file the fiddle is working as desired but the cordova app doesn't.
Attaching a screenshot along with this question to make it more clear
Refer this screenshot for the Cordova iOS

Finally after a lot of research and help from my colleagues i could finally achieve to my goal.
Below is the final code that works as needed in the question:
<!DOCTYPE html>
<html>
<head>
</head>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
var aTags = ["Krishna", "Shubham", "Sachin", "Android", "Windows", "Himalaya", "Bahubali", "Win", "Game"];
$("#autocomplete").autocomplete({
source: aTags
});
$('#get_value').on('click', getval);
function getval() {
var value_inside = $("#autocomplete").val();
alert("Value inside text box is: " + value_inside);
}
});
</script>
<body>
<input type='text' title='Tags' id='autocomplete' />
<button id="get_value">get</button>
</body>
</html>

Related

jqxDropDownList Listing is seperately opened at bottom of the page

If I include all the lib jqwidgets/jqx-all.js
it works well, but if I use only the necessary files given in their example : https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm#demos/jqxdropdownlist/defaultfunctionality.htm
then the listing appears at the end of the html file and not just under the widget.
I tried to include all the necessary files, didn't succeed.
Any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait"
];
// Create a jqxDropDownList
$("#jqxWidget").jqxDropDownList({ source: source, placeHolder: "Select Item", width: 250, height: 30});
});
</script>
<br/>
<br/>
<div id='jqxWidget'>
</div>
<hr>
</div>
I figured out the problem
it was the old version that I used : jqwidgets-ver8.0.0.zip
jqwidgets-ver8.3.2.zip solved the issue
So always update to latest version...

How to have IFrame redraw everything at once

I am trying to make a markdown editor, but I am having an issue with my IFrame. It sets the IFrame source to about:blank to clear the screen, but it doesn't write to the iframe again until a key is pressed. How can I fix this?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markdown Edit</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="editor">
<textarea id="textbox" cols="30" rows="10" oninput="updatePreview()"></textarea>
</div>
<iframe frameborder="0" id="preview"></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.4.2/markdown-it.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="scripts.js"></script>
</body>
</html>
JS:
window.onerror = function(msg, url, linenumber) {
alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
return true;
}
var textbox = document.getElementById("textbox");
var preview = document.getElementById("preview");
var md = window.markdownit();
preview.contentWindow.document.open();
function updatePreview() {
preview.src = "about:blank";
preview.contentWindow.document.write(md.render(textbox.value));
}
Update
You could use jquery on key up function? So after the cuser has finished typing it will update?
$( "#target" ).keyup(function() {
#update iframe code here
});
You could refresh the iframe every 30 seconds?
<script>
window.setInterval("reloadIFrame();", 30000);
function reloadIFrame() {
document.frames["framename"].location.reload();
}
</script>
I always save this peace of code. It's great.

Why is this JavaScript button click failing to call a function?

I am beginner of javascript.
but it doesn't work. plz help me.
I am using Microsoft VSCode.
This is my main.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="javascript" src="script.js"/>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css"/>
<link rel="stylesheet" href="style.css"/>
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
</body>
</html>
This is script.js
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function(){
console.log("onclick event start");
};
You need change the:
<link rel="javascript" src="script.js"/>
into:
<script src="script.js"></script>
first choice:put script at the bottom of the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span></h1>
</div>
<script>
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
</script>
</body>
</html>
second choice:move your script content to the window.onload=function(){}
window.onload = function() {
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
};
if you choose this,you have to change your script tag
<link rel="javascript" src="script.js"/>
to
<script src="script.js"></script>
The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).
So, you need to change this code:
<link rel="javascript" src="script.js"/>
into this:
<script type="text/javascript" src="script.js"></script>
Use this tag not the link tag
<script src="script.js"></script>
Also fix your html you are missing an h1 end tag
<h1><span class="badge" id="loginbtn">main</span></h1>
Add Script tag as below.
You have used link tag instead of script.
<script type="text/javascript" src="script.js">
actually i was confused.
that was location of javascript.
solution
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
**<script type="text/javascript" src="script.js"></script>**
</body>
i put the javascript code in the body.

Jquery countdownTimer Plugin not working

I downloaded this jquery plugin: http://harshen.github.io/jquery-countdownTimer/
specifically to use the Reverse countdown to zero from time set to only minutes timer.
I am pretty sure I followed the instructions correctly but the plugin does not work. I have never used jQuery or plugins before, so I'm not sure if I am missing something or just doing something completely wrong (or both).
My Javascript test alert does run.
I will attach my code for you all to look at. Not sure if it has to do with my file paths, but I've attached an image of that as well. Please tell me what could be causing the problem and how to fix. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
And here is a picture of my project folder, containing the files:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>

Javascript button onclick function undefined

im currently using PhoneGap and for some reason when i click a button, the function is undefined. iv tryed putting it inside the deviceReady function, as well as the document ready function, but neither seemed to make a difference.
I can't see what the problem is, if anyone can help that would be great.
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/libary.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"></script>
<title>Libary</title>
</head>
<body>
<div id="capture" class="wrapper" data-role="page">
<div data-role="header">
<h1>Libary</h1>
</div>
<div data-role="content" class="app">
Retrieve Photo
<p id="pictureStatus"></p>
<div id="imagelocation">
<img id="capturedImage"></img>
</div>
</div>
</div>
</body>
</html>
My JavaScript/jQuery:
document.addEventListener("deviceready", onDeviceReady, false);
var platform;
function onDeviceReady() {
//Find out what platform the device is running
platform = device.platform;
//Camera Section
function retrievePicture() {
// Take a picture using device camera and retrieve image
//navigator.camera.getPicture(onCaptureSuccess, onCaptureFail, {Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY});
$('#pictureStatus').text("hello");
}
function onCaptureSuccess(imageData) {
$('#capturedImage').css("display", "block");
var imageLocation = imageData;
$('#capturedImage').attr("src", imageLocation);
$('#pictureStatus').text(imageLocation);
}
function onCaptureFail(message) {
$('#pictureStatus').text(message);
}
}
Please don't define functions inside functions like that. Remove your retrievePicture() from inside the onDeviceReady() function and it should work fine.
As mentioned by #Robin van Baalen, this may be an interesting and relevant read - What you need to know about Javascript scoping.
Also, Functions and function scope.

Categories