I have a project that require me to do a auto complete search using CI and YUI.
User will enter search keywords in textfield 1 and the result will shown in textfield 2..
YUI is client-side JavaScript. What you should do is read some documentation on autocomplete first, and on CodeIgniter second and then you could start building your solution.
Basically, you have to make a few things.
For one, you should create a client-side page with what is basically an <input> or <textarea> tag and a div for your results and hook a YUI autocomplete handler to that field. To be able to use YUI, you first need to include the YUI script:
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
And you also need to load the autocomplete module and configure it:
YUI().use('autocomplete', function (Y) {
// enter code here
}
Second, you need to build a server-side script with CI that will listen for queries, do database or whatever searches and return JSON or some other format of results.
You'll then give the URL of this CI query web script to YUI AutoComplete configuration and YUI will do the AJAX and stuff for you.
Those are very general steps, but your question is also pretty generic. If you ask more specific questions, you'll get better answers (or better, just search and read the documentation).
Related
I'm not sure if it's possible or not but can you run a script in Quickbase? Such as in a formula field? If so, could someone show me a very simple example? I've figured out how to create custom Dashboards using jQuery so I assume we could do something similar on form/table.
There are two ways you could try to accomplish this. You can use Javascript in URL and Formula URL fields. This will make the link button pop up a window that says "Hello World".
"javascript:alert(\"Hello World\");void(0);"
You can also load a page that you've created using Dan Diebolt's image onload technique. I can't find his original post, but you use the onload event of an image tag to load a .js file. In this example it's a page in the same application named module.js that is being loaded using a Formula Text field with HTML enabled.
"<img qbu=\"module\" src=\"/i/clear2x2.gif\" onload=\"javascript:if(typeof QBU=='undefined'){QBU={};$.getScript('" & URLRoot() & "db/" & Dbid() & ?a=dbpage&pagename=module.js&rand='+Math.random())}\">"
The corresponding module.js file might look something like this:
(function(){
alert("Hello World");
})();
You can take this as far as you'd like from writing functions in module.js that you call from Formula URL Fields to injecting your own HTML into the DOM (though Quickbase recommends you do not do that). My favorite trick is to add <span id="somethingUnique"></span> either in the form builder or a text field with HTML enabled and use that to inject my custom buttons or data.
I am sure this is on here already...
I want to be able to disable autocomplete for some CMS generated form fields with some frontend javascript code, preferably Prototype but neat javascript will do if it has no cross-browser problems.
I have ids for my boxes and I am not using some clever 'prototype autocomplete' (that seems to stuff the Google results on this). Regular browser autocomplete is what I want to turn off and not for the entire form.
Knew I would find it as soon as I asked:
$$('.MacGuffin')[1].setAttribute('autocomplete', 'off');
$$('.MacGuffin')[7].setAttribute('autocomplete', 'off');
That is specifying elements by class rather than id.
Old way
When I used to load page asynchronously in projects that required the content to be indexed by search engines I used a really simple technique, that is
Page
<script type="text/javascript">
$('#example').click(function(){
$.ajax({
url: 'ajax/page.html',
success: function(data){
$('#content').html(data);
}
})
});
</script>
edit: I used to implement the haschange event to support bookmarking for javascript users.
New way
Recently Google came up with the idea of ajax crawling, read about it here:
http://code.google.com/web/ajaxcrawling/
http://www.asual.com/jquery/address/samples/crawling/
Basically they suggest to change "website.com/#page" to "website.com/#!page" and add a page that contains the fragment, like "website.com/?_escaped_fragment_=page"
What's the benefit of using the new way?
To me it seems that the new way adds a lot more work and complexity to something that before I did in a simple way: I designed the website to work without ajax and then I added ajax and hashchange event (to support back button and bookmarking) at a final stage.
From an SEO perspective, what are the benefits of using the new way?
The idea is to make the AJAX applications crawlable. According to the HTTP specifications, URLs refer to the same document regardless of the fragment identifier (the part after the hash mark). Therefore search engines ignore the fragment identifier: if you have a link to www.example.com/page#content, the crawler will simply request www.example.com/page.
With the new schemes, when you use the #! notation the crawler knows that the link refers to additional content. The crawler transforms the URL into another (ugly) URL and requests it from your web server. The web server is supposed to respond with static HTML representing the AJAX content.
EDIT Regarding the original question: if you already had regular links to static pages, then this scheme doesn't help you.
The advantage is not really applicable for you, because you are using progressive enhancement. The new Google feature is for applications written entirely in Javascript, which therefore can't be read by the crawler. I don't think you need to do anything here.
The idea behind it is that Javascript users can bookmark pages too, I think. If you take a look at your 'old' method, it's just replacing content on the page; there is no way to copy the URL to show the page in current state to other people.
So, if you've implemented the new #! method, you have to make sure that these URLs point to the correct pages, through Javascript.
i think it's just easier for google to be sure that you're not working with duplicate content. i'm including the hash like foo/#/bar.html in the urls and pass it to the permalink structure but i'm not quite sure if google likes or not.
interesting question though. +1
I'm trying to find tutorials or code to allow users to customise their page, just like twitter ,wordpress and tumblr do.
Could someone tell me what technology their using?
i'm a .net developer, but maybe they're using jquery?
Any help would be great.
Thanks
You can use javascript to change style sheets and the DOM
Question is a bit broad. To change the page you simply need to manipulate the DOM or change the CSS associated with the page's elements. This can be done any number of ways. E.g. you could write out a new CSS class dynamically, you could add new elements to the DOM itself or you could modify the existing attributes of the page. e.g. to set the background of the page you can do something like:
(assuming JQuery)
$("body").css('background-image','url(path/to/image)');
Hope that helps,
-fs
the problem I have is that I have two sets of values in a drop down list. If type 'A' is selected I want a text box to be populated with a value from the database and be read only. If Type 'B' is selected the box is to be empty and editable.
My original code is written in jsp/struts and I have sort of achieved this by using
onchange="javascript:submit()" to reload the page, but this has the obvious drawback of saving any changes you have made which means you can't really cancel.
I also have other problems with the serverside validation due to this method.
Is there a way of making a jsp page reload on change, that way I could write javascript to change the way the page looks according to the values held in the session. That way the save/submit function will only be called when the page has properly been filled out and the server side validation will work as designed.
I know that this is something that AJAX is good at doing but I am trying to avoid it if possible.
AJAX is your only other option my friend, unless on the original page load you load all the other possible values of the Text Box so you don't need to go back to the database. Well, you could try putting the text box in an IFRAME, but you will probably run into more problems with that approach than just going with AJAX.
Without AJAX what you are asking is going to be difficult. Another option (which is ugly) is to write out all possible values for the second list box into a data structure like an array or dictionary.
Then write some javascript to get the values from the data structure when the user selects from the first list box. The amount of javascript you will have to write to get this done and to do it correctly in a cross browser way will be much more difficult than simply using AJAX.
Not sure why you'd try to avoid AJAX in today's world, the JS libraries out there today make it so simple it's crazy not to try it out.
I just had to replace a page that was written as Vincent pointed out. I assume at the time it made sense for the app, given the relative size of the data 4 years ago. Now that the app has scaled though, the page was taking upwards of 30 seconds to parse the data structures repeatedly (poorly written JS? maybe).
I replaced all the logic with a very simple AJAX call to a servlet that simply returns a JSON response of values for the 2nd drop down based on what was passed to it and the response is basically instant.
Good luck to ya.
One way is to change the form's action so that you submit the form to a different url than the "save" url. This lets you reload certain aspects of the form and return to the form itself, instead of committing the data.
<script>
function reload() {
document.forms[0].action="reloadFormData.jsp";
document.forms[0].submit();
}
</script>
<form action="saveData.jsp" method="post">
<select id="A" name="B" onchange="reload()"><!-- blah --></select>
<select id="B" name="B"><!-- blah B --></select>
<input type="submit">
</form>
If I understand you correctly, that you want either a dropdown (<select>) or a textfield (<input type="text">) depending on a choice (typically a checkbox or radiobuttons) somewhere above in a form?
I that case you may need to handle the two types of input differently on the server anyway, so why not have both the selectbox and textfield in the area of the form with different names and id and one of them hidden (display = none). Then toggle visibility when the choice changes. On the server you pick eiter the selectbox or textarea input (wich will both be present unless you disable (disabled="disabled") them too, wich I think is uneccesary) depending on the choice input.
Of course if you expect that the user usually just need the text-input, and a few times only, needing a massive list; it would be better to use ajax to retrieve the list. But if it's the other way around (you need the text-field only occationally), as I assumed above, it will be faster to have both present in the initial form.
If the drop down only contain easily generateable data, like years from now to houndreds of years back it could even be much faster (requiring less bandwidth on the server) to generate the data client side using a for loop in Javascript.
I know a taglib that can fit to your problem:
AjaxTags.
I use this taglib in my J2EE projects and it is very simple to integrate it into web applications.
This taglib give you several tags designed to execute AJAX request in your jsp files.
Here is the description of each tags: http://ajaxtags.sourceforge.net/usage.html
The tag which will help you is the ajax:select tag. It allows you to populate a select tag which depends on an other field without reloading the entire jsp page.
If you more informations about it, ask me and i'll try to answer quicky.
Along the lines of what Strindhaug said, but if you need dynamic data:
Could you have the backend write JS into the page, and then the JS would change the form as required? The backend could propagate some variables for descriptions and such, and then the JS could change/update the form accordingly. If you aren't familiar with this, libs like jQuery make things like this easier and more cross-browser than rolling-your-own (at least in my experience).
Aside:
If you're not using AJAX because it was hard to code (as I didn't for a while because my first experience was from scratch and wasn't pretty), as others have said, libs like MooTools and such make it really easy now. Also, there is not shame in using AJAX properly. It has a bad rap because people do stupid things with it, but if you can't simply write premade values into the form or you have to do live look ups, this is one of AJAX's proper uses.