Develop Reference

Put result of ajax request inside div

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);

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");
}
});

Jquery dependent dropdown only works with excessive variables

I have very basic JS skills, so please excuse me if I'm trying to fix something what doesn't need fixing.
I use select2 dropdown. When user selects any option, it gets posted to remote file, which returns possible options (in JSON format) to be displayed in 2nd (dependent) dropdown.
1st select looks following:
<select name="restaurant_id" id="restaurant_id">my_options_go_here</select>
2nd (dependent) select looks:
<select name="division_ids_array[]" id="division_ids_array" multiple="multiple"></select>
And here's JS code:
$(function () {
function ajax_post_data_get_divisions(parameters) {
$.ajax({
method: "POST",
url: "ajax.php",
cache: false,
data: parameters,
success: function(data) {
var dropdown_options=$('#division_ids_array');
dropdown_options.empty();
var dropdown_options="";
$.each(data, function(key, val) {
dropdown_options+='<option value="'+val.division_id+'" '+val.selected+'>'+val.division_name+'</option>';
});
$(dropdown_options).appendTo("#division_ids_array");
}
});
}
$('#restaurant_id').on("change", function(e) {
parameters=$("#my_form_id").serialize();
ajax_post_data_get_divisions(parameters);
});
});
Everything works fine, but I somehow believe these lines are excessive:
var dropdown_options=$('#division_ids_array');
dropdown_options.empty();
var dropdown_options="";
Please excuse my ignorance, but it looks variable dropdown_options gets created first, then it gets set to empty, and then the same variable is created again?
Unfortunately, if I remove at least one line, nothing works. For example, if I try to simply code to:
var dropdown_options=$('#division_ids_array');
dropdown_options.empty();
dependent dropdown remains empty. Is it an error in my code?

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;

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)