We Keep Coding

Two different ajax urls return the same data

I am using jQuery ajax calls on my django site to populate the options in a select box which gets presented in a modal window that pops up (bootstrap) to the user. Specifically, it provides a list of available schemas in a particular database. The ajax url is dynamic which means it includes a db_host and a db_name in the URL. I have a site with clients and each client has to point to a different host/db.
The db_host and db_name passed via the URL are used in the django view to execute the necessary sql statement on the relevant host/db.
So, the URL should be unique for each db_host/db_name combination.
I am running into a problem where I am on client A's page, I click the button to display the modal. The ajax call is made. I get the data I expect. Everything is fine. Let's say the ajax URL is "/ajax/db_host/server_a/db_name/client_a_db/schema_dropdown".
Now, I got to client B's page and click the same button to display the modal. The ajax call is made. Let's say this time, the ajax URL is
"/ajax/db_host/server_b/db_name/client_b_db/schema_dropdown."
However, the data returned is the actually the data that was returned for the previous ajax call I made ("/ajax/db_host/server_a/db_name/client_a_db/schema_dropdown") and not for the URL (specifically host/db) that I just passed.
I have double/triple checked that my URL is, in fact different, each time. Any help would be appreciated.
Here is my javascript function that gets called just before displaying the modal that populates my select.
function populate_schema_dropdown(db_host, db_name) {
var ajax_url = "/ajax/db_host/" + db_host + "/db_name/" + db_name + "/schema_dropdown"
$.ajax({
url: ajax_url,
success: function (data) {
$("#select-element").empty()
$.each(data, function (i, v) {
$("#schema-element").append("<option value='" + v[0] + "'>" + v[1] + "</option>")
})
}
});
};
Below is my django view.
def ajax_schema_dropdown(request, db_host, db_name):
cursor = get_temporary_db_connection(db_host, db_name).cursor()
cursor.execute("""
SELECT
NAME
FROM [sys].[schemas]
""")
data = [(each[0], each[0]) for each in cursor.fetchall()]
cursor.close()
return HttpResponse(json.dumps(data), content_type="application/json")
Below is get_temporary_db_connection function...
def get_temporary_db_connection(db_host, db_name):
temporary_name = str(uuid.uuid4)
connections.databases[temporary_name] = {
'ENGINE': 'sqlserver_ado',
'NAME': db_name,
'HOST': db_host,
'USER': '',
'PASSWORD': '',
'OPTIONS': {
'provider': 'SQLNCLI11'
}
}
return connections[temporary_name]

Likely the problem in the way of setting temporary_name variable. It's not dynamic like it suppose to be ( I guess ), that's same database as first one are being used for all proceeding ajax calls, to fix it you have to replace line:
temporary_name = str(uuid.uuid4)
to
temporary_name = str(uuid.uuid4()) # note i've changed uuid.uuid4 -> uuid.uuid4()
________________________________^^____
Note: Likely it's make sense close connection to database after working with it, otherwise you will end up with a lot of connections in connections dict. As an option you can keep connection to db in connections dict after it was created and reconnect ( if some condition occured) or simply return existed connection without performing new connection.

sending multiple ajax requests not getting expected repsonse

so i have a javascript function that submits individual submissions from a form to a phpfile (processFeedback.php) that adds each submission to an array. then once the array is filled the array is passed back to the ajax callback (i think that's the proper terminology). if the array is passed back then the array gets passed to another php file (insertFeedback.php) that will insert the data into the database accordingly.
the entire site and all the scripts work perfectly, as in the array is getting filled and passed back to the ajax call correctly. but i'm getting an error message on the (insertFeedback.php) file call. as of right now the insertFeedback.php file does nothing but insert my database connect file. there is no return or anything being done on this page. i have tried several options, setting various arrays and json_encoding them with the same response every time. but i can't get a set answer as to why as the jqxhr.error sends me to a jquery fuction that i do not as of yet understand, and there is no jqxhr.responseText (both of which i use regularly for debugging.
here's my function:
function prepareData(cont, sect) {
var sentData = {'choice': cont, 'section': sect};
var addSession = $.post('processFeedback.php', sentData, null, 'json');
addSession.done(function (fbData) {
console.log('success: ' + fbData);
action = fbData.action;
if (fbData.status) {
receivedData = fbData.data;
console.log('receivedData.age: ' + receivedData.age);
var insertData = $.post('insertFeedback.php', receivedData);
insertData.done(function(insertData) {
console.log('from insert page: ' + insertData);
});
insertData.fail(function(noInsertData) {
console.log('failed at insert page: ' + noInsertData);
})
}
if (!fbData.status) {
console.log('form not complete yet');
}
eval(action);
});
addSession.fail(function (a, b, c) {
console.log('failure: ' + a.reponseText);
});
}
i have been starting at this code for hours, so i know this is going to be a painstakingly simple answer. most likely just messing up my variables somewhere along the way. but any help with why the insertData function keeps failing.

JSON Parse Error: unexpected end of data at line 1 column 1 of the JSON data

I have a database, analysis.php and index.php webpages. The analysis.php gets the data from the database, sorts it in a required pattern, and then echoes the json_encode($array); into a div with the id 'data'. I am trying to get that JSON Data and parse it in the index.php page.
However I am getting an error. SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
I am trying to get this data everytime the user selects an option from a select box.
My jQuery code is:
$(document.body).on('change', '.select' , function () {
var identification = $(this).val();
var JSONText = $(this).closest('div[id|="module"]').find('p[id="JSON"]');
JSONText.load('analysis.php?data=' + identification + ' #data');
console.log("JSON Imported: '" + identification + "'");
var obj = jQuery.parseJSON(JSONText.text());
console.log(JSONText.text());
});
EDIT: As you can see I have the snippet console.log(JSON.text());. The output of the JSON that I get is correct. The only issue I think might be is that the quotes are all " instead of the JSON quotes being different from the outer quotes.

jQuery.load is asynchronous, you're trying to parse the JSON before its actually loaded. Using jQuery.getJSON loads the content, does the parsing and provides a callback you can bind to.
jQuery.load loads the content as HTML and sets the innerHTML of the selected element, you could bind the complete handler here aswell, but you may encounter issues by loading the content as HTML and then using text to retrieve it from the DOM as some parts of your JSON may be interpreted as HTML elements.
Better use this:
$(document.body).on('change', '.select' , function () {
var identification = $(this).val();
$.getJSON(
'analysis.php?data=' + identification + ' #data',
function (data) {
console.log(data);
}
);
});

In addition to LJ_1102's solution, here is a way to fix your current snippet:
JSONText.load('analysis.php?data=' + identification + ' #data', function() {
console.log("JSON Imported: '" + identification + "'");
var obj = jQuery.parseJSON(JSONText.text());
console.log(JSONText.text());
});

Passing url in async xhttp request not hitting server (although does it first time) - getting syntax error

In my html5 template (also using GAE and datastore/python), I'm making an async js call to server and coming back with some more categories FROM WHICH results/data choices are then given for the user to trigger another selection which shoots off the same async call method. It works the first time, but in the second, it comes back with a syntax error. The call doesn't even seem to make it to the method (no logs!), what gives??? The only difference between the 2 calls to the async js method is in the data passed through the url. There are 3 parameters passed with 1 parameter being used to form the url routing for the server. In both calls, an object key is part of the url. In the first one, the url is derived from the original template rendering through a jinja object {{item.key()}}. In the second one, the key is derived from the key which is stored as a value in the json dictionary passed back from the first one. Perhaps there is something going on here because it does not seem to even hit the server in the second?
The first time the catkey is populated with jinja object key----:
var html_output = "";
{% for item in cat_profession %}
var nameString = "{{item.name}}";
html_output += "" + nameString + "<br />";
{% endfor %}
which works BUT the second time, I'm using the results from the first one to generate categories to call json again to get more
for (var key in cat_JSON)
{
html_output += "" + key + "";
the cat_JSON[key] is a string --- there is something funky going on - but the console logs for the url seem to be ok and I don't see any evidence it is actually reaching server method. The JSON above has the name stored in the key, and the object key stored as the value.
Here's the js function:
function getNextLevel(catkey,catname) {
url = "/api/filter/" + catkey;
subjectAPI.open("GET", url, true);
console.log("url is ", url);
subjectAPI.onload = function() {
var cat_JSON = JSON.parse(this.responseText);
var html_output = "";
for (var key in cat_JSON)
{
html_output += "" + key + "<br />";
}
$(#col).append(html_output);
}
subjectAPI.send();
}

I think you should provide more code how you make the first ajax and the second ajax so that we know more about your issue. With the current information provided, I guess you perform 2 ajax requests in succession and that could be the problem, since ajax request is asyn. When you perform the second request, the response from the first request may not arrive yet.
Updated based on updated question:
The problem is this line, there is a redundant , character at the end
"javascript:getNextLevel(\'" + cat_JSON[key] + "\',\'" + key + "\'," + ")\">"
It should be:
"javascript:getNextLevel(\'" + cat_JSON[key] + "\',\'" + key + "\')\">"

Trying to use jQuery to display JSON text data

I know very little (none) JavaScript, or much about using API's. However I would like to display some hotel reviews on my webiste made available over the qype.com API. However I'm struggling with being able to manage this.
This is the code I have so far:
$(document).ready( function() {
$.getJSON( "http://api.yelp.com/business_review_search?term=hilton%20metropole&location=B26%203QJ&ywsid=APIKEY Removed",
function(data) {
$.each( data.businesses, function(i,businesses) {
content = '<p>' + businesses.reviews.text_excerpt + '</p>';
content = '<p>' + businesses.reviews.date + '</p>';
$(content).appendTo("#review");
} );
}
);
} );
I have a div in the body called review where I want to display the text.
Any advice greatly received.
JSON can be found at http://api.yelp.com/business_review_search?term=hilton%20metropole&location=B26%203QJ&ywsid=lOoGGbkYpVmTvxHlWGT2Lw
Also, I have multiple businesses on the same page, how would I make use of this multiple times on the same page, but output the data in different locations?

Update: Ah, I see your error now. businesses.reviews is an array (each business can have more than one review) so you have to loop over each business and each business' reviews.
i had to change some things to get it to run in my test bed, but you can see a sample of this code running here: http://bit.ly/4mTxPp
yelp currently support JSONP calls so you can change your code to:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function showData(data) {
$.each(data.businesses, function(i,business){
// extra loop
$.each(business.reviews, function(i,review){
var content = '<p>' + review.text_excerpt + '</p>';
content += '<p>' +review.date + '</p>';
$(content).appendTo('#review');
});
});
}
$(document).ready(function(){
// note the use of the "callback" parameter
writeScriptTag( "http://api.yelp.com/business_review_search?"+
"term=hilton%20metropole"+
"&location=B26%203QJ"+
"&ywsid=lOoGGbkYpVmTvxHlWGT2Lw"+
"&callback=showData"); // <- callback
});
function writeScriptTag(path) {
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", path);
document.body.appendChild(fileref);
}
</script>

Do you get an error in Firebug using this code? What happens exactly?
I expect this problem is caused by the fact that you're trying to do a cross-domain request which is not allowed. Normally you'll want to do this kind of data gathering on your back-end, but you can use an alternative such as JSONP to do the same.
Take a look at jQuery's documentation on this stuff and it should be clear what's going on.
Also, as a side note: In your callback you have content = which is ok but not ideal. Assigning to content like this will create a variable in the global scope which you do not want. In this case it probably wont cause an issue but say you have 2 of these requests going at once, the second assignment could easily step on the first causing hard-to-debug weirdness. Best to just always create variables with var.

If data.businesses is an array, I would assume that data.businesses[x].reviews is also an array. This code loops the businesses as well as the reviews for each business. It also gets rid of the content variable by appending straight to the #review div.
$.each(data.businesses, function(i,business){
$.each(business.reveiws, function(r,review){
$("#review").append(
'<p>' + review.text_excerpt + '</p>'
).append(
'<p>' + review.date + '</p>'
);
});
});
I think you can specify JSONP with your $.getJSON method by adding "callback=?" to the url parameters.
As of jQuery 1.2, you can load JSON
data located on another domain if you
specify a JSONP callback, which can be
done like so: "myurl?callback=?"
$.getJSON("http://api.yelp.com/business_review_search?term=hilton%20metropole&location=B26%203QJ&ywsid=APIKEY Removed&callback=?",
function(data){
...
});

The problem is that you are making a cross domain request, which is not allowed for security purposes. Either you will have to make a proxy script on your domain (like for example in php) and call yelp from that or fetch the data completely on the server side.

I assume you must be experiencing part of your data (which you are supposed to see) disappearing. I think you must edit your code to:
content = '<p>' + businesses.reviews.text_excerpt + '</p>';
content += '<p>' + businesses.reviews.date + '</p>';
Hope this helps...