How to get dynamically created textbox value in javascript - javascript

hi friends Actually i have 2 questions..
I am creating a social website like facebook...
In this website i have multiple posts which are coming from database
If anyone want to give comment on this post then only first post is working..but the comment of first post is going to the last post..
<%String sql="select * from post ORDER BY id DESC";
st = con.createStatement();
rs=st.executeQuery(sql);%>
<input type="text" id="postboxwritereview" name="postboxwritereview" placeholder="write a review" onkeypress="loadXMLDoc2()"/>
<script type="text/javascript">
document.getElementById("postboxwritereview").onkeypress = function(event){
if (event.keyCode == 13 || event.which == 13){
var xmlhttp;
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("postbox_bottom_my_review").innerHTML=xmlhttp.responseText;
}
}
var x = document.getElementById("postboxwritereview").value;
xmlhttp.open("GET", 'insertReview.jsp?user='+x+'&p_id=<%=post_id%>&p_uid=<%=post_uid%>&author_uid=<%=u_id%>', true);
xmlhttp.send();
document.getElementById("postboxwritereview").value="";
}
};
</script>
And second problem is that..
I am getting ajax response from servlet and showing that resppnse into a div
But there are many divs created dynamically with same id..so ajax response from first post is going to the last post..Plz help me
Here is the code..
AJAX CODE
<script type="text/javascript">
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("showRating").innerHTML=xmlhttp.responseText;
}
}
var username=$('input:radio[name=rating_blog]:checked').val();
xmlhttp.open("GET", 'InsertRating?user='+username+'&p_id=<%=post_id%>&p_uid=<%=post_uid%>', true);
xmlhttp.send();
}
</script>
HTML CODE
<div id="submit" onclick="loadXMLDoc()">
<div>
<input id="rating1" type="radio" name="rating_blog" value="1" onclick="this.form.submit()">
<input id="rating2" type="radio" name="rating_blog" value="2" onclick="this.form.submit()">
<input id="rating3" type="radio" name="rating_blog" value="3" onclick="this.form.submit()">
</div>

Id should be unique on page!
If You use jQuery why don't use '$.ajax()'?
You can try this:
function loadXMLDoc(event){
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
$(event.target).find("#showRating").text = xmlhttp.responseText
}
}
var username=$('input:radio[name=rating_blog]:checked').val();
xmlhttp.open("GET", 'InsertRating?user='+username+'&p_id=<%=post_id%>&p_uid=<%=post_uid%>', true);
xmlhttp.send();
}

Related

Send ajax GET request if condition is met

This is my JS code. However, it only executed the last ajax request. Is there anyway to put them in If statement so that
if (main-content.html is loaded), it will execute xmlhttp.open("GET","main-content-city.php?q="+str,true)
xmlhttp.send();
elseif (child-content is loaded), execute: xmlhttp.open("GET","child-content-city.php?q="+str,true);
xmlhttp.send();
<script>
function sortResult(str)
{
if (str=="")
{
document.getElementById("result").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","main-content-city.php?q="+str,true);
xmlhttp.send();
xmlhttp.open("GET","child-content-city.php?q="+str,true);
xmlhttp.send();
}
</script>
My index.php file is like this and using GET method to navigate between main-content.html and child-content.html.
<?php
include('header.html');
include('main-content.html');
include('footer.html');
?>
My main-content and child-content is like this:
<div id="result">
Content displayed here
</div>
Take all the following code which will be identical for both ajax calls and make a separate function i..e
function ajaxCall (){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
}
Then when you call ajaxCall you simply add relevant SEND:
function whatEver(){
if (main-content.html is loaded)
{ ajaxCall();
xmlhttp.open("GET","main-content-city.php?q="+str,true);
xmlhttp.send();
}
else if (child-content is loaded)
{
ajaxCall();
xmlhttp.open("GET","child-content-city.php?q="+str,true);
xmlhttp.send();
}
}

checkbox not getting unchecked

i am having 4 checkboxes and with the help of ajax am toggling between inserting data on checked and deleting it on unchecked. I am able to insert data successfully but the problem lies in the first checkbox as am unable to uncheck it once it gets checked
<form>
<fieldset>
<input id="prof" type="checkbox" onclick="insdel('Cricket')" value="Cricket" /><span>Cricket</span>
<input id="prof" type="checkbox" onclick="insdel('Football')" value="Football" /><span>Football</span>
<input id="prof" type="checkbox" onclick="insdel('Hockey')" value="Hockey" /><span>Hockey</span>
</fieldset>
</form>
Here is my javascript
function insdel(answer) {
if(document.getElementById("prof").checked = true){
document.forms["t"]["ttq"].value= answer;
if((document.forms["t"]["ttq"].value)!=""){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("list").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","pop.php?q="+answer,true);
xmlhttp.send();
}
}
else{
document.forms["t"]["ttq"].value= answer;
if((document.forms["t"]["ttq"].value)!=""){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("list").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","del.php?q="+answer,true);
xmlhttp.send();
}
}
}
Thanks in advance
Try this sample code to make it clear
var insdel = function(chk) {
console.log(chk.value, chk.checked, chk.id);
if (chk.checked) {
console.log('insert ', chk.value);
//do the rest
} else {
console.log('delete ', chk.value);
//do the rest
}
//do the rest
};
<form>
<fieldset><!-- updated ids, also the onclick parameter -->
<input id="prof1" type="checkbox" onclick="insdel(this)" value="Cricket" /><span>Cricket</span>
<input id="prof2" type="checkbox" onclick="insdel(this)" value="Football" /><span>Football</span>
<input id="prof3" type="checkbox" onclick="insdel(this)" value="Hockey" /><span>Hockey</span>
</fieldset>
</form>

Javascript Ajax Call always returns readyState=1 and status=0

I am sending post request through AJAX as below.
I am always getting xmlhttp.readyState = 1 and xmlhttp.status= 0 . xmlhttp.responseText is always empty.
Could you please tell me what could be the problem ?
I expect xmlhttp.readyState==4 && xmlhttp.status==200
<script>
//Ajax to send request..
function sendPayment()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
alert(xmlhttp.readyState);// this always returns = 1
alert(xmlhttp.responseText) ; //this is always empty.
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if (xmlhttp.responseText=='1')
{
alert('success');
}
}
}
xmlhttp.open("POST","payments/callSSL.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(Id=100);
return false;
}
</script>
HTML PART
<input name="button" type="submit" id="button" value="Confirm" onclick="sendPayment()" />
If you are calling to your own another site,you have to give permission in your another site ie(http://my-other-site.com/payments/callSSL.php) to be accessed.
Put this header in your http://my-other-site.com/payments/callSSL.php
header('Access-Control-Allow-Origin: *');
for specific page
header('Access-Control-Allow-Origin: http://www.yourxmlrequestpage.php');
Hope this helps ,
thank you
you need to add a var as xmlhttp; on starting to get the status result please use below code i modify it,
<script>
//Ajax to send request..
function sendPayment()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
alert(xmlhttp.readyState);// this always returns = 1
alert(xmlhttp.responseText) ; //this is always empty.
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if (xmlhttp.responseText=='1')
{
alert('success');
}
}
}
xmlhttp.open("POST","payments/callSSL.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(Id=100);
return false;
}
</script>

Display all nodes inside a tagname with JavaScript

I'm trying to use the loadXMLDoc() JavaScript function to load data from an XML document and show it on my page's DIV when a button is clicked. So far I can't get any content in my DIV, I want to load all elements within an specific tagname.
Here's the XML:
<?xml version="1.0" encoding="UTF-8"?>
<Fruits>
<Cell>Apples</Cell>
<Cell>Bananas</Cell>
<Cell>Strawberries</Cell>
</Fruits>
<Vegetables>
<Cell>Lettuce</Cell>
<Cell>Tomatoes</Cell>
<Cell>Carrots</Cell>
</Vegetables>
Here's the JavaScript:
function fruits()
{
var
xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("fruits");
}
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
}
function vegetables()
{
var
xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("vegetables");
}
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
}
And here's the HTML:
<button type="button" onclick="fruits()">Fruits</button>
<button type="button" onclick="vegetables()">Vegetables</button>
<div id="food">Please select your favorite</div>
Your function fruits() is not closed properly, and your function vegetables() has ended up inside function fruits(),
the same goes for defining the function xmlhttp.onreadystatechange=function()
so these functions will not even be available until fruits() is called.
Your code should look like this:
function fruits()
{
var
xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("fruits");
}
}
//something went wrong here : this code ended up in the function that was to be called when xmlhttp was done with its GET operation.
//consequently it was never called
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
} // <-- this here bracket was missing
function vegetables()
{
var
xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc = xmlhttp.responseXML;
document.getElementById("food").innerHTML=xmlDoc.getElementsByTagName("vegetables");
}
}
//the same thing happened here
xmlhttp.open("GET","document.xml", true);
xmlhttp.send();
}

Automatically pass the retrieved value from a javascript function to another javascript function?

I have two inline java script functions, one intended to get a token value using xhr and second one will use that value to get the full response from server. But when i uploaded the same on server nothing happened.
Here goes the sample code:
function getUser(user)
{
var xmlhttp;
var result,x,i;
var uservalue=user;
var url="http://abc.xyz.com:8090/uauth/" +uservalue;
///here starts the getToken method..
var tokensave=function getToken(uservalue)
{
var xmlhttp;
var token,a,b;
var url="http://abc.xyz.com:8090/uauth/" +uservalue;
var data="op=login&pass=" +uservalue;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST",url, true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
token="";
a=xmlDoc.getElementsByTagName("token");
token=token + a.childNodes.nodeValue;
document.getElementById("myDiv").innerHTML=token;
}
};
xmlhttp.setRequestHeader("Content-Type", "text/xml");
xmlhttp.send(data);
return token;
}
var header="Xyz-Authorization: "+tokensave;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url, true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
result="";
x=xmlDoc.getElementsByTagName("response");
for (i=0;i<x.length;i++)
{
result=result + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myNewDiv").innerHTML=result;
}
};
xmlhttp.setRequestHeader("Xyz-Authorization: ", +tokensave);
xmlhttp.send();
}
HTML CODE:
<div id="myDiv"></div>
<br />
<br />
<div id="myNewDiv"></div >
<br />
<form>
<input name="textbox" id="textbox" type="text" />
<input name="buttonExecute" onclick="getUser(document.getElementById('textbox').value)" type="button" value="Get User" />
</form>
What's wrong with this apparoach?
Thanks in advance for your valuable help...
mrana
You need to use a return token in the first function and use it like this getUser(getToken(user))
Just create a global variable, and you set change the value inside de function but it's still accesible from a global scope for all the functions you want.
var data = false;
function getData() {
// some ajax...
data = {cool:true};
}
function foo () {
if(data.cool) {
alert (data.cool)
}
}

Categories