$.Ajax is not a function during combo box selection change - javascript

Here is the Code. I've already researched about it and so far, haven't found the right solution. Any help would be much appreciated. Thanks.
<script type="text/javascript" src="{%static 'javascript/jquery-3.1.1.js'%}"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#itemid").change(function(){
var itemid = $(this).val();
var func_url = '/get_itemdetails/' + itemid +'/';
$.ajax({
type:"GET",
url: func_url,
dataType:"json",
success: function(data){
console.log(data);
}
});
});
});
</script>


Below is the latest script header for Google's hosted CDN which allows for the $.ajax Function:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#itemid").change(function(){
var itemid = $(this).val();
var func_url = '/get_itemdetails/' + itemid +'/';
$.ajax({
type:"GET",
url: func_url,
dataType:"json",
success: function(data){
console.log(data);
}
});
});
});
</script>

Related

How to get Pinterest Total Share Count Using Javascript?

What i require? I need to get a total share count using javascript.
Using this link: https://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=http://google.com
I can get the result:
receiveCount({"url":"http://google.com","count":11278})
My code which is not working, i'm not sure which part of the code is wrong. Below:
#pin-div {
color: red
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<div id="pin-div">0</div>
<script type="text/javascript">
$(function() {
var url = "http://facebook.com";
var apiUrl = "https://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=" + url;
$.ajax({
url: apiUrl,
success: function(result) {
$.each(result, function(key, val) {
console.log(key + " - " + val["receiveCount"]["count"]);
var shareCount = val["receiveCount"]["count"];
$("#pin-div").html(shareCount);
});
}
});
});
</script>

Your data is jsonp: receiveCount({"url":"http://google.com","count":11278}). Where the receiveCount function must be created in the window context to hold the data.
You need to add: dataType: "jsonp" in your $.ajax code.
You can try with this version of your code:
#pin-div {
color: red
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<div id="pin-div">0</div>
<script type="text/javascript">
$(function() {
var url = "http://facebook.com";
var apiUrl = "https://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=" + url;
$.ajax({
url: apiUrl,
dataType: "jsonp",
success: function(result) {
receiveCount(result);
}
});
});
function receiveCount(data) {
$("#pin-div").html(data.count);
}
</script>

JavaScript/Ajax - Send Data and Receive response with multiple variables

Here is my JavaScript code for sending the post action:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var ColorId = "1";
$( "#targetButton" ).click(function() {
$.ajax({
url: 'checkcolors.php',
type: 'post',
dataType: 'json',
success: function (data) {
var arr = data.msg.split(',');
arr.forEach(function(id){
$('#' + id.trim()).hide();
});
//$('#target').html(data.msg);
},
data: ColorId
});
});
});
</script>
<button type="button" id="targetButton">Send</button>
<div style="BlackAndWhite" id="24604682">24604682</div>
<div style="BlackAndWhite" id="24604682x">24604682x</div>
<div style="BlackAndWhite" id="24604679">24604679</div>
<div style="BlackAndWhite" id="24604621">24604621</div>
Here are the results from checkcolors.php:
24604603, 24604684, 24604640, 24604609, 24604682, 24604686, 24604681, 24604689, 24604602, 24604679, 24604680, 24604622, 24604685, 24604683, 24604621, 24604677, 24604688,
I can make them to be printed like this also:
24604603
24604684
24604640
24604609
24604682
24604686
24604681
24604689
24604602
24604679
24604680
24604622
24604685
24604683
24604621
24604677
24604688
I can make these numbers to be formated however i want.
What i have to do!
I have html div elements with the same ids that the result is returning.
When these numbers are returned i have to hide all div elements with the ids shown from checkcolors.php response.
How can i do that ?
Thanks in advance!

Here's a very crude way to do it:
<script type="text/javascript">
function send() {
var person = {
name: $("#id-name").val(),
address:$("#id-address").val(),
phone:$("#id-phone").val()
}
$('#target').html('sending..');
$.ajax({
url: 'checkcolors.php',
type: 'post',
dataType: 'json',
success: function (data) {
var arr = data.msg.split(',');
arr.forEach(function(id){
$('#' + id.trim()).hide();
});
//$('#target').html(data.msg);
},
data: person
});
}
</script>

Why style="BlackAndWhite" can be a class="BlackAndWhite" ???
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var ColorId = "1";
$( "#targetButton" ).click(function() {
$.ajax({
url: 'checkcolors.php',
type: 'post',
dataType: 'json',
success: function (data) {
console.log(data);
var arr = data.split(',');
var html = "";
arr.forEach(function(id){
html += "<div style='BlackAndWhite' id='" + id + "'>" + id + "</div>";
});
$('#target').html(html);
},
data: ColorId
});
});
});
</script>
<button type="button" id="targetButton">Send</button>
<div id="target"></div>

how to reload a div with form content using jquery ajax

I am working on creating an online visitor chat software using PHP and MySQL. What am i trying to do is load the page on clicking the submit button
id for submit button: send
id for visitor:vid
id for chat:cid
Below is the code snippet for Ajax request made by the code but it is not working.
I have put few alerts within the codes to test whether the function is working fine or not and the function is not working.
Please help me out.
Any other method is also accepted
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#send").click(function() {
var cid = $("#cid").val();
var vid = $("#vid").val();
var usermsg = $("#usermsg").val();
var submitmsg = $("#submitmsg").val();
var dataString = 'cid='+ cid + '&vid=' + vid + '&usermsg=' + usermsg;
alert(datastring);
$.ajax({
type: "POST",
url: "chat.php",
data: dataString,
success:function(result){
alert(result);
}});
});
</script>

Wrap your click function under
jQuery(document).ready(function($){
// your click event here
});

Change your code to:
<script type="text/javascript">
$(document).ready( function() {
$("#send").click(function() {
var cid = $("#cid").val();
var vid = $("#vid").val();
var usermsg = $("#usermsg").val();
var submitmsg = $("#submitmsg").val();
var dataString = 'cid='+ cid + '&vid=' + vid + '&usermsg=' + usermsg;
alert(datastring);
$.ajax({
type: "POST",
url: "chat.php",
data: dataString,
success:function(result){
alert(result);
}});
});
});
</script>

getjson query is not working

Json page is : http://freegeoip.net/json/59.92.78.49
and my code is
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("http://localhost/02/t.php",function(result){
alert(result.ip);
});
});
});
</script>
this simple code is not working :(

Seem like freegeoip.net support jsonp,you can do:
$('button').click(function () {
$.ajax({
url: "http://freegeoip.net/json/59.92.78.49",
dataType: "jsonp",
success: function (result) {
alert(result.ip); // server response
}
});
});
Fiddle Demo

import the all xml attribute value with click method

i have Something this type of xml with huge of data:-
<root>
<child1 id="4331" value="twenty-twenty">
<child2 id="4332" value="India">
<child4 id="4334" value="Mumbai Indian"></chlild4>
<child5 id="4335" value="Rajshthan Royal"></child5>
</child2>
<child3 id="4333" value="Pakishtan">
<child6 id="4336" value="Arngabad"></child6>
<child7 id="4337" value="Punjab"></child7>
</child3>
</child1>
</root>
i tried this
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
});
});
$(function() {
$.ajax({
type: "GET",
url: "atry.xml",
dataType: "xml",
success: function(xml) {
data = xml;
$(xml).find('*').each(function(){
console.log($(this).attr('id'));
console.log($(this).attr('value'));
});//close $.each(
}
}); //close click(
});
</script>
</head>
<body>
<!-- we will add our HTML content here -->
<button>Link</button>
</body>
</html>
i am try this but no output display...
import the all child attribute using jquery with click event...
thanks

You can try this code with jquery:
var xml = '<root><child1 id="4331" value="twenty-twenty"><child2 id="4332" value="India"><child4 id="4334" value="Mumbai Indian"></chlild4><child5 id="4335" value="Rajshthan Royal"></child5></child2><child3 id="4333" value="Pakishtan"><child6 id="4336" value="Arngabad"></child6><child7 id="4337" value="Punjab"></child7></child3></child1></root>';
var $root = $(xml);
$root.find('*').each(function(){
console.log($(this).attr('id'));
console.log($(this).attr('value'));
});

You may try like this
$(document).ready(function() {
$("button").click(function() {
$.ajax({
type: "GET",
url: "atry.xml",
dataType: "xml",
success: function(xml) {
data = xml;
$(xml).find('*').each(function(){
console.log($(this).attr('id'));
console.log($(this).attr('value'));
});//close $.each
}
}); //cloase ajax
}); //close button click
}); //close ready

Categories