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..
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 using with satisfaction the library jAlert v4 available here
But I noticed that is not possible to use this library such as a simple "prompt" (that is a simple alert with a textbox) as shown in the following code:
var qnt = prompt("Insert")
Also this library is excellent because it automatically recognize all "alert()" functions in my code and applies his styles without any further implementation (it needs only to add its libraries inside <head> tag).
I discovered that there is also the "jQuery Alert Dialogs" library for my purpose, but it isn't customizable as jAlert v4.
So I would like to know if is possible to use the same library (jAlert v4) for my purpose, because I like the jalert customization (for ex. themes and animations) and it is very easy to use.
And I want to keep the same style like my jAlert as picture below: jAlert example but with a input TextBox.
That library is overriding the browser's built-in alert() function. You can do the same with prompt(), and have it open a jAlert with a text box on it.
window.prompt = function(title, value){
$.jAlert({
# Add an input field
'content': '<form><label>'+title+'</label><input value="'+(value||'')+'"></form>'
# Add the buttons or whatever else you need to the jAlert
});
};
The browser dialog stuff, such as alert, confirm and prompt are all blocking. JavaScript execute stops as those run.
There is simply no way to reproduce that behavior in external code, which means that one has to resort to using callbacks.
For some things, such as alert it may not be an issue .. if the code continues while the alert is still displayed, but it will fall apart if you try to show several alerts in a row.
For prompt and confirm, however, you will have to restructure your code.
I did a quick read of the jAlert docs and I saw both alert and confirm -- they didn't seem to have a prompt replacement, so I couldn't show their demo code
It might be worth checking out this library instead:
http://alertifyjs.com/
Yes, you can. If you just put the input box into the content, that will not appears, it's true. This is why you have the onOpen callback:
$.alertOnClick('.getTopClose', {
'title':'Textbox example',
'content':'', //Add nothing to the content
'onOpen': function(alert){
//This is the important part!
//Append a text input to the class .ja_body
$('.ja_body').append('<input type="text" name="something" value="" />');
}
});
I find a solution for my issue. And It's simply because always using the same jalert library. In my cause I use the returned value of my alert to perform an UPDATE via ajax. This is my code:
$.jAlert({
'title': 'Inserimento numero colli',
'content': '<form style="text-align:center;"><label>Quantita</label><br><input id="id_qnt" type="text" style="text-align:center"></form>',
'btns': [
{
'text': 'Save',
'closeAlert': 'false',
'onClick': function (e, btn) {
var item = btn.parents('.jAlert'),
form = item.find('form'),
error = false;
var field = form.find('input:text').val();
if (field == 'undefined' || field == '') {
error = "Empty quantity!";
}
if (!($.isNumeric(field))) {
error = "IsNan!"
}
if (field < 0) {
error = "IT'S < 0"
}
if (error) {
errorAlert(error);
return false;
}
// 'field' is the returned value... such as when using 'prompt'
// In my case I use it for AJAX
var obj = {};
obj.value = field;
$.ajax({
type: "POST",
url: "Master.aspx/UpdateItem",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
successAlert('SUCCESSFULLY SENT!', r.d);
}
});
// DYNAMICALLY CHANGE VALUE INSIDE PAGE change clicked_id by passing your id
document.getElementById(clicked_id).textContent = obj.value;
}
},
{
'text': 'Cancel'
}
]
});
It looks like this screenshot
I hope will be helpful to everyone!
I have severall select2 in my page.
I have a specific ajax engine and can't change it for many reasons.
i would like to fill each select2 dropdown when the end-user type in the field, and use home made javascript to fill the "options" in the select2.
I've tried many different things found on the net, and can't find a working syntax for that.
For instance :
jQuery("customer").select2({
query: function (options) {
alert('ok');
// my ajax call would be here
xajax_getCustomers(stringFilled);
}
});
i've tried with "ajax:" and several other things, i can't find how to trigger a javascript function when something filled.
Important : i should be able to get the string filled, in order to pass it to my ajax call
Thanks for your help
You have got this event:
$(selector).on("select2-highlight", function(e) {
console.log("highlighted val=" + e.val + " choice=" + e.choice.text);
})
It's valid for a search event, so when select2-highlight event is fired means that user is searching for a string that you can manage with the e.val and e.choice.text values.
Unfortunatelly there's no strict search event, but you can bind the hided input text of the plugin with a on('keyup');
Something like this:
$('input.select2-search__field').on('keyup', function() {
alert($(this).val()); // it alerts with the string that the user is searching
});
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");
});
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.