I'm trying to create a test script for a small little website I'm doing, and it requires a lot of troubleshooting with this particular form. In order to get a response, I need to fill out 5 step form wizard and then wait for the results. I've been trying to create a small little script I can use on a seperate page to test my php functions in a heartbeat. Here is what I have so far, and it doesn't seem to even post to the page.
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var data = {
console: "playstation",
game: "FIFA14",
coinamount: "10000",
team: "Some Team Name",
league: "Some League Name",
player: "Some Player Name",
quality: "Silver",
chemistry: "Basic",
position: "CAM",
customername: "Joey Small",
customeremail: "jsmall#email.com",
customerphonenumber: "23454343534",
payment: "pp"
}
$.ajax({
type: "POST",
url: "order.php",
data: data,
cache: false,
contentType: false,
processData: false,
success: function(data){
$("#response").html(data);
}
});
});
</script>
I'm inspecting the network data in my browser, and it is not sending to order.php. I don't have much love for javascript, especially Jquery, so any help would be greatly appreciated.
first thing you should do is close the script tag on your Jquery include at the top
Ok, so the additional options added on to the end are what is making the script not submit.
$.ajax({
type: "POST",
url: "order.php",
data: data,
success: function(data){
//alert("---"+data);
$("#response").html(data);
}
});
That works correctly. Daedalus's comment got me to thinking about the additional tags, and how they are not needed.
Related
I have following hangout button js code, I expect callback when user clicks on hangout button. Its not working, is anything wrong ?
gapi.hangout.render('hangout-button', {
'render': 'createhangout',
'topic': 'hangout_test',
'invites': "[{'id': 'xxx#gmail.com', 'invite_type': 'EMAIL'}]",
'initial_apps': [{
'app_id': "google_app_id",
'app_type': 'ROOM_APP',
'start_data': {
"user_id": "user_id",
"user_email": "user_email",
"token": "token",
"callback_url": "abc.com/hooks/hangout",
"host": "abc.com",
"callback_data": "user_data"
}
}],
'hangout_type': "normal",
'widget_size': 130
});
You need to listen for the onApiReady event from Hanogut and then call getHangoutUrl on gapi.hangout. As explained in their documention here:
https://developers.google.com/+/hangouts/api/gapi.hangout.html#gapi.hangout.ApiReadyEvent
Adding the same code below:
gapi.hangout.onApiReady.add(function(eventObj) {
var hangoutUrl = gapi.hangout.getHangoutUrl();
// After saving the url to a variable, pass it using an Ajax call
$.ajax({
type: "POST",
url: callbackUrl,
success: successFunc,
dataType: 'json',
data: JSON.stringify({
"hangoutUrl": hangoutUrl,
})
});
});
Reference: https://stackoverflow.com/a/30609147/2545197
Situation
I would like to pass the count of X from my SQL database from my controller to my view where a chart picks up this data and renders it.
What I have done so far
So far I have the controller code. which gets the count from the table and I am trying to pass this figure back to the chart.
public ActionResult currentPopulation()
{
var dests = db.personal_info.Count();
// return Json(dests, JsonRequestBehavior.AllowGet);
return Content(JsonConvert.SerializeObject(dests), "application/json");
}
I also have the chart (code below) from the view
<script>
var barChartData = {
url: '/Home/currentPopulation',//Local
type: "GET",
dataType: "JSON",
labels: ["A", "B", "C"],
datasets: [
{
// url: '/Home/currentPopulation',//Local
// type: "GET",
// dataType: "JSON",
fillColor: "#26B99A", //rgba(220,220,220,0.5)
strokeColor: "#26B99A", //rgba(220,220,220,0.8)
highlightFill: "#36CAAB", //rgba(220,220,220,0.75)
highlightStroke: "#36CAAB", //rgba(220,220,220,1)
data: [51, 30, 40], //this is the hard coded values which the chart loads
//
},
],
}
$(document).ready(function () {
// new Chart($("#canvas_bar").get(0).getContext("2d")).Bar()
new Chart($("#canvas_bar").get(0).getContext("2d")).Bar(barChartData, {
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
responsive: true,
barDatasetSpacing: 6,
barValueSpacing: 5
});
});
</script>
Problem
The problem I have is that, I cannot replace the [51,30,40] for the A,B,C values
which is supposed to come from my controller. I am a bit confused as my action "currentPopulation" is not getting called, and i cannot move the link cause according to the code, the data is picked up from barChartData and assign when the new chart is called.
new Chart($("#canvas_bar").get(0).getContext("2d")).Bar(barChartData, {
Any help would be appreciated.
If you want your controller to be hit you need to make an ajax request. This ajax call should be done on the action which you want the controller to be called. Button click or so on. Start using console.logs to debug your javascript.
If you want this code to be execute on page open, wrap the ajax call in document.ready function.
$.ajax({
type: "POST",
url: "Home/currentPopulation",
//data: jsonData, if you need to post some data to the controller.
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnErrorCall
});
function OnSuccess(response) {
var aData = response.d;
console.log(aData);
//build here your **data** as object wanted by Bar. Colors which you want and so on, options could be empty object {}. I think is possible to call bar without options, you need to read the documentation.
var ctx = $("#myChart").get(0).getContext("2d");
var myBarChart = new Chart(ctx).Bar(data, options);
}
function OnErrorCall(response)
{
alert('error');
}
Here I show you little example how to do it. You can just google chart.js with mvc there is a lot of examples. Check if the url is correctly written I think you should remove the / in the begging.
This is just suggestion.
Also if you had the money and this is serious chart project use highcharts.js ! This is the best library which can work totally offline and gives you really good flexibility.
Usefull links:
ChartJS documentation
I know this seems kind of vague, but it was the best way I could put this into words. Below is the example of my code.
JavaScript
<script type="text/javascript">
var name = $('#firstName').val();
var email = $('#userEmail').val();
var json = { Email: email, FirstName: name };
var string = JSON.stringify(json);
$.ajax({
url: 'http://uBuildRewards.api/api/Users/GetInfo',
type: 'GET',
contentType: 'application/json',
dataType: "json",
crossDomain: true,
data: string
});
</script>
HTML
<div class="user-logged-in">
<div class="content">
<div class="user-name" id="firstName"> **NAME HERE** <span class="text-muted f9">admin</span></div>
<div class="user-email" id="userEmail"> **EMAIL HERE** </div>
<div class="user-actions">
<a class="m-r-5" href="">settings</a> logout
</div>
</div>
</div>
Before all this, in another view I have similar JavaScript code that is doing my login. Which is accessing a method from the UsersController that gets all information, and if email and pass is correct it logs me in. Then, this method, is when I am logged in I want it to say that Welcome, (name of user logged in as) and your current email address is (who ever I am logged in as).
So I am trying to find out how, from the javascript, to paste the info retrieved from the 'GetInfo' method, and display the Name and Email where I put "NAME HERE and EMAIL HERE"
I tried to be as descriptive as I possibly could. Sorry for any confusion. I greatly appreciate your help in advance :) Still fairly new to JQuery and JavaScript!
why are you sending login credentials over http and not https (SSL)?
That aside...
You have to use .done method.
$.ajax({
url: 'http://uBuildRewards.api/api/Users/GetInfo',
type: 'GET',
contentType: 'application/json',
dataType: "json",
crossDomain: true
}).done(function(data) {
console.log("Sample of data:", data);
$('#firstName').text(data.name);
$('#userEmail').text(data.email);
});
I am having trouble figuring out how to get the following done.
click on a paragraph element
send a .post request using jQuery
get the sent data from the server to display in the paragraph
I've searched quite a bit and tried using some of the solutions proposed but it failed.
Here's my folder structure:
+ html
- index.html
+ js
- eventhandling.js
+ php
- test.php
HTML
<div class="channel" id="channel1">
<p class="title">CHANNEL 01</p>
<p class="stb_sub_menu" id="model">STB Model</p>
<p class="network_sub_menu" id="network">Network</p>
<p class="smartcard_sub_menu" id="smartcard">Smartcard</p>
<p id="reboots">Reboots</p>
</div>
<p id="demodata">Demo Data</p>
PHP
<?php echo "PHP script -> You called master?"; ?>
JS
$(".channel").click(function(){
/*alert(I am clicked");*/
$.post('test.php', {name: 'John'}, function(data) {
$("#demodata").val("data");
});
});
The click event is successful because the alert pops up. Nothing shows on the Firebug console window.
Might be the service URL you passed into post is wrong (according to the folder structure).
The code must be like this.
$(".channel").click(function(){
var postData = {"name":"john"};
$.ajax({
type: "POST",
url: '../php/test.php',
data: postData ,
contentType: "application/json",
dataType: "json",
processdata: true,
success: function (response) {
},
error: function(error){
}
});
});
This will work for you.
$(".channel").click(function(){
/*alert(I am clicked");*/
$.post('test.php', {name: 'John'}, function(data) {
$("#demodata").text(data);
});
});
I'am doing a jquery call to API website, which returns me the results in JSON format:
{
"results":[
{
"user":{
"gender":"female",
"name":{
"title":"mrs",
"first":"linda",
"last":"diaz"
},
"location":{
"street":"2333 oak lawn ave",
"city":"red bluff",
"state":"maryland",
"zip":"49309"
},
"email":"linda.diaz55#example.com",
"password":"blackman",
"md5_hash":"3c64b82d048c8754a30e292a1359fa39",
"sha1_hash":"d5095cf146dda75865d348f4ce4820b11b58b9fd",
"phone":"(880)-878-1658",
"cell":"(183)-179-1598",
"SSN":"425-55-1070",
"picture":"http:\/\/api.randomuser.me\/0.2\/portraits\/women\/8.jpg"
},
"seed":"2d589586d34c1c5",
"version":"0.2.1"
}
]
}
How can I access (or get values of) the items, for example: I want to console.log() the first name and the last name, get a phone number ?
Using a .(dot) not working for me, maybe i'am doing something wrong ?
Here is a javascript code
$.ajax({
type: 'POST',
url: url + resultsQuery,
dataType: 'json',
success: function(data){
console.log(data);
}
});
data.results[0].user.name.first
data.results[0].user.name.last
data.results[0].user.phone
For your JSON Structure, try
data.results[0].user.name.first
data.results[0].user.name.last //etc