I was trying to load Datepicker so that I can later add the value to json request. But it seems that I can't even load the calender in textbox. Idea is to get input date and request it in json.
Well I could mention that without datepicker function it was working fine.
// Portlet JSP in Liferay
<%# taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<portlet:resourceURL var="resourceURL">
</portlet:resourceURL>
<portlet:defineObjects />
// jQuery UI sources
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
// Jquery and Ajax Source
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
// JS Function
<script>
$(document).ready(function() {
// Load Date Picker in input box But not working
$( "#datepicker" ).datepicker();
$("#btn").click(function() {
$.ajax({
// Reso
url : '${resourceURL}',
data : {
"PersonID" : $('#PersonID').val(),
"AnotherD" : 2
},//person id to sent, In place of Anotherd I want to add Datevalue
type : 'POST',
dataType : "json",
success : function(data) {
console.log(data);
//Getting Data in return
var x = data.PersonList[1].PersonWeight;
$("#Results").text(x);
$("#Res").text(data.PersonList[1].PersonTemp);
}
});
});
});
</script>
<body>
// Out Put Data
PersonID:
<input type="text" name="PersonID" id="PersonID">
<br>
// Date Picker Textbox
<br>
<p>
Date: <input type="text" id="datepicker" />
</p>
// Refresh Button
<button id="btn">Refresh</button>
<br>Height :
<p id="Results"></p>
<br> Weight:
<p id="Res"></p>
</body>
But its not working, any suggestions?
Remove this line. I think jQuery conflicts is occurring in your case
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
HTH
Related
I am creating a webworks application, so my code is not being placed on a server. The youtube data api does not work when accessing from your local file system, but that it how my application works. I need a work around, or a way to make a local private web server with pure js, no command line tools.
html
<!DOCTYPE HTML>
<html>
<head>
<title>add song</title>
<link type="text/css" href="../css/AS_Style.css" rel="stylesheet">
</head>
<body>
<div id="main">
<p id="response">a</p>
<form action="#">
<p><input type="text" id="search" placeholder="Type something..." autocomplete="off" class="form-control" /></p>
<p><input type="submit" value="Search" class="form-control btn btn-primary w100"></p>
</form>
<div id="results"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../js/AS.js"></script>
<script src="https://apis.google.com/js/api.js"></script>
<script>
function init() {
gapi.client.init({
'apiKey':'key here',
});
search();
}
gapi.load('client',init);
</script>
</body>
</html>
JavaScript
function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}
function search() {
$("form").on("submit", function(e) {
e.preventDefault();
// prepare the request
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
maxResults: 3,
order: "viewCount",
});
// execute the request
request.execute(function(response) {
var results = response.result;
$("#results").html("");
$.each(results.items, function(index, item) {
$.get("item.html", function(data) {
$("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
});
});
resetVideoHeight();
});
});
$(window).on("resize", resetVideoHeight);
};
function resetVideoHeight() {
$(".video").css("height", $("#results").width() * 9/16);
}
Can you show the code you're using to call Youtube's API? You can get the API data with pure javascript:
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=CHANNEL_ID&maxResults=1&fields=items&order=date&key=API_KEY", false);
xhr.send();
document.write(xhr.responseText);
Did you try triggering a shell script via javascript, and making the shell script run the API code?
Apparently this worked: https://stackoverflow.com/a/21484756/7922428
Youtube API doesnt work without connection to the internet, which when your locally testing, is done through local servers.
Here are my suggestions:
Use Nodejs
Use python -m SimpleHTTPServer
I am using jquerymobile 1.4.2.This the code which i am using in my page
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script>
</head>
<body>
<script>
function myFunction()
{
document.getElementById("myText").disabled=true;
}
</script>
<p>Click the button to disable the text field.</p>
<select onchange="myFunction()"><option>1</option><option>2</option></select>
First Name: <input type="text" id="myText">
</body>
</html>
The above program works fine But if i change that to this code
<script>
function myFunction()
{
document.getElementById("myText").disabled=false;
}
</script>
<p>Click the button to disable the text field.</p>
<select onchange="myFunction()"><option>1</option><option>2</option></select>
First Name: <input type="text" id="myText" disabled="disabled">
Then its not working please help me how to make text field enable using onchange() function
jQM enhances the input and creates a Textinput widget which has its own enable/disable methods (http://api.jquerymobile.com/textinput/#method-disable)
In your example, to enable the input:
function myFunction() {
$("#myText").textinput("enable");
}
Also, you should use unobtrusive javascript and the jQM page functions. e.g. remove the onclick from the markup:
<select id="theSelect" >
<option>1</option>
<option>2</option>
</select>First Name:
<input type="text" id="myText" disabled="disabled" />
Add the handler in the pagecreate jQM event:
function myFunction(selVal) {
if (selVal == '2'){
$("#myText").textinput("enable");
} else {
$("#myText").textinput("disable");
}
}
$(document).on("pagecreate", "#page1", function () {
$("#theSelect").on("change", function(){
var v = $(this).val();
myFunction(v);
});
});
Here is a DEMO
I have a datapicker of jqueryUI:
<div class="span4">
<label>Start Date; </label>
<input type="text" name="sDate" id="datepicker1" ng-model="item.date.sDate" class="ng-pristine ng-valid hasDatepicker">
<label>End Date; </label>
<input type="text" name="eDate" id="datepicker2" ng-model="item.date.eDate" class="ng-pristine ng-valid hasDatepicker">
<br> <br>
<button ng-click="add()" type="submit" class="btn btn-success">Next</button>
The datepicker is working fine, but when i click Next button which trigger the add function, I cannot get item.date.eDate value...
I've just been trying the same thing, and found that I didn't actually need to use a directive, just this code...
$.datepicker.setDefaults({
// When a date is selected from the picker
onSelect: function(newValue) {
if (window.angular && angular.element)
// Update the angular model
angular.element(this).controller("ngModel").$setViewValue(newValue);
}
});
Just place it prior to your .datepicker() initialisation code.
AngularJS and jQuery don't work too well together. You need to use a directive. Here's a quick sample app version I created for you:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script>
function putObject(path, object, value) {
var modelPath = path.split(".");
function fill(object, elements, depth, value) {
var hasNext = ((depth + 1) < elements.length);
if(depth < elements.length && hasNext) {
if(!object.hasOwnProperty(modelPath[depth])) {
object[modelPath[depth]] = {};
}
fill(object[modelPath[depth]], elements, ++depth, value);
} else {
object[modelPath[depth]] = value;
}
}
fill(object, modelPath, 0, value);
}
var directives = angular.module('myApp', []);
directives.directive('datepicker', function() {
return function(scope, element, attrs) {
element.datepicker({
inline: true,
dateFormat: 'dd.mm.yy',
onSelect: function(dateText) {
var modelPath = $(this).attr('ng-model');
putObject(modelPath, scope, dateText);
scope.$apply();
}
});
}
});
function myCtrl($scope) {
$scope.item = ""
$scope.add = function() {
$scope.$apply()
alert($scope.item)
}
}
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{item}}
<p>Date: <input type="text" datepicker id="datepicker" ng-model="item" /></p>
<button ng-click="add()" type="submit" class="btn btn-success">Next</button>
<br />
</div>
</body>
</html>
Check out http://www.grobmeier.de/angular-js-binding-to-jquery-ui-datepicker-example-07092012.html for a a more thorough explanation.
just need to replace this element.datepicker({ to $(element).datepicker({
directives.directive('datepicker', function() {
return function(scope, element, attrs) {
$(element).datepicker({
inline: true,
dateFormat: 'dd.mm.yy',
onSelect: function(dateText) {
var modelPath = $(this).attr('ng-model');
putObject(modelPath, scope, dateText);
scope.$apply();
}
});
}
});
Actually turns out you don't have to make any inline directive or play around with the $.datepicker.
Only helpful i came up with was to get the value of datepicker element not by the ng-model directive.
suppose you have 3 inputs, first name, last name and date of birth. the date of birth input contains the jquery ui datepicker.
get the value of first name and last name input by ng-model directive< BUT to get the value of date of birth, just use jquery .val() function.
I've created an order form, of which has a large array of fields. I'm now adding coupon functionality so that we can start to give customers discount codes etc.
What's the best way of submitting a single field (the coupon code) using ajax after a "apply coupon" button has been clicked so that the price can be updated on the front end probably using UJS(?) - obviously the final price calculation would happen on the backend?
Cheers.
I would recommend using a JS framework to do Ajax requests. If you JQuery, then you can use the example given to understand how to do a simple post.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search..." />
<input type="submit" value="Search" />
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<script>
/* attach a submit handler to the form */
$("#searchForm").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
term = $form.find( 'input[name="s"]' ).val(),
url = $form.attr( 'action' );
/* Send the data using post and put the results in a div */
$.post( url, { s: term },
function( data ) {
var content = $( data ).find( '#content' );
$( "#result" ).empty().append( content );
}
);
});
</script>
</body>
</html>
I tried add click function on item, but seems that does not work correctly.
$(document).ready(function(){
$("#vibrateBtn").click(function() {
window.alert('test');
});
});
I tried also disable Ajax loading, with>
$(document).bind("mobileinit", function(){
ajaxEnabled:false;
});
But with same result.
Where can be problem please?
Thanks for any advice.
in jquery mobile document.ready() doesn't work and use .live to bind the click event instead of using the short hard .click().
There are other event like pagebeforecreate, pagecreate. check the jquery demo for the list of event.
$(document).live('pageshow',function(){
$("#vibrateBtn").live('click',function() {
window.alert('test');
});
});
Please try this code
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script language="javascript">
$(function() {
$('#theButton').on('tap click',function(event, ui) {
alert('The Button has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
</body>
</html>