This is an extension of my previous question here. I want someone to be able to fill in the search form, hit the search button and do the following:
Redirect to the url www.mywebsite.com/search?<params>
Make an ajax call to my backend controllers
Display the results on screen
I know how to do #3 obv, but I want to know what's the best practice for doing #1 and #2. Here's the relevant fiddle. Would I do something like this:
function getValues(id) {
return $("#" + id).val().join(",");
}
$("button").click(function() {
window.location = <baseurl> + "/search" +
"?loc=" + getValues("e1") +
"&type=" + getValues("e2") +
"&col=" + getValues("e3");
//Ajax call to api controller
})
What is the standard way that someone like google or wikipedia implement searching? How do they route and make their backend call at the same time?
Related
so i have a website made in ASP.NET that uses JS to generate some DOM elements after getting settings from the users account.
problem is that after i sign out and log in with a different user name i get the generated elements from the previous user and i don't know why. the code that generates the elements is as follows:
$.ajax({
url: '#Url.Content("~")' + 'Ticket/GetTvrtke',
async: false,
success: function (data) {
document.getElementById("header_tvrtka_holder").innerHTML = data;
}
});
and a little afterward its is used as such:
var tvrtke = document.getElementById("header_tvrtka_holder").innerHTML.split(", ");
$.each(tvrtke, function (index, value) {
$("#KlijentMultiSelect").append("<option value=\"" + value + "\" id=\"" + index + "\" >" + value + "</option>");
});
now when i log off and sign in as a different user the ajax code above doesn't trigger the getTvrtke URL that gets the settings wich generate the elements and i don't know why.
Ajax by default caches the response of the calls. YOu can set it to false so that there is a fresh request every single time by using the below at the top of your application.
$.ajaxSetup({cache: false});
I'm running a javascript application and a part of it runs true like this:
document.write("<param name='nick' value='" + nick + "'>\n");
In the <param ....> I cant call the graph api url (this give me a javascript error) so I need to call it before, then take it like a variable and put it in the <param>. Now I tried a lot of ways to do this without any luck, so I need some help for doing this:
call "the_url/me?fields="firstname" <- this works every time, php, java, html,...
and now what seems to give me a lot of problems, set the response in a variable or something like this:
nick = arg1[]
id = arg2[]
and take it in the document.write()
document.write("<param name='nick' value='" + nick + "'>\n");
document.write("<param name='id' value='" + id + "'>\n");
Sometimes it sets everything in the first variable; other times it returns nothing or the wrong thing in the wrong place or .... (you get the point i think).
Maybe I'm missing something, overlooking a simple way or not using the return right, I'm new to the opengraph thing and maybe I dont have it right .... I don't know anymore
so I need help or advice
Update:
i did use fb.api like this
function ShowMyName() {
FB.api("/me", function (response) {
document.jform.nick.value = response.name ;
});
}
then use the form so people have the option to change there nick before they start,
the wierd thing about it is when i call the functoin with a alert it gives me the name but the other part give's me a undifent return, thats why i asked for help, i don't get why the msgbox works on the same script and the other part stays undifent, its the same script
so this works:
<button name="my_full_name" onclick="testbut()" value="My Name" />
<script language="javascript" type="text/javascript">
function testbut() {
FB.api("/me",
function (response) {
alert('Name is ' + response.name);
});
}
</script>
and on the same script this won't work,
function ShowMyName() {
FB.api("/me", function (response) {
document.jform.nick.value = response.name ;
});
}
i'm sure the document is right because i can put anythin in the value part and that wil show up ....
I hate to give an answer that starts with a documentation link, but it looks like this is your first application. This exact question is answered by the documentation as an example here:
https://developers.facebook.com/docs/reference/javascript/
This call must be made asynchronously as you are waiting for remote data. You then need to execute a callback function upon receipt of data, otherwise your variables will be empty and your code will break. The OpenGraph JavaScript API works well to do this for you.
Basically, you need to make the call asynchronously and exec the document.write() calls as part of your callback function. So, after you've authenticated and all that, do something like this:
FB.api('/me', function(response) {
nick = response.name;
document.write("<param name='nick' value='" + nick + "'>\n");
});
This simple web search through google API is shaky. Sometimes it returns the 4 first findings (as it should), sometimes JSON thinks its a "success" but the responseData is null. Why am I getting these inconsistencies? Is it a asyncronic problem? How do I make it more stable? (When I search for images on google it is rock stable)
var baseUrl = "https://ajax.googleapis.com/ajax/services/search/web?v=1.0&start=0&q=";
var searchTerm = "obama"; //Lots of hits
$(document).ready(function() // don't do anything until the document is loaded.
{
$.getJSON(baseUrl + searchTerm + "&callback=?", function(json) // call getJSON providing the complete url with search term and a JSONP callback
{
$.each(json.responseData.results, function(i, gResults){
console.log("title: " + gResults.titleNoFormatting);
});
});
});
When it fails I find this in the json data structure:
json.responseDetails: "Suspected Terms of Service Abuse. Please see
http://code.google.com/apis/errors"
So Google think I'm attacking it with too many requests. Do I have to set an API key? right now I just include the
<meta name="google-site-verification" content="myAPIkey-Herevbng66r" />
But I'm running on my local computer so maybe it doesn't help…
Try this:
function(json) // call getJSON providing the complete url with search term and a JSONP callback
{
if (json.responseData === null)
console.log("json returned nothing");
else
$.each(json.responseData.results, function(i, gResults){
console.log("title: " + gResults.titleNoFormatting);
});
});
});
http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html
I want to implement something like the link above. Now this pops up the box's fetching data from some page, using PageID and what not. I want the content of that popup box to have simple HTML stuff in it and it will be bound later. The one above has got Ajax that I am not familiar with.
What do I need to change in the code? All I want is a simple pop up box that looks exactly like the one above, opens up the same way and all, BUT has got simple HTMl stuff in it. What and where do I make changes?
Although you haven't posted any of your attempts at doing this yourself, I will try to help you out.
If I understand correctly, you want to get rid of the AJAX and just add normal HTML right?
Well, I will at least tell you where to put your HTML to get you started.
You see on their website, at line 51 it says:
$('#personPopupContent').html(' ');
You can change the nbsp bit to any HTML you want.
For example:
$('#personPopupContent').html('<strong>My strong text</strong>');
You can also delete from lines 53 to 74 where it says:
$.ajax({
type: 'GET',
url: 'personajax.aspx',
data: 'page=' + pageID + '&guid=' + currentID,
success: function(data)
{
// Verify that we're pointed to a page that returned the expected results.
if (data.indexOf('personPopupResult') < 0)
{
$('#personPopupContent').html('<span >Page ' + pageID + ' did not return a valid result for person ' + currentID + '.Please have your administrator check the error log.</span>');
}
// Verify requested person is this person since we could have multiple ajax
// requests out if the server is taking a while.
if (data.indexOf(currentID) > 0)
{
var text = $(data).find('.personPopupResult').html();
$('#personPopupContent').html(text);
}
}
});
Since you won't be using it.
I hope that helped you.
So I need to make a a cross domain request where the response is not JSON formatted, so I cannot use .getJSON. .get obviously doesn't work because it is a cross domain request.
I came across this (Read this) when I was googling and it seems it should work for what I want to do (which is do a cross domain call that isn't json formatted using a jquery plug in). My code looks like the following. I know the url works fine because if I paste it into my browser, I can see the response, which according to last.fm documentation
The body of the server response
consists of a series of \n (ASCII 10)
terminated lines. A typical successful
server response will be something like
this:
OK
17E61E13454CDD8B68E8D7DEEEDF6170
http://post.audioscrobbler.com:80/np_1.2
http://post2.audioscrobbler.com:80/protocol_1.2
So I know my URL is fine. Now I am wondering how I get at this information, and why my version of their example does not work.
function performHandshake(sk, token, ts){
var token = md5(apiSecret + ts);
var urlToUse = "http://post.audioscrobbler.com/?hs=true&p=1.2.1&c=tst&v=1.0&u=chamals&t=" + ts + "&a=" + token + "&api_key=" + apiKey + "&sk=" + sk + "&format=xml&callback=cbfunc";
$('#container').load(urlToUse);
$.ajax({
url: urlToUse,
type: 'GET',
success: function(res){
var headline = $(res.responseText).find('a.tst').text();
window.console.log(headline);
}
});
}
Well the page you linked you talks about using YQL and jQuery. It's a very interesting solution. However, your example seems to skip over the YQL part (which is crucial).
var urlToUse = "http://post.audioscrobbler.com/?hs=true&p=1.2.1&c=tst&v=1.0&u=chamals&t=" + ts + "&a=" + token + "&api_key=" + apiKey + "&sk=" + sk + "&format=xml&callback=cbfunc";
var yqlUrl2Use = "http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(urlToUse)+
"%22&format=xml'&callback=?"
// this function gets the data from the successful
// JSON-P call
Then you'll have to call the call the new URL as a JSONP req...
$.getJSON(yqlUrl2Use, function(json){
// figure out the format of the answer here...
});
Yeah, cross browser scripting. You can't AJAX anything like that since it violates the same domain policy.
You are going to have to setup a proxy on the same server the JavaScript is running from.
Edit Lookslike you need the $('#container').load(url) bit for that to work.
Go back an reread the linked article carefully.
You need to use $.getJSON rather than $.ajax() to return cross site information.
The var res actually has my information that I needed. I guess their headline = part was specifically for their implementation.
Thanks to those who helped!