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");
});
Related
I am working inside of an Oracle package. I am trying to use an AJAX call to call a procedure from a button click. The ajax call is inside of a function. I am not getting any syntax errors from Oracle or when I'm using the browsers debug mode so I'm not sure what the problem is. Function is below.
htp.p('
function ApplyTest(_ht) {
var _inst = "";
var _pidm = '||v_web_pidm||';
var _inst = document.getElementById("Test").value;
alert("Heat Ticket value is: " + _ht);
alert("the instance is: " + _inst);
var resp = confirm("Are you sure you want patch applied to TEST8?");
if (resp == true) {
alert ("user pidm is: " + _pidm);
return $.ajax ({
type: "POST",
cache: false,
dataType: "json",
url: "gyapatch.p_update",
data: {"v_instance" : _inst, "v_ht" : _ht},
success : function(data) { alert("success"); }
});
alert("Got here");
alert("value: " + _inst);
window.location.reload;
alert("got to the end");
} else {
return;
}
}
');
code for the button is:
<button name="TestApply" id = "Test" onclick="ApplyTest('||val_patch.heat_ticket||')" type="button" value="T">Apply to TEST8</button>'
When I try to return the ajax call nothing is happening and I can't even reach the "Got Here" alert. When I remove the "return" keyword, I can reach the alerts but either way, nothing is happening. GYAPATCH.p_update is the package/procedure I wish to have executed when this is ran
I'm not sure what the problem is. Any help on this would be greatly appreciated. Thanks in advance.
So after a couple of hours, I had figured out the problem. This was more of a learning lesson as the issue was pretty simple. I needed to remember that I was working inside of an Oracle database AND also using WebTailor. The code posted above is correct. It turns out that the procedure I was trying to call (p_update) was not registered.
WebTailor allows you to build web applications utilizing Banner. In WebTailor, any pages that are used (usually stemming from a package.procedure), need to be registered or else they are not recognized.
I found this while debugging. Under the Network tab in my debugger, I noticed that when I click my button, I am getting a 404 error when my package.procedure is called. So I then realized it couldn't find my package and then proceeded to check if it was registered. This was a simple, silly error on my part. I am grateful for the feedback, but this will probably serve as a learning lesson or reminder to anyone trying to use ajax while working with Banner data.
I'm pretty much a complete beginner at javascript and jQuery, so please bear with me.
I have a Spark-API running, and a web front-end that uses it through ajax calls.
I'm trying to call this function
function getSpotifyURL(ms, name) {
$.ajax({
url: "http://localhost:8081/playlist?ms=" + ms + "&name=" + name,
dataType: "json",
})
.done(function( data ) {
console.log(data);
})
}
The method is placed outside of:
$(document).ready(function() {
The reason it's outside is that I get an error upon calling it saying it's "undefined" if it's within $(document).ready.
The Spark-method is supposed to return a String (and it does when you try it directly through the browser).
The way I'm calling the getSpotifyURL-method is through a html button's "onclick". Like this:
<a href='#' onclick='getSpotifyURL(" + data[i].duration + ",\"" + data[i].destination + "\")'>Create Spotify playlist for this trip</a>"
The problem:
The .done-block does nothing in my code. Nothing is printed to console.
What I've tried:
Using "success" within the ajax part instead of .done
Placing the function with $(document).ready(function() { ... }
I understand that you might need more information to be able to help me, but I'm not sure what else information to provide right now. So if there's something you need to know, just ask.
Ideas?
SOLVED!
I'm a dumb person and forgot to remove dataType: "json", as the Spark-server in this instance returned a String, not a json object. Anyway, thanks for your input everybody. Much appreciated.
I think the problem is when you bind your function onclick. There is a syntax error, as you can see on the browser console
function getSpotifyURL(ms, name) {
console.log("http://localhost:8081/playlist?ms=" + ms + "&name=" + name);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' onclick='getSpotifyURL(" + data[i].duration + ",\"" + data[i].destination + "\")'>Create Spotify playlist for this trip</a>"
I guess data is a variable, so you should call it without brackets
<a href='#' onclick='getSpotifyURL(data[i].duration, data[i].destination)'>Create Spotify playlist for this trip</a>
The reason you are getting undefined method when you are placing the function inside the $(document).ready(function() { ... }); call is because you are using the onclick attribute to call the function. $(document).ready(...) is not in global context as to where you onclick attribute is, and would therefore not recognize it from within the document.ready resulting in your undefined method error.
When sending your Ajax request, you also need to specify a type of request (GET or POST) that you are making. I would also suggest restructuring your ajax call to look more like #Moe's answer.
If you want to get it inside the DOM, consider doing the following:
HTML
<!-- I gave the link a class name and removed the onclick= attribute -->
Create Spotify playlist for this trip
JavaScript
$(document).ready(function() {
// I gave the <a> link a click handler
$(".create-spotify-playist").on("click", function(e) {
e.preventDefault(); // prevents link from requesting
var ms = ?? //I'm not sure where you're getting your parameters from,
var name = ?? //so you will probably have to figure out how to get those in here yourself
$.ajax({
type: "GET",
url: "http://localhost:8081/playlist",
data: { ms: ms, name: name },
success: function(data) {
console.log("Success: " + data);
},
error: function(data) {
console.log("Error: " + data);
}
});
});
});
I gave the link a click handler and placed it inside the $(document).ready, and by removing the onclick attribute from earlier, it can now be triggered from inside $(document).ready.
I have a JavaScript variable in my jQuery code that contains an ID that I need to use in my Html.ActionLink but it's not working:
#(Html.ActionLink("Genomför", "AnswerForm", "AnswerNKI", new {id = goalcard.Id},null))
I get: 'cannot resolve symbol "goalcard"', and the reason is that goalcard is a JavaScript variable.
This is what it looks like:
$.post('#Url.Action("Search", "SearchNKI")', data, function (result) {
$("#GoalcardSearchResult tbody").empty();
result.forEach(function(goalcard) {
$("#GoalcardSearchResult tbody").append(
$('<tr/>', {
// steg Create a row for each result
html: "<td>" + goalcard.Name +
"</td><td>" + goalcard.Customer +
"</td><td>" + goalcard.PlannedDate +
"</td><td>" + goalcard.CompletedDate +
"</td><td>" + '#(Html.ActionLink("Genomför", "AnswerForm", "AnswerNKI", new {id = goalcard.Id},null))' + "</td>"
}));
});
});
I have been testing for while now and I almost found a solution and it looks like this:
#(Html.ActionLink("Genomför", "AnswerForm", "AnswerNKI",null, new {id = "mylink"}))
then I made a new function:
$('#mylink').click(function (goalcard) {
var id = goalcard.Id;
this.href = this.href + '/' + id;
});
This should work, but what happens is that I have to use this click function inside the forEach loop to be able to reach to goalcard variable. and If I put it inside the forEach, this Click function will get executed many times depending on how many goalcard there are.
So the result would be /AnswerNKI/AnswerForm/1/2 if there are two goalcards.
or maybe /AnswerNKI/AnswerForm/1/2/3/4/5 if there are five goalcards.
But it should be /AnswerNKI/AnswerForm/1
it basically adds up.
Another problem is that all other rows have /AnswerNKI/AnswerForm/ so only the first row basically gets an id.
I have no idea how to find a solution to fix that.
Any kind of help is very appreciated.
Thanks in advance
This isn't a solution to the specific problem you're having. But it looks like you're using jquery to update part of your page.
If so, have you considered using a callback which returns html generated by a PartialView, and just doing a replace within the javascript callback? That's a pattern I use a lot. It allows you to use the MVC engine, components and design tools.
Here's an example of something I do:
$("form.unscoped_filter").live("submit", function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
error: function (a, b) {
debugger;
},
success: function (result) {
$("div#targetID").html(result);
bindExtenders();
}
});
return false;
});
This particular example intercepts a postback from a particular class of forms and passes it on to the website where it's processed by my MVC app. The target method and controller are set, per usual MVC design approaches, in a BeginForm block. The target method processes data and returns a PartialView which translates that data into html, which in turn is sent to the success callback in the jquery block. There it's used to replace the html within the target div. While there are more parts in play (e.g., the javascript, the MVC method, the PartialView), separating things this way lets each part play to its unique strengths: jquery is wonderful at manipulating the DOM, MVC methods are great at manipulating/processing requests for html, and PartialViews are a great tool for laying out and generating html.
This is a pretty flexible and powerful approach once you get the hang of it. In particular, you can pass parameters into the jquery block from the ActionLink by using html5 techniques. For example, you can add a "data-someParamName=..." to the html attributes of the ActionLink call, and then extract the parameter value within the javascript block doing something like:
var pagerCode = $(this).attr("data-someParamName");
That, in fact, is how I control which particular div gets updated in the success callback function.
Again, this doesn't answer your specific question so much as suggest a different way of tackling what I think you're trying to do. Good luck!
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.
Referring to this post and this one. I'm trying to implement tag search for my blog/website something similar to SO tag system using jquery autocomplete plugin, I'm using jquery 1.4 latest version so I'm not sure whether it works with it or not, I've used this plugin before once. So without further jibr-jabr here is my html for autocomplete :
<input id="post-tags" class="ac_input" type="text" autocomplete="off" value="" name="post_tags"/>
Here is my javascript:
<script type="text/javascript">
$(document).ready(function(){
function findValueCallback(event, data, formatted) {
$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
}
function formatItem(row) {
return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}
function formatResult(row) {
return row[0].replace(/(<.+?>)/gi, '');
}
$("#post_tags").autocomplete("http://localhost/tags/filter/", {
width: 260,
selectFirst: false
});
$("#clear").click(function() {
$(":input").unautocomplete();
});
});
</script>
I'm sure my php part is ok, it works like this when I manualy type the url http://localhost/tags/filter/p
I returns the following :
php (1)
asp (1)
Meaning all tags containing p, for now I have only these two. My question is, what am I doing wrong, I'm really stuck on this one, I've changed things around so many times now I can't think of anything new I'd like to do. Thank you
The trick is to use post instead of get, when using get / gets erased but when using post complete thing is passed so the autocomplete needs some adjustments(extra one line) here it is :
$.ajax({
type: "post", // This is the new line
// try to leverage ajaxQueue plugin to abort previous requests
mode: "abort",
// limit abortion to this input
Everything worked like a charm now..