I wrote the below code; when I select India/America in the dropdown related text files with some contents, has to be read and displayed inside a div element, but am getting an error in the line xhr.send()
can anyone explain why??
<html>
<head>
<script>
function getcity()
{
var a=document.getElementById("country");
var b=a[a.selectedIndex].value;
alert(b);
var xhr=new XMLHttpRequest();
if(b=="India")
{
xhr.onreadystatechange=function()
{
if((xhr.readystate==4)&&(xhr.status==200||xhr.status==304))
{
document.getElementByID("display").innerHTML=xhr.responseText;
}
}
xhr.open("GET","india.txt",true);
}
else
{
xhr.onreadystatechange=function()
{
if((xhr.readystate==4)&&(xhr.status==200||xhr.status==304))
{
document.getElementByID("display").innerHTML=xhr.responseText;
}
}
xhr.open("GET","america.txt",true);
}
xhr.send(null);
}
</script>
</head>
<body>
<select id="country" onchange="getcity()">
<option>India</option>
<option>America</option>
</select>
<div id="display"></div>
</body>
</html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function getcity()
{
var a=document.getElementById("country");
var b=a[a.selectedIndex].value;
alert(b);
var xhr=new XMLHttpRequest();
if(b=="India")
{
xhr.onreadystatechange=function()
{
if((xhr.readystate==4)&&(xhr.status==200||xhr.status==304))
{
document.getElementByID("display").innerHTML=xhr.responseText;
}
}
xhr.open("GET","india.txt",true);
}
else
{
xhr.onreadystatechange=function()
{
if((xhr.readystate==4)&&(xhr.status==200||xhr.status==304))
{
document.getElementByID("display").innerHTML=xhr.responseText;
}
}
xhr.open("GET","america.txt",true);
}
xhr.send(null);
}
</script>
</head>
<body>
<select id="country" onchange="getcity()">
<option>India</option>
<option>America</option>
</select>
<div id="display"></div>
</body>
</html>
Related
I would like to attach an event to the button at the end of the sap.m.Select control to call the backend for values displayed in the dropdown of that control. How can this be achieved?
Thanks!
Please check this running example. Hope it gives you some hints. Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script id="sap-ui-bootstrap" type="text/javascript" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_belize" data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="myXmlView" type="ui5/xmlview">
<mvc:View height="100%" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" controllerName="MyController" displayBlock="true">
<Select id="test_select" forceSelection="false" items="{
path: '/ProductCollection',
sorter: { path: 'ProductId' }
}">
<core:Item key="{ProductId}" text="{ProductId}" />
</Select>
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function() {
"use strict";
sap.ui.define([
"jquery.sap.global",
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
], function(jQuery, Controller, JSONModel) {
"use strict";
return Controller.extend("MyController", {
onInit: function() {
this.oModel = new JSONModel();
this.getView().setModel(this.oModel);
var that = this;
var oSelect = this.getView().byId("test_select");
oSelect.ontap = function(oEvent) {
if (!oSelect.isOpen()) {
oSelect.setBusy(true);
that.oModel.setData({});
var callBackend = function() {
that.simulateBackendData();
oSelect.setBusy(false);
}
setTimeout(callBackend, 3000);
}
sap.m.Select.prototype.ontap.apply(this, arguments);
};
},
simulateBackendData: function() {
var oData = {
"ProductCollection": [{
"ProductId": Math.random()
},
{
"ProductId": Math.random()
},
{
"ProductId": Math.random()
},
{
"ProductId": Math.random()
},
]
};
this.oModel.setData(oData);
}
});
});
sap.ui.xmlview({
viewContent: jQuery("#myXmlView").html()
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content" role="application">
</body>
</html>
I am trying to display the onchange value of a textbox using ajax. My code is as follows :
ajaxquery.php
<html>
<head>
<title>Changing textbox value based on dropdown list using Ajax and PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
//fuction to return the xml http object
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getCurrencyCode(strURL)
{
var req = getXMLHTTP();
if (req)
{
//function to be called when state is changed
req.onreadystatechange = function()
{
//when state is completed i.e 4
if (req.readyState == 4)
{
// only if http status is "OK"
if (req.status == 200)
{
document.getElementById('cur_code').value=req.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
<body style="font: 12px Verdana, Arial, Helvetica, sans-serif;">
<form style="text-align:center" method="post" action="" name="form1">
<p>Country : <input type="text" name="country" onChange="getCurrencyCode('code.php?country='+this.value)">
</form>
</body>
</html>
code.php
<?php
$country=$_REQUEST['country'];
echo $country;
?>
The value is not displaying. Where am I going wrong?
P.s. I am completely new to ajax and have no knowledge about it. Appreciate any help :)
<p>Country : <input type="text" name="country" onblur="getCurrencyCode('code.php?country='+this.value)">
<p>Country Code : <input type="text" name="cur_code" id='cur_code' ">
Changed the onchange function to onblur and added another input type. It is working perfectly now!
With the older version of telerik, we had a snippet of code to find the number of childnodes as given below
function onUploadSelect(ev) {
var numberOfFiles;
if (ev.target.childNodes[1] != undefined && ev.target.childNodes[1] != null) {
numberOfFiles = ev.target.childNodes[1].childNodes.length;
}
if ((numberOfFiles + ev.files.length) > 4) {
//some custom validation error msgs being thrown
}
}
the basic logic of this code is to prevent uploading more than 4 files,
Ex - i select 2 files,dont click on upload instead select a file again and then click on upload, I'm good(2+1<4)
With the KEndo Uplaod, ev.target is undefined,
can you suggest a possible alternative for this?
Thanks
Adarsh
Please try with the below code snippet.
Kendo-HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div class="demo-section">
<input name="files" id="files" type="file" />
</div>
<script>
$(document).ready(function() {
$("#files").kendoUpload({
select: onSelect
});
});
function onSelect(e) {
if (e.files.length > 4) {
alert("Please select max 4 files.");
e.preventDefault();
}
else {
var existingfileCount = $(".demo-section li").length;
if((e.files.length + existingfileCount) > 4)
{
alert("You can not upload more than 4 files");
e.preventDefault();
}
}
}
</script>
</body>
</html>
Kendo-MVC
Javascript
<script>
function onSelect(e) {
if (e.files.length > 4) {
alert("Please select max 4 files.");
e.preventDefault();
}
else {
var existingfileCount = $(".demo-section li").length;
if((e.files.length + existingfileCount) > 4)
{
alert("You can not upload more than 4 files");
e.preventDefault();
}
}
}
</script>
View.cshtml
<div class="demo-section">
#(Html.Kendo().Upload()
.Name("files")
.Events(events => events.Select("onSelect"))
)
</div>
Note : I have used 'demo-section' class to simplyfy the code. If you want to rename this class then rename this class in html/cshtml and javascript.
Let me know if any concern.
Hi this is what you want ,
function onSelect(e) {
var ct = $('#Count').val();
if (e.files.length > 4) {
alert("Please select max 4 files.");
e.preventDefault();
}
else {
ct= parseInt(ct == "" ? 0 : ct);
$('#Count').val(ct + e.files.length);
}
}
#Html.Hidden("Count")
to restrict user to not upload more then 4 file. If i understand right.
after searching the internet I was unable to find an answer as to why my AJAX code is not working. My assignment is to retrieve a text file and display it to the browser using AJAX but the ready state stops at 1. an example file is canada.txt and is located in the directory http://157.201.194.254/~ercanbracks. The .html and .js files are below:
HTML file:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AJAX</title>
<link rel="stylesheet" type="text/css" href="assign09.css" />
<script type="text/javascript" src="assign09.js"></script>
</head>
<body>
<h1>Ten Largest Cities</h1>
<h3>Select a Country:</h3>
<form action="">
<select id="country">
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
<option value="russia">Russia</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit"
onclick="makeRequest(document.getElementById('country').value)" />
<div id="error"> </div>
</form>
<h3>Cities:</h3>
<div id="cities">
<pre>
City Population
------------------ ---------------
<span id="cityList"></span>
</pre>
</div>
</body>
</html>
.js file:
var httpRequest;
var countryOption;
function makeRequest(option)
{
countryOption = option;
if (window.XMLHttpRequest) // Modern Browsers
{
httpRequest = new XMLHttpRequest();
}
else // older IE browsers
{
try
{
httpRequest = new ActiveXObject("Msxm12.XMLHTTP");
}
catch (e)
{
try
{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert('ERROR - Unable to make XMLHttpRequest');
}
}
}
if (!httpRequest)
{
alert('ERROR: httpRequest failed -- try a different browser');
return false;
}
else
{
var url = "http://157.201.194.254/~ercanbracks/" + option + ".txt";
alert('Ready State = ' + httpRequest.readyState);
httpRequest.onreadystatechange = getCities;
httpRequest.open("GET", url, true)
httpRequest.send(null);
}
}
function getCities()
{
alert('Ready State = ' + httpRequest.readyState);
if (httpRequest.readyState == 4)
{
alert('Ready State = ' + httpRequest.readyState);
if (httpRequest.status == 200)
{
var response = httpRequest.responseText;
document.getElementById("cities").innerHTML = response;
}
else
{
alert('problem with request');
alert('Ready State = ' + httpRequest.statusText);
}
}
}
I wrote this code in javascript to disply information in this page (Normal_Info.php),
but unfortunately it did not work. If anyone can help me I will be grateful
<html>
<head>
<script language="javascript">
function ajaxFunction()
{
return window.XMLHttpRequest ?
new window.XMLHttpRequest :
new ActiveXObject("Microsoft.XMLHTTP");
}
function Go_there()
{
var httpObj = ajaxFunction();
httpObj.open("GET","Normal_Info.php", true);
httpObj.send();
httpObj.onreadystatechange = ChangedState()
{
if (httpObj.readyState == 4 && httpObj.status == 200)
{
document.getElementById("result").innerHTML=httpObj.responseText;
}
}
}
</script>
</head>
<body>
<form id=ff>
<input type=button value=Hi OnClick=Go_there() />
</form>
<div id=result>
</div>
</body>
</html>
i suggest using jquery http://jquery.com/
<script src="jquery.js"></script>
<script language="javascript">
$('#ff').submit(function() {
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('#result').html(data);
// alert('Load was performed.');
}
});
});
</script>
no need to click event