Javascript get element by ID and his inside value - javascript

This is what i have inside javascript
function xmlhttpPost(strURL,formname,responsediv,responsemsg) {
var xmlHttpReq = false;
var self = this;
// Xhr per Mozilla/Safari/Ie7
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// per tutte le altre versioni di IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
// Quando pronta, visualizzo la risposta del form
updatepage(self.xmlHttpReq.responseText,responsediv);
}
else{
// In attesa della risposta del form visualizzo il msg di attesa
updatepage(responsemsg,responsediv);
}
}
self.xmlHttpReq.send(getquerystring(formname));
}
function getquerystring(formname) {
var qstr = document.getElementById[formname];
return qstr;
}
function updatepage(str,responsediv){
document.getElementById(responsediv).innerHTML = str;
}
First it was deveoped for FORM value, and easy i can transfer POST VALUES in another PHP file,and make a query, now i want to modified it just simple transfer some value of one element in new file, that is going to be loaded ajax in another element and do query, where i got wrong and how to echo value from this class in another file?

You should use () instead of [] to make an actual function call (in this case getElementById). Furthermore, if you want the content of the element, use the textContent or innerHTML properties:
function getquerystring(what) {
var qstr = document.getElementById(what);
return qstr.innerHTML;
}
The [] are property accessors in object or arrays.

To get the contents of the div, return the innerHTML property and change [] to ().
function getquerystring(what) {
var qstr = document.getElementById(what).innerHTML;
return qstr;
}
jsFiddle example

You need to use parentheses "()" for the function call. Also, you want innerText of the element, not the whole element.
function getquerystring(what) {
var qstr = document.getElementById(what);
return qstr.innerText;
}

if you want to get text inside the div, try this:
<div id="test">
Some <span class="foo">sample</span> text.
</div>
function getquerystring(what) {
var node = document.getElementById(what),
var htmlContent = node.innerHTML; // htmlContent would give "Some <span class='foo'>sample</span> text."
var textContent = node.textContent; // textContent would give "Some sample text."
}

you can get the text in between your div by using the following code,
For reference innerHTML, DEMO
function getquerystring(what) {
var qstr = document.getElementById(what).innerHTML;
return qstr;
}

This should work
function getquerystring(what) {
var qstr = document.getElementById[what].innerHTML;
return qstr;
}

Related

not able to load javascript code

I am using java script after making an ajax call to display the data in a div with new JS content. Please refer to the code below:
//ajax call from a.jsp
var goUrl = "/testMethod/getTestMethod;
var httpRequest=null;
var refreshContent = "null";
httpRequest = XMLHTTPObject();
httpRequest.open("POST", goUrl, true);
httpRequest.onreadystatechange = function () {ajaxFunction(refreshThisDiv,httpRequest); } ;
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send(null);
function ajaxFunction(refreshThisDiv,httpRequest){
var serversideValidation = true;
if (httpRequest.readyState == 4)
{
if(httpRequest.status == 200)
{
results = httpRequest.responseText; // http.responseXML; which will lead to an XML based response, if we were to have some XML output from a server file
if(results != 'null') {
var test= document.getElementById(refreshThisdiv);
test.style.display = '' ;
test.innerHTML = results;
}
//Below is in b.jsp which is new content to display.
<div id="test">
</div>
<script>
var test = document.getElementById("test");
test.innerHTML ="HI";
</script>
Results are coing fine and redirecting to the b.jsp and displaying the html content. But tags are not working :(
I want to see Hi after ajax call is completed for that div. Please help me.
The ID is not #test, but test. #test is a selector that you'd use with jQuery, CSS or document.querySelector. document.getElementById requires, unsurprisingly, the ID. :)
getElementById() just needs the name of the ID. You incorrectly used CSS-ish syntax by passing #test where only test is needed.
Corrected new code:
<div id="test">
</div>
<script>
var test = document.getElementById("test");
test.innerHTML ="HI";
</script>

Apply JS onto table, which is created after page is loaded

I have got an html page, where you can put text into a textarea, click a button and then it creates an html table.
Problem is, that i am using a JS file to make my table sortable, but this JS file is not applied to tables that are created after the page itself is created.
How can i call the JS file again after the button is clicked and the table created? Or is there any other way to apply the JS file to the new table?
My problem seems to be like this problem:
Apply jquery propieties on new element created after the page is loaded
But i can't use JQuery, is there any way without it?
Example for a created table:
<div id="artikelnr2">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="table.css">
<script src="java.js"></script>
<div class="datagrid"><table class="sortable">
<thead><tr><th>Nummer</th><th>Nummer</th><th>Bezeichnung</th><th>Bemerkungen</th></tr></thead>
<tbody>
<tr><td>897-251</td><td>00.702.07803.7</td><td>5G2</td><td>-</td></tr><tr><td>897-1051</td><td>00.702.0306.7</td><td>5G1</td><td>-</td></tr><tr><td>897-1651</td><td>00.702.0307.3</td><td>5G1U</td><td>-</td></tr><tr><td>897-341</td><td>00.702.0323.9</td><td>5G2.5</td><td>-</td></tr>
</tbody>
</table></div>
</div>
I am using sorttable.js from this page:
http://www.kryogenix.org/code/browser/sorttable/
JavaScript which is called after button is clicked (pastes the content of another page into an exisiting div container):
function getOutput(url) {
var file = selectedValue()+".csv";
var value = document.getElementById("artikelnr").value;
<!---Leerzeichen entfernen-->
value = myTrim(value);
var url = url || "verarbeitung.php?eingabe="+value+"&eingabe2="+file ;
getRequest(
url, // URL for the PHP file
drawOutput, // handle successful request
drawError // handle error
);
return false;
}
// handles drawing an error message
function drawError() {
var container = document.getElementById('artikelnr2');
container.innerHTML = 'Bummer: there was an error!';
}
// handles the response, adds the html
function drawOutput(responseText) {
var container = document.getElementById('artikelnr2');
container.innerHTML = responseText;
tempResult = responseText;
}
// helper function for cross-browser request object
function getRequest(url, success, error) {
var req = false;
try{
// most browsers
req = new XMLHttpRequest();
} catch (e){
// IE
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
// try an older version
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return false;
}
}
}
if (!req) return false;
if (typeof success != 'function') success = function () {};
if (typeof error!= 'function') error = function () {};
req.onreadystatechange = function(){
if(req.readyState == 4) {
return req.status === 200 ?
success(req.responseText) : error(req.status);
}
}
req.open("GET", url, true);
req.send(null);
return req;
}
So this is a suggestion as a major part of your code is not available.
In your existing code, where you create the new table, you need to add/run the following:
sorttable.makeSortable(newTableObject);
The newTableObject reference you either can get straight from your existing code or by calling document.getElementById(idOfTheTableIJustAdded) after your added the new table to the DOM.
Src: http://www.kryogenix.org/code/browser/sorttable/
Update after question edit:
In this script function you should be able to do like this
function drawOutput(responseText) {
var container = document.getElementById('artikelnr2');
container.innerHTML = responseText;
//tempResult = responseText;
var newTableObject = container.querySelector(".sortable");
sorttable.makeSortable(newTableObject);
}

Ajax Request generates html with potential for subsequent Ajax requests. Secondary requests return [object mouseevent] as opposed to generated value

I have a page that is loaded via php. One of the elements in the page is a <li> that has an onclick event. E.g. <li onclick="dynamiccall('1');">blah</li>. After clicking the element an ajax call is issued and the html output is inserted into the page, the tag looks as follows <li onclick="getubilling('1');">blah</li>.
After clicking the generated element with the onclick function getubilling('1');, an ajax call is sent to a php script. The query parameter in the second function to getubilling is displayed as 1, but upon passing it to the ajax call, it shows up as [object mouseevent]. Why is this happening?
the dynamiccall() function is defined as follows in the ajax.js file included in the page:
function dynamiccall(uid){
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse10(xmlHttp.responseText);
console.log(uid);
var holder = uid;
document.getElementById('orgcinfo').innerHTML = '<ul id="b_action_lst2"><li onclick="getuprofile('+holder+')" name="uprofile">Account Settings</li><li onclick="getubilling('+holder+')" name="billing">Billing</li><li onclick="getuchpass('+holder+')" name="chpass">Change Password</li><li onclick="getuadduser('+holder+')" name="adduser">Add User</li></ul>';
var ullist = document.getElementById('b_action_lst2');
var links = ullist.getElementsByTagName('li');
for(var i=0;i<links.length;i++){
var link = links[i];
if(link.getAttribute('name')=="uprofile"){
link.onclick = getuprofile;
}
if(link.getAttribute('name')=="chpass"){
link.onclick = getuchpass;
}
if(link.getAttribute('name')=="billing"){
link.onclick = getubilling;
}
}
//dothis();
}
}
xmlHttp.open("GET", "ajax.php?&p=anotherreq&uid="+uid+"&n="+Math.random(), true);
xmlHttp.send(null);
}
function getubilling(uid){
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse10(xmlHttp.responseText);
console.log(uid);
var holder = uid;
document.getElementById('orgcinfo').innerHTML = '<ul id="b_action_lst2"><li onclick="getuprofile('+holder+')" name="uprofile">Account Settings</li><li onclick="getubilling('+holder+')" name="billing">Billing</li><li onclick="getuchpass('+holder+')" name="chpass">Change Password</li><li onclick="getuadduser('+holder+')" name="adduser">Add User</li></ul>';
var ullist = document.getElementById('b_action_lst2');
var links = ullist.getElementsByTagName('li');
for(var i=0;i<links.length;i++){
var link = links[i];
if(link.getAttribute('name')=="uprofile"){
link.onclick = getuprofile;
}
if(link.getAttribute('name')=="chpass"){
link.onclick = getuchpass;
}
if(link.getAttribute('name')=="billing"){
link.onclick = getubilling;
}
}
//dothis();
}
}
xmlHttp.open("GET", "ajax.php?&p=gubilling&uid="+uid+"&n="+Math.random(), true);
xmlHttp.send(null);
}
A request is issued to http://www.domain.com/ajax.php?&p=gubilling&uid=1&n=2212.32313
The problem is that the resulting UID variable when rendered in the browser results to [object mouseevent] as opposed to the literal value of 1.
I was following this example the only difference I can see is that the example doesn't provide for
passing a dynamic element to the dynamicEvent function where mine does.
What am I missing? Any advice is appreciated.
I suspect this will be the default param passed into the onclick handler, the event object.
Why don't you use addEventListener for a start, rather than inline?
How does this:
dynamiccall('uniqueid');
Know what uniqueid's value is? where does it get it from? In this case, it's taking the value of the event that occurred. My suggestion would be to change the tag to look like this:
<li onclick="dynamiccall(this);" uniqueid="1">blah</li>
then you can set dynamiccall to:
function getubilling(elem) {
var uid = $(elem).attr('uniqueid');
...

How to get the values from Dropdown listbox and textfield ,then send it that values to webservices?

In this Code i try to get the value from text-field and dropdown listbox , I get values dynamically from user and send that value to webserices, In Given code get the value pass that values to webservice through javascript, but script didn't reponse to that code.. any one help me to fix this problem.
Here Code:
<body style=" "><script type="text/JavaScript" >
var xmlhttpuserid;
functionmyFunction() {
var checkid=new Array();
var userid = document.getElementById("userid").value;
for(var i=0;i<2;i++)
{
if(document.getElementById('domainid'+i).checked==true)
{
checkid[i]=document.getElementById('domainid'+i).value;
alert(checkid);
}
}
// var domainid = document.getElementById("").value;
//alert(userid);
var url= "../webservice/Passwordstation/ws_userauthpwdstation.jsp? userid="+userid+"&domain="+checkid;
alert(url);
xmlhttpduserid=GetXmlHttpObject();
if (xmlhttpduserid==null)
{
alert ("Your browser does not support Ajax HTTP");
return;
}
xmlhttpduserid.onreadystatechange=getuserid;
xmlhttpduserid.open("GET",url,true);
xmlhttpduserid.send(null);
}
function GetXmlHttpObject()
{
//alert("GetXmlHttpObject1");
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function getuserid()
{
if (xmlhttpduserid.readyState==4)
{
var text=xmlhttpduserid.responseText;
//alert(text);
text=text.replace(/^\s+|\s+$/g,"");
// alert("Text 2"+text);
if(text.match("SUCCESS"))
{
alert("Authenticate successfully");
window.location="accountmain.jsp";
}
else
{
alert("Please check your User id");
}
}
}
I hope this will help you .
You can get them in java script and pass them in the query as query parameter as already doing for user id .
// var domainid = document.getElementById("").value;
//alert(userid);
var textboxval = document.getElamentById("mytextbox").value;
var dropDown = document.getElementById("ddlViewBy");
var dropDownValue= dropDown.options[dropDown.selectedIndex].value;
var url= "../webservice/Passwordstation/ws_userauthpwdstation.jsp? userid="+userid+"&domain="+checkid&textboxvalue="+textboxval&selectedFromDropDown="+dropDownValue;

InnerHtml problem in Internet Explorer

I am having problem with applying ajax on IE.I am applying innerHtml on select tag but it is not working my ajax code is
function AjaxF(ftype, cid) {
var httpxml;
try {
// Firefox, Opera 8.0+, Safari
httpxml = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
httpxml = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpxml = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateck() {
if (httpxml.readyState == 4) {
var myarray = httpxml.responseText;
if (ftype == 'Files') {
document.getElementById('temp_thumbnail').innerHTML = myarray;
document.getElementById('temp_mainfiles').innerHTML = myarray;
document.getElementById('temp_preview').innerHTML = myarray;
document.getElementById('temp_image').innerHTML = myarray;
}
else {
document.getElementById('temp_thumbnail').innerHTML = myarray;
document.getElementById('temp_main').innerHTML = myarray;
document.getElementById('temp_image').innerHTML = myarray;
}
}
}
var url = "ajax/files_ajax.php";
url = url + "?filetype=" + ftype + "&customerid=" + cid;
url = url + "&sid=" + Math.random();
httpxml.onreadystatechange = stateck;
httpxml.open("GET", url, true);
httpxml.send(null);
}
My php code for creating option is.I am getting the values in filetype and it is working fine on other browsers
$sql="select name ,id from temporary_upload where type ='$filetype' AND customer_id='$customer_id'";
$result=mysql_query($sql);
while($rows=mysql_fetch_array($result))
{
$s.="<option id='' name='' selected='selected' value='". $rows['name'] ."'>". $rows['name'] ."</option>";
}
echo $s;
My html for this code is
<select id="temp_thumbnail" name="temp_thumbnail" style="width:452px">
<option></option>
</select>
I have searched for this error on many forums.They all are saying that innerHtml with select has error in IE can anyone help me to resolve this issue.That I can populate my select option.
Thanks in advance
some years ago, i had a similar problem with IE6. if i remember right, i solved this by replacing the whole select-element instead of just replacing the innerHTML (the option-elements).
to do this, you'll have to change the file called via ajax to output the start- and end-tag of your select-element, too. put the select-elemet on your html-site into another element with an id (if there isn't already one you havn't posted) and replace the innerHTML of that outer element.
EDIT: the link gnur posted describes exactly this workaround, so it seems like i remember right ;)
Not a fan of the solutions where they want you to remove the select and than add it back. Kills all the event handlers. Wrote a little function that tries to set the innerHTML. If setting the innerHTML results in no options being added, it rewrites the function so it will create an element and clone its options.
function addOptionsToSelect( selectId, optStr){
var sel = document.getElementById(selectId)
sel.options.length = 0;
sel.innerHTML = optStr;
if(sel.options.length===0){
(addOptionsToSelect = function( selectId, optStr){
var div = document.createElement("div");
div.innerHTML = "<select>" + optStr + "</select>";
var newSelect = div.getElementsByTagName("select")[0];
var sel = document.getElementById(selectId);
sel.options.length = 0;
for(var i=0;i<newSelect.options.length;i++){
var cpy = newSelect.options[i].cloneNode(true);
sel.appendChild(cpy);
}
div = newSelect = sel = null;
})
( selectId, optStr);
}
}
Running Example
This may work for you in IE and FF, of course a bit of modification depending on how and where you want to place the new options in the select ...
function addmore(){
var select=document.getElementById('myselect');
var theindex=select.options[select.selectedIndex];
var option=document.createElement('option');
option.text='text_4';
option.value='value_4';
try{
select.add(option,theindex);
}
catch(e){
//and for ie
select.add(option,select.selectedIndex);
}
}
This page has an excellent work around:

Categories

Resources