Put result of ajax request inside div - javascript

I'm trying to take the result of my console log and put it in a div. The console log bit works, but not putting it in a div. According to the online tutorials it should be something like this:
<div id="number">Test</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
var data;
$.ajax({
type: 'POST',
dataType: 'json',
url: 'report.php',
data: data,
success: function (data) {
console.log(data.report.data[0].breakdown[0].counts);
$('#number').innerHTML = data.report.data[0].breakdown[0].counts;
}
});
});
</script>
However I get no log errors, it just doesn't update the text.

use
$('#number').html(data.report.data[0].breakdown[0].counts)
instead of .innerHTML

Since you using jQuery Selector $, you need to use $('#number').html("text or something").
Or maybe you can do document.querySelectorAll("#number").innerHTML = "text or somthing" if you want to use Vanila Javascript.

$('#number') is a jquery object, .innerHTML works on a DOM object - they are not the same thing.
Either convert $('#number') to DOM, with:
$('#number')[0].innerHTML = data.report.data[0].breakdown[0].counts;
Or use jquery method:
$('#number').html(data.report.data[0].breakdown[0].counts);

Related

Update Span Element with Ajax and php

Hello again stack overflow
I have a simple PHP file (countsomething.php) that looks up a number and echo's it.
How do I get ajax to update a simple span element on my HTML page.
I've tried triggering the ajax on page load with : <body class="skin-blue" onload="updateCDNonts();">
The JS
function updateCDNonts() {
$.get("x.x.x.x:8080/getliveontscdn.php=", function(result){
$("#countonts").html(result)};
}
The HTML
<span id="countonts" class="info-box-number">0</span>
Can someone point me in the right direction ?
You have a few issues with your code i have tried to point them all out below for you:
function updateCDNonts() {
$.get("x.x.x.x:8080/getliveontscdn.php", function(result){ //removed equals from url
$("#countonts").html(result); //removed curly brace that shouldn't be there
}); //added missing bracket and semicolon
Also as someone else noted watchout for cors if your url is different.
I managed to get it working. I changed my php script to return a json, here is the json: {"cdnonts":"144","eagonts":"0","stamonts":null,"foxonts":null,"pentonts":null,"topponts":null,"wickhamonts":null}
And in the html I did the following
<script language="javascript">
window.onload = function() {
$.ajax({
type: 'GET',
url: 'countallonts.php',
dataType: "json",
data: { get_param: 'cdnonts' },
success: function(data){
$('span#cdnonts').html( data.cdnonts);
$('span#eagonts').html( data.eagonts);
}});}
</script>
Although I am not sure why it works, because I expected data variable to return just the "cdnonts" object, but I suspect it parses all of the objects instead?
Thank you for you help.

Assign value to Paragraph or P tag through jQuery for the data obtained from PHP

I need to set the text of Paragraph or P tag to the value obtained though AJAX.
So I have the HTML page somewhat like this where I have declared the paragraph tab.
<p class="card-text">Client Type<p id="Client_Type" name = "Client_Type"></p></p>
Onclick of the button I am making the AJAX call to HOME_CARD.PHP page.
The PHP is working properly and its returning me the data to jQuery. When I use console.log(data); it displays me all the data correctly.
$.ajax({
url: "Home_Card.php",
method: "POST",
data: {
search_client_id: search_client_id
},
success: function(data) {
console.log(data);
$('#Client_Type').val(data.CLIENT_MNEMONIC);
//$('#Client_Type').text("HELLO");
//$('#Client_Type').attr(data.CLIENT_MNEMONIC);
//$('#card').show();
//$('#Client_Type').("HELLOE");
}
});
So I tried using val function to assign the value in CLIENT_TYPE to p tag in HTML page but its not assigning. When I use $('#Client_Type').text("HELLO"); it assigns the value "HELLO" properly so I am guessing nothing wrong with my program.
I wanted to know is there any other way of assigning the value to paragraph tag in jQuery?
How to assign the specific value obtained from PHP in JSON format to paragraph p tag using jQuery.
Paragraph does not take any value i think.
So you should use one of these methods
$('#Client_Type').text(data.CLIENT_MNEMONIC);
or
$('#Client_Type').append(data.CLIENT_MNEMONIC);
Use text method or html method instead:
$('#Client_Type').text(data.CLIENT_MNEMONIC)
Use html or append method
$('#Client_Type').html(data.CLIENT_MNEMONIC);
Thank you for your time and answers but I found my mistake.
During the AJAX call I did not mention the type of data I getting in return
datatype: "json",
Hope fully it will help someone who is also trying.
$.ajax({
url: "Home_Card.php",
method: "POST",
datatype: "json",
data: {
search_client_id: search_client_id
},
success: function(data) {
console.log(data);
$('#Client_Type').val(data.CLIENT_MNEMONIC);
//$('#Client_Type').text("HELLO");
//$('#Client_Type').attr(data.CLIENT_MNEMONIC);
//$('#card').show();
//$('#Client_Type').("HELLOE");
}
});

Populating HTML div using PageMethods/AJAX

My problem is little strange. Of course I checked many examples before I write here.
I have a div element at aspx i am sending Post with AJAX to populate it
<script>
function send(inputa, inputb) {
var dataString = JSON.stringify({
Id: inputa,
Opt: inputb
});
$.ajax({
type: "POST",
url: "my.aspx/Myfunction",
data: dataString,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
alert(result.d);
$("divtable").val(result.d);
},
error: function () {
alert("Problem Occured");
}
});
}
</script>
At alert I can see my response is good with no problem, but I could not send it to my div element. I tried many scripts
$("divtable").val(result.d);
$("#divtable").val(result.d);
$("divtable").html(result.d);
$(.divtable).val(result.d);
and I could not success. Every searh I made I found different answers.
Can someone good at this give us the correct answer please.
You can't call val() on a div, because it is not an input, select, etc. And you probably should not use html() if you're not inserting markup. Try text() instead.
Also, your selector may not be correct: could you post your div HTML as well?
Try
document.getElementById("divtable").innerHTML = result.d
or
$("#divtable").html(result.d);
You cant use val with div, but You can use innerHtml or Jquery's html but use a valid selector like an id "#divtable" or a class ".divtable" not sure what your html looks like :)
JSFIDDLE;

Get AJAX data from server before document ready (jQuery)

I want take some data from server and write it to global array in JavaScript. Then in document ready I want to use this array to create some new elements (options). I should have global array with this data, because after first load client can modify user interface using this data.
$(document).ready(function () {
UseAjaxQueryForFillGlobalArray();
MakingInterfaceUsingGlobalArray();
});
But I have strange behavior, when I debug page, I can see that method MakingInterfaceUsingGlobalArray working first, and just after I get data via AJAX with method UseAjaxQueryForFillGlobalArray and I don't have new interface(html options) with loaded data.
If I do like this:
UseAjaxQueryForFillGlobalArray();
$(document).ready(function () {
MakingInterfaceUsingGlobalArray();
});
Then in Firefox working fine, but in another web-browsers incorrect in first load (for example go to this page by link). But if I refreshing by F5, I have correct user interface which loaded via AJAX to global JS array.
How to fix it? Maybe I using totally incorrect way?
Added after comments:
This is my ajax function:
function UseAjaxQueryForFillGlobalArray(){
var curUserId = '<%= Master.CurrentUserDetails.Id %>';
var curLocale = '<%= Master.CurrentLocale %>';
$.ajax({
type: "POST",
url: "/segment.aspx/GetArrayForCF",
data: '{"userId":"' + curUserId + '","curLocale":"' + curLocale + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
//here is I doing parse my string from server and fill arrays.
}
});
}
I think that the problem is that you don't know exactly when the first function returns, since it'a asynchronous. So you should use the array in the callback only
function UseAjaxQueryForFillGlobalArray() {
// make the call
$.post(url, data, function() {
// let's be sure that the dom is ready
$(document).ready(function () {
// use the array
MakingInterfaceUsingGlobalArray();
}
}
}();// invoke the function
It's like reviving this post from the dead, but I had the same problem today, jQuery version greater than 1.6 has this ability:
https://api.jquery.com/jquery.holdready/
And I've used it like this:
$.holdReady(true);
var remoteJSONContent = null;
$.getJSON("http://www.example.com/remote.json", function(data) {
remoteJSONContent = data;
$.holdReady(false);
});
$(document).ready(function(){
console.log(remoteJSONContent);
});
Without using holdReady, I was getting null, after, I got the content.
For anyone still searching the answer for this.

How do I read a GET variable from JavaScript/jQuery?

How do I get a particular GET variable in JavaScript or jQuery?
I want to pass it on in ajax script in this sort of way:
$.ajax({
url: 'foo/bar.php',
data: {
search: $(this).val(),
page: something //$_GET['page'] only in js
},
...
Check out http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
what you try is almost correct, but you dont hav to label the data and you have a wron placed } in your code.
$.ajax({
url: 'foo/bar.php',
{
search: $(this).val(),
page: 'something'
},
...
});
for more information, take a look at the documentation.
EDIT: to read your get-variable, just do it like you always do: $s = $_GET['search'];. maybe you have to use $.get instead of $.ajax or set the request type for your $.ajax-call (don't know if it's POST by default, but you should be able to see this using firebug or something similar)

Categories

Resources