Get ajax value from JavaScript function - javascript

I'm not an JS developer, so forgive me if this is a stupid question.
I have this web application, that uses ajax to keep the data update on the screen, but I'm not able to use the ajax value in my JS function, the code generated by my application is:
<span id="c0"></span>
In the web page I just see the numeric value, e.g. 5 and it's updated every second as expected, so I tried to use the same in my JS function:
<script type="text/javascript">
function getPoint()
{
console.log ('<span id="c0"></span>');
return 0;
}
</script>
But in the Chrome's log I just see <span id="c0"></span> instead of a numeric value.

Try the following:
<script type="text/javascript">
function getPoint()
{
var span_element = document.getElementById("c0");
var content = span_element.innerHTML;
console.log(content);
return content;
}
</script>
Explanation:
First you need to access the DOM element of javascript. You identified the element with the id: "c0". To access the element you need to use the function: document.getElementById("someID");
With the element you can do a lot of things. In this case you want to access whatever is inside the tag , so what you want is its inner HTML.
If you are using JQuery, you can also get its content like this:
var span_element = $("#c0");
var content = span_element.text();

Console.log simply logs whatever string you send it as a parameter. So what you are seeing is the expected behavior.
Assuming you are using jQuery, and the ajax returned value is being displayed in the span (id = "c0"), this console.log statement should work:
console.log($("#c0").text());
$("#c0") returns the jQuery object using the id selector (#).

Related

Unable to figure out why input parameter is becoming null

This is the script I have in my gsp page:
<script>
function getItemsLength(){
var id = document.getElementsByName("franchiseID")[0].value();
alert(id); //This displays the intended id
var itemLength = ${storeCommand.numOfBranches(id)}; //The id becomes null when sent here
}
</script>
This function is called onclick for a button, I cannot access the id through the store command itself, since the page hasn't been saved yet - it appears as null. Essentially I take in an ID the user gives me for the franchise, and I query to see how many stores have that franchiseID to display it on the screen.
I am new to grails and web development, so let me know if there is anything I am doing wrong!
The fundamental issue you have here is you are trying to mix client-side programming and server-side programming. ${storeCommand.numBranches(id)} is processed when the HTML is rendered and in that case id is not in scope.

JS variable is displayed as undefined when using HTML

I am working on a project on Google Apps Script. I have a JS function that returns a date (as a text). I also have an HTML document to display a form with several inputs. I would like to prefill one input with the date returned by the JS funtion. It almost works, except it displays "undefined" instead of the date, even though I know the js funtion is working fine.
Here are some code to better understand :
The input where I call the script (don't mind the onmousemove, i just didn"t find anotherway to call the script).
<input type="text" id="deliveryDate" name="deliveryDate" onmousemove="displayActiveDate()">
So it calls the folowing script.
<script>
function displayActiveDate(){
var activeDate = google.script.run.getActiveDate();
document.getElementById("deliveryDate").value = activeDate;
}
</script>
Which in turn calls getActiveDate() which is the separate JS function that returns the date.
If you have any idea on how to solve this, I will be very thankful.
google.script.run.serverSideFunction() returns undefined. In order to get the actual response value from your serverSideFunction() you need to use the withSuccessHandler() method with a callback like so:
google.script.run.withSuccessHandler(onSuccess).serverSideFunction();
function onSuccess(data) {
// do something with the data returned by the serverSideFunction()
}
Also note that you also have withFailureHandler(err) to handle any errors you server-side functions may return.
Here is the full reference
Instead of writing document.getElementById("deliveryDate").value = activeDate; type document.getElementById("deliveryDate").innerHTML= activeDate; in your script

ckeditor find in getdata

Does anyone know how you can access the DOM from an HTML page you got from the ckeditors getdata function, using javascript?
For instance:
function Delete_ftv_from_text(mfv_id)
{
var content=CKEDITOR.instances.editor1.getData();
content.getelementbyid(mfv_id);
}
So rather then accessing the document.getElementById I want to get the element out of the text from ckeditor, in this case the div element with an id that I get into my function.
The code above of course doesn't function.
You can access the DOM directly from the containing page:
var el = CKEDITOR.instances['editor1'].document.$.getElementById(id);
// do what you want with el

I can't seem to receive my JSON object correctly

Sorry for the badly worded title, and I would also like to apologize in advance if my explanation is lackluster. My knowledge of JavaScript and Ajax stuff isn't really that great.
Anyway, so, what I am trying to do is display a list of items using PHP, and then when an item is clicked, a popup will be displayed basically asking if the users want to add the items to the DB (it's essentially importing from one DB to another). Part of the popup is a drop down list that contains possible parents for the imported items. (So, if you are importing a project called Vista, you might place it in the parent category 'OS').
In order to make the drop down, an ajax request must be made, and the back end PHP replies with a JSON object which contains all elements that need to be included in the drop down.
So, as a test to see if the AJAX connection works, I just arbitrarily place a button on the window like so:
<div align="center" onclick="test()">TEST BUTTON </div>
and have a JS function called test:
function test(){
var url = "index.php?module=getlist";
//Code to send post request with a callback to function test2();
}
and a function test2():
function test2(data){
if (data){
alert(data.Project[0].id);
}
else {
alert("ERROR");
}
}
Note: The PHP code returns a JSON object and one of the sub-object thingies is called Project which is an associate array with fields like id and name.
The above works. The alert box shows a number that corresponds to a project id.
But, we want to have a popup that contains the list! So, we get some html like this:
<td align="center" onclick="collection('Random_Name', 'Random_Description')">Project 1</td>
Note: I am passing the values for the item Name and Description to a JS function called collection.
function collection(name, description){
test();
//Stuff that creates the popup, creates a form in the popup, and populates the form with default values(name and description).
// Following Stuff is used to make the drop down.
var tempdata = new Array(new Array());
tempdata[0]['name'] = json.Project[0].name;
tempdata[0]['value'] = json.Project[0].id;
//This function creates the Select list, it requires a name, default value, and
//a multi-dimensional array like the one defined above.
var pacolist = createSelect("collection_list",'',tempdata)
//Append the elements together and add a save button.
}
To try and get this to work, I declared a global variable called json at the top of the page. I changed the alert(data.Project[0].id); in test2() to json = data;
But, it didn't work.
I get an Uncaught TypeError: Cannot read property 'Project' of undefined error when I click to open the popup.
I changed the test2() method to be like this instead:
function test2(data){
if(data){
return data
}
else{
//Code from the original test() function to send post request to PHP with
//a callback to test2.
}
and in the collection() function, I added this: var json = test2,(No global json) but that did not work either.
Sorry for the long winded question, but basically, I open a function, the function needs to call another function that sends a post request and the data received by the request needs to be used by the original function. How do I do this?
I think this is just a time issue. As in the request takes a while, and in the mean time, the original function has already moved on.
EDIT: Found a solution. I think it was a timing issue. In order to fix it. I made the page html call a function that stored the name and description as global variables. This function then made the post request with a callback to a different function. This different function then used the data (the JSON object) it received and passed it along with the global name and description to the collection() function mentioned earlier.
You have to parse the data before you use it.
//For IE6/IE7
var data = eval('(' + json + ')');
//For IE8+/Chrome/Firefox...
var data = JSON.parse(json);

Get Javascript document.write Data into variable and show it

I have a remote Javascript which allow us to output data using a function, which returns the data by document.write(thedata).
See http://www.websnapr.com/implementations/. Here :
wsr_snapshot('http://URL', 'websnapr API Key', 'Size');
Function has document.writed the data at http://www.websnapr.com/js/websnapr.js. See source of this JS File.
Now I would like to store this Data(whatever is writed) into a variable and then assign it to some Div innerHTML.
I tried everything but it is just changing the page where I am implementing it. I do not want to change the page. It should not open new screen and write it. It should do it on same page and hence I want to store the document.write data by the function into a variable and use it in innerHTML of any DIV.
You could rewrite document.write prior to including the script and change it back to the original afterwards:
<script>
var oldwrite = document.write;
var text = '';
document.write = function(t) { text = t; }
</script>
<script src="jsfile"></script>
<script>
document.write = oldwrite;
//text now contains your text
</script>
Why not just copy the javascript file to your web server, and modify it to store the data instead of writing it?

Categories