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.
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.
In general I'm working on a little webapp that just shows me search entries from wikipedia on the page after I enter a search term into the textfield.
I’m working on this problem a long time now.
I have setup an ajax get request to the wikipedia api.
It’s working fine as far as the title goes. But I looked at the json I get in return via console.log and see that there is no summary or first paragraph in this response.
So I googled and found a very nice article which points me to that link:
(can't post it due to under 10 reputation, sad story)
Just google for "wikipedia extracts api"
It says that the query also needs this prop=“extracts” and the exintro: true
But if I add this to my query I do not get the "exintro" in return.
Here is how I set up my ajax call:
function callback(){ // gets called when sliding up the div is completed
$.ajax({
url: 'http://en.wikipedia.org/w/api.php',
//TODO: Fix this line of code (extracts)
data: { action: 'query', list: 'search', prop: 'extracts', exintro: true, srsearch: $("input[name=search]").val(), format: 'json' },
dataType: 'jsonp',
success: processResult
});
$(".container").remove();
}
So if it’s successfull it runs the processResultmethod:
function processResult(apiResult){
console.log(apiResult);
for (var i = 0; i < apiResult.query.search.length; i++){
$('#display-result').append('<div class="' + i + '">' + '<p>'+apiResult.query.search[i].title+'</p>' + '<p>'+ apiResult.query.search[i].snippet +'</p>' + '</div>');
}
}
But the json it returns looks something like that:
Picture of the returned json
Nothing I’m interested in. I need the summary or exintro how wiki api calls this.
Here is the link to the github: https://github.com/dhuber666/wikipediaJS
Any ideas? Do I set it up wrong in the ajax call object “data” ? Pleae help!
The snippetin the json is useless since it cuts off the sentence after a few words
Your "data" object is fine. Seems like "snippet" is just what Wikimedia API returns for this request. You can then send request to get extracts of returned pages (using "title" or "pageid" you get for each article). For example: https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=true&explaintext=true&titles=Title|Hello for titles "Title" and "Hello".
Maybe this other API call will suit your needs:
https://en.wikipedia.org/w/api.php?action=opensearch&search=hello&format=json It returns one full sentence, doesn't cut anything.
At the moment I have multiple forms, and am writing the JavaScript out very simply. I want to create a simple comment system using the following AJAX, but am running into troubles that I cannot sort out..
The AJAX call looks like this:
var dataString = 'commentauthor=' + commentauthor + '&parentid=' + parentid +'&linkid='+
linkid + '&comment=' + comment + '&location=' + location;
alert("check : " + dataString)
$.ajax({
type: "POST",
url: "comments/addcomment.php",
datatype: "html",
data: dataString,
success: function(){
alert('comment added!');
},
error: function(){
alert('failed adding comment!' +dataString);
}
The dataString at all times pulls out the correct information from the forms. Also, the PHP the AJAX is sending it to already works when it's set as the forms action, and all the $_POST[''] names match up.
I've been looking around but can't figure it out. Am I encoding the data wrong or something? The PHP side of things doesn't even get to the AJAX response, so it's got to be just failing to send right?
Also, is there a better way to check JavaScript errors? I've been using the google chrome console but half the time when something goes wrong it doesn't through up an error anyway (like this time)
Is addcomment.php printing anything out? I vaguely remember having a similar problem which was because the PHP file wasn't returning anything. If it isn't, try this before the end of the file:
echo 1;
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!
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");
});