Using auto complete in jquery. I am facing a problem which
TypeError: $(...).autocomplete is not a function
I included all the necessary script files. I am not able to understand where I made the mistake. How can I resolve this?
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.hashchange.min.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.easing.1.3.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.tools.min.js" ></script>
<script>
$(document).ready(function () {
$('#namanyay-search-box').keyup(function (e) {
var searched = $('#namanyay-search-box').val()
$.getJSON('get_data', 'title=' + searched, function (result) {
var elements = [];
$.each(result, function (i, val) {
elements.push(val.merchant_name)
})
$('#namanyay-search-box').autocomplete({
source: elements
})
})
});
var indicator = $('#indicator'),
indicatorHalfWidth = indicator.width() / 2,
lis = $('#tabs').children('li');
$("#tabs").tabs("#content section", {
effect: 'fade',
fadeOutSpeed: 0,
fadeInSpeed: 400,
onBeforeClick: function (event, index) {
var li = lis.eq(index),
newPos = li.position().left + (li.width() / 2) - indicatorHalfWidth;
indicator.stop(true).animate({
left: newPos
}, 600, 'easeInOutExpo');
}
});
});
</script>
you are missing jQuery UI library, include the script and css files from jQuery UI
Also remove the duplicate jquery library.
download this http://code.jquery.com/ui/1.10.3/jquery-ui.js and place it in assets and add the code below
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-ui.js" ></script>
Related
I am taking a screenshot of a div in php using html2canvas. Script
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script>
function genScreenshot() {
html2canvas(document.getElementById('screen1'), {
onrendered: function(canvas) {
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
else {
$('#test').attr('href', canvas.toDataURL("image/png"));
$('#test').val(canvas.toDataURL("image/png"));
document.getElementById("screenshot").submit();
}
}
});
}
</script>
it is working fine with desktop
With mobile it takes screenshot worngly
Help me to sort out the issue
We are using jsPDF in aspnet core app. Here is the scripts section:
#section Scripts{
<script src="~/lib/jsPDF/jspdf.min.js" type="text/javascript" asp-append-version="true"></script>
<script src="~/lib/jsPDF/split_text_to_size.js" type="text/javascript" asp-append-version="true"></script>
<script src="~/lib/jsPDF/standard_fonts_metrics.js" type="text/javascript" asp-append-version="true"></script>
<script src="~/lib/jsPDF/html2canvas.min.js" asp-append-version="true"></script>
<script src="~/lib/jsPDF/html.js" type="text/javascript" asp-append-version="true"></script>
<script src="~/js/dailyjobreport.js" type="text/javascript" asp-append-version="true"></script>
}
The html is received from AJAX call, and is used for pdf rendering
function onSuccess(data) {
try {
var pdf = new jsPDF({
orientation: 'portrait',
format: 'a4'
});
pdf.html(data);
pdf.save('report.pdf');
} catch (e) {
console.error(e);
}
}
The pdf that is rendered is a balnk page. Can anyone please help find us what's wrong with the code or if we are missing something
Try to use callback function to save to pdf :
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
Js function :
$(function () {
var pdf = new jsPDF({
orientation: 'portrait',
format: 'a4'
});
pdf.html("<html><head></head><body><h2>2asdasda123dsdasd</h2></body></html>", {
callback: function (pdf) {
pdf.save('test.pdf');
}
});
})
I'm trying to load php array inside native javascript method of gwt application using ajax and display google chart. But it does not give required output...below are my codes
Server side:
$data = array();
$data [] = array("Name", "Value");
$data [] = array("PHP", 78);
$data [] = array("JAVA", 10);
$data [] = array("HTML", 120);
$table = json_encode($data);
echo $table ;
?>
Client side:
<html>
<head>
<title>Graph</title>
<!-- Load jQuery -->
<script type="text/javascript" language="javascript" src="ajax/ajax.nocache.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!-- Load Google JSAPI -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {'packages' : ["corechart"] });
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Native javascript method
private native void generateGraph()
/*-{
$wnd.google.load("visualization", "1", {
packages : [ 'corechart' ],
callback : drawChart
});
function drawChart() {
var jsonData = $.ajax({
url: "http://localhost:8080/Ajax/get_json.php",
dataType: "json",
async: false
}).responseText;
var obj = jQuery.parseJSON(jsonData);
var data = new $wnd.google.visualization.arrayToDataTable(obj);
var options = {
title: 'Graph'
};
var chart = new $wnd.google.visualization.LineChart(
$wnd.document.getElementById('chart_div'));
chart.draw(data, options);
}
}-*/;
thanks for reply!!!
In line 10, I have insert getSuggestion(q); for me to get results from my database but it does not work.
What should I put there in order for me to retrieve results from database while other codes remain the same?
This is my current code:
<html>
<script type="text/javascript" src="javascript/hogan-2.0.0.js"></script>
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/typeahead.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.q').typeahead({
getSuggestion(q);
});
});
</script>
<script type="text/javascript">
//document.getElementById("suggestion")
function getSuggestion(q) {
var ajax;
if(window.XMLHttpRequest)//for ie7+, FF, Chrome
ajax = new XMLHttpRequest();//ajax object
else
ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
ajax.onreadystatechange = function() {
if(ajax.status === 200 && ajax.readyState === 4) {
//if result are not there then don't display them
if(ajax.responseText === "")
document.getElementById("suggestion").style.visibility = "hidden";
else {
document.getElementById("suggestion").style.visibility = "visible";
document.getElementById("suggestion").innerHTML = ajax.responseText;
}
}
};
ajax.open("GET", "suggestion.php?q=" + q, false);
ajax.send();
}
</script>
</html>
Thanks in advance.
Replace
<script type="text/javascript">
$(document).ready(function() {
$('.q').typeahead({
getSuggestion(q);
});
});
</script>
with this:
<script type="text/javascript">
$(document).ready(function() {
$('.q').typeahead({
name: 'q',
remote: '/suggestion.php?q=%QUERY',
minLength: 3, // start searching if word is at least 3 letters long. Reduces database queries count
limit: 10 // show only first 10 results
});
});
</script>
And that's all you need. Typeahead does the rest.
Query is in $_GET['q']
You can find my example here
My index.php looks like this:
<html>
<head>
<link rel="stylesheet" href="http://twitter.github.io/typeahead.js/css/main.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.q').typeahead({
name: 'q',
remote: '/typeahead/suggestion.php?q=%QUERY',
minLength: 3, // start searching if word is at least 3 letters long. Reduces database queries count
limit: 10 // show only first 10 results
});
});
</script>
</head>
<body>
<input type="text" class="q typeahead tt-query" />
</body>
You dont need css file or classes to input. Only class "q" is needed.
<input type="text" class="q" />
And suggestion.php source:
<?php
$q = $_GET['q'];
echo json_encode(array($q));
?>
As you can see, whetever you currently search, it answers with the same result as you typed. You have to make database query and echo array with json_encode
Remember to add correct url to remote parameter.
EDIT: My example now gets data from itunes and searches for music videos. Edited source available in example.
I've been tasked with removing all Telerik controls from our website. I'm not that good with javascript, so this is a great learning experience for me. Most of the controls are easy to understand and fairly easy to replace, but I'm stuck on one. I need to replace the RadScriptBlock in the following code:
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/jquery-migrate-1.1.0.min.js" ></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/jquery.json-2.4.min.js"></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/Portal/main.js" ></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/Portal/popup.js" ></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/SeoTracking.js" ></script>
Based on everything I've read, I think I need to use the following, but I'm at a total loss as to how. Any help/suggestions/resource would be greatly appreciated!!!
new Ajax.Request('/your/url', {
onSuccess: function(response) {
// Handle the response content...
}
});
So this ended up being the fix...
<script type="text/javascript" src="http://localhost:44344/js/jquery-1.9.0.min.js">
</script>
<script>
$.ajax({
url: 'AjaxOrderStepServer.aspx',
success: function () {
debugger;
var baseurl = ConfigurationHandler.getStaticContentBaseURL(Request);
var url = baseurl + "/js/jquery-migrate-1.1.0.min.js";
$.getScript(url);
url = baseurl + "/js/jquery.json-2.4.min.js";
$.getScript(url);
url = baseurl + "/js/Portal/main.js";
$.getScript(url);
url = baseurl + "/js/Portal/popup.js";
$.getScript(url);
url = baseurl + "/js/SeoTracking.js";
$.getScript(url);
}
});