AJAX call not working in WP based site - javascript

This is my first time calling AJAX from within jQuery so please bear with me here. I have a JSON file where I have formatted all of my data, and would like to simply call the JSON file and append some of the data to my HTML.
I should let everybody know that I am using Wordpress as a backbone for the site, though the PHP-based framework is not being utilized at all to my knowledge in this call, I did try and write out my URL to make sense within the jQuery. All of the id's in the slugArray array exist within my HTML.
OK! So:
JSON file can be seen here: http://bmgz.rtcgraphics.com/wp-content/themes/bmgz/data/whatwedo.json
jQuery:
var slugArray = [
'#project-management',
'#economic-incentives',
'#site-selection',
'#stakeholder-engagement-and-events',
'#lobbying-and-advocacy',
'#public-policy-and-issues-management',
'#digital-communications',
'#event-and-trade-show-materials',
'#presentation-and-print-design'
]
function getWWD(){
for (i=0; i<=slugArray.length; i++) {
var selection = slugArray[i];
$(selection).click(function(){
$.getJSON('wp-content/themes/bmgz/data/whatwedo.json', function(result){
alert("It works!");
var entry=result.whatwedo[0].id;
console.log(entry);
});
});
}
};
getWWD();
When I run this, I don't get anything, not even my alert. I was getting a 404 error when I typed in the URL wrong for the $.getJSON request, so I know the computer is reading it at least partly. Thanks guys! I appreciate any input!

Try with:
var slugArray = [
'#project-management',
'#economic-incentives',
'#site-selection',
'#stakeholder-engagement-and-events',
'#lobbying-and-advocacy',
'#public-policy-and-issues-management',
'#digital-communications',
'#event-and-trade-show-materials',
'#presentation-and-print-design'
]
function getWWD(){
for (i=0; i<=slugArray.length; i++) {
var selection = slugArray[i];
$(selection).click(function(){
$.getJSON('http://bmgz.rtcgraphics.com/wp-content/themes/bmgz/data/whatwedo.json', function(result){
alert("It works!");
var entry=result.whatwedo[0].id;
console.log(entry);
});
});
}
};
getWWD();

Related

Can't work with data obtained with $.Ajax()

I am writing a JS where I want to make some Ajax calls to get a JSON file from my DB in CouchDB. My code is based on examples I found online, but my lack of experience and knowledge is making it difficult to fix it completely.
My code:
function myFunction(){
var request = $.ajax({
url:'http://admin:pass#localhost:5984/db/_design/view/_view/view',
type:'get',
dataType:'json'
});
request.done (function (data)){
var result;
for (var i in data){
if( data[i] == key){
result.push(data[i]);
}
}
console.log(result);
};}
Problem: It seems like it is not even doing the requested call since when I try to print my array it isn`t doing anything.
The way see it, in the first part where I defined request it should get the JSON file from CouchDB. And, if correct, in the second part where the request is done request.done I give the function how I want the JSON file to be taken care of. To make it clear, my idea is to iterate through the data and to save the values of the "key" in every row in my result-array.

Javascript Associative Array cant post via php

Iam trying to post an Javascript Object via php, but i cant get the value in PHP, iam using laravel framework.
my array,
[type: "sadf", level: "sadfasdf"]
javascript code,
var data_push = Array();
$('form').on('change', 'select, textarea, input', function(t,s){
var key = $(this).attr('id');
var value = $(this).val();
data_push[key] = value;
});
$("#submit").click(function(){
$.post("{!! URL::to('test') !!}", {
_token : tempcsrf,
req_data : data_push
},
function (resp, textStatus, jqXHR) {
alert(resp);
});
});
php code,
public function workbook_save(Request $request_data)
{
$require_data = $request_data->req_data;
print_r($require_data);
}
Tried also JSON.stringfy(data_push) ,json_decode but no luck, i cant get the Javascript object in php, donno what iam doing wrong here, pls advice.
This is what your JS does:
Creates an array
Sets up an event handler to populate the array when things change in the form
Posts the (empty) array to the server
Later on, things will change in the form and data will be put in the array.
The server knows nothing about this because you already sent its contents.
You need to change your logic so you only make the POST request when you are ready to send the data.

Could someone explain me this block of code line by line? Jquery - javascript

I've just started to learn jquery&javascript, and in my project I've found this block of code, and I'm wondering what does it mean, some parts are confusing to me, all I've understand so far is that this is triggering on some control change event but how can I know which control and how does this work in fact?
<script type="text/javascript">
$(function () {
$("#MainGroupID").change(function () {
var val = $(this).val();
var subItems="";
$.getJSON("#Url.Action("GetSubgroupByMainGroup", "Article")", {id:val} ,function (data) {
$.each(data,function(index,item){
subItems+="<option value='"+item.Value+"'>"+item.Text+"</option>"
});
$("#SubGroupID").html(subItems)
});
});
});
</script>
Please some explanation line by line I'm trying to understand this stuffs how do they work with code behind etc etc :/
Maybe it's stupid question but .. :/
Thanks guys,
Cheers!
//$(function () {
this part is used to invoke the function when the DOM is ready.
$("#MainGroupID").change
//is a change event - like the value of the input has changed.
var val = $(this).val();
//You are picking up the value of the input
var subItems="";
// you are creating a placeholder variable to hold data
$.getJSON(
//this is a call to get json data.
$.each
//you are now looping through the data obtained from the json call
subItems+="<option value='"+item.Value+"'>"+item.Text+"</option>"
//you are now populating the variable you had set
$("#SubGroupID").html(subItems)
//this places the content of the obtained data and the structure from the placeholder into the div with the id SubGroupID

jQuery function that call controller method from client side every 10 seconds mvc razor

I got a problem that i cannot solve cause of my incomplete knowledge of jQuery/Java syntax but which problem can be fast solved by someone with more experience than me.
I want to build a simple script to run on client side that will call a controller method every 10 seconds (method is responsible for receive data from message server)
all i do so far is search web and more i read more i get confused..
basic need are
use jQuery ( there was a tip that says it is best choice)
call method every 10 seconds
method i want to call is: "callGetMessagesFromClientSide" and it's in CoordinatorsController
<script src="~/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script>
var callETs = setInterval(function () { callMessages() }, 10000);
function callMessages()
{
var url = #Url.Action("callGetMessagesFromClientSide", "Coordinators")
$.get(url);
}
</script>
You need to wrap generated URL in quotes.
Use
var url = '#Url.Action("callGetMessagesFromClientSide", "Coordinators")';
instead of
var url = #Url.Action("callGetMessagesFromClientSide", "Coordinators")
Rest of your code should work.
function callMessages() {
var url = '#Url.Action("callGetMessagesFromClientSide", "Coordinators")';
$.get(url, function(response) {
//Perform some operation in the callback if require
});
}
You're most of the way there, try this:
function callMessages()
{
var url = '#Url.Action("callGetMessagesFromClientSide", "Coordinators")';
var update = $.get(url);
update.done(function(response) {
//handle server response
});
}
depending on what the server returns (e.g. JSON, HTML etc) depends on how you handle it

Extract piece of ajax request using jquery get

I'm struggling to get this get request to cooperate. I would like to begin by saying that the PHP side flawlessly. I am now trying to use ajax and jQuery to make it look smooth.
Here is the js:
$(".controls a").click(function(e) {
e.preventDefault();
$.get($(this).attr("href"), function(data) {
$(".schedule").fadeOut(200, function() {
$(this).html(data).fadeIn(200);
});
});
});
$(this).attr("href") refers to a URL that is passed in order to get information from a MySQL database (e.g. hours.php?week=2014-08-11). The value passed in week is updated via PHP every time a link is clicked.
Here is what I get from console.log(data) http://pastebin.com/bGpfjq6r
I've tried converting data (raw HTML) into a jQuery object by doing the following:
var $data = $.parseHTML(data);
However, this just coverts the HTML into an array. I can perform a find for the element:
console.log($($data).find(".schedule"));
but when I view the output of this the context is undefined.
I also tried the accepted answer in this question Extract part of HTML document in jQuery with no avail:
var foo = $(".schedule", $data);
console.log(foo);
This still has an undefined context.
Ideally, I want to grab just the information in .section and replacing the current in .section with the information captured from the GET request. .section is part of the document as well as what is returned from the request.
There are no errors in the console. jQuery version is 1.11.1.
My apologies if the question is poorly written. I tried to write it in a general way so it may apply to other people too. Let me know if you need additional information.
Try using jQuery filter() function.
$(".controls a").click(function(e) {
e.preventDefault();
$.get($(this).attr("href"), function(data) {
$(".schedule").fadeOut(200, function() {
// apply filter function here to find new schedule div
var newSchedule = $(data).filter(".schedule").eq(0).html();
$(this).html(newSchedule).fadeIn(200);
});
});
});
Try wrapping the response so you can parse it...
$(document).ready(function() {
// Create named function to Initialize the on click event capture
function initAJAX() {
$(".controls a").click(function(e) {
e.preventDefault();
$.get($(this).attr("href"), function(data) {
var response = $('<div>' + data + '</div>');
var contents = response.find('.schedule').html()
$(".schedule").fadeOut(200, function() {
$(this).html(contents).fadeIn(200);
// After we get the content updated, we have to reinitialize those new anchors
initAJAX();
});
});
});
}
// We have to call this once to start or nothing will happen
initAJAX();
});

Categories

Resources