Implement autosuggest/select UI+ separate div with currently selected items - javascript

I want to build a UI where a user selects several products, and those products are shown to the user, and then various computations are made on those selected products. So:
div1: area where user selects products
div2: current product selections are shown
div3: results (showing results of computations made on user selections)
I am primarily a back-end PHP programmer, and by no means a JS of front-end programmer programmer, so nuances of jQuery, JavaScript or working knowledge of them, and such are not my area of expertise. I can probably implement this without JS, and have it work, without all the dynamic content. It maybe not be as immediate but it will work. Although, this is a good opportunity to try dynamic content, and when it comes to the world of JS, I figure gotta start somewhere.
I think ideally this can be implemented by using an autosuggest->select widget in div1, where I can preload existing products from DB. Then, something in div2 to show current user selections. Results in div3 can then be either computed on the fly with JS, but since majority of the computations are done in PHP I figure I will do those on the back end, and display results wither via AJAX or via page reload (form submit).
So, while I figure I can make it all completely dynamic (aka JS), rewriting existing PHP code into JS is probably not exactly beneficial.
Question: How do I do UI to support features for div1 and div2 keeping in mind that I am not an expert on JS or jQuery. And how do I pipe those selections via POST to my PHP script? After that my intentions is to reload the page with results in div3, keeping div1/div2 same as user left them before page reload. I

Use jQuery & Ajax Calls to achieve this. You need to follow something like this -
Add jQuery to your application
Assign some event listeners to your product selection in div 1
Using the even listeners, upon selection of some product in div 1, show it in selected items in div 2.
At this point you can make an ajax call to your server where your PHP code does the computation & send the list of products you selected via an Ajax call.
The server can then process stuff & respond back to you with the data you need to show.
You capture this data in your ajax request response & then populate your div 3 with this.
Showing how to do the whole thing would be a lot of code, let me show you some references that will help you -
How to start using jquery - http://learn.jquery.com/about-jquery/how-jquery-works/
Event handling in jQuery - http://learn.jquery.com/events/
Ajax Calls in jQuery - http://api.jquery.com/jquery.ajax/
Hope this helps.

Since JS is event driven. We just need to attach event handler to the products.
Let this be the 3 divs
<div id="a">
<div onclick="show('p1');">p1</div>
<div onclick="show('p2');">p2</div>
</div>
<div id="b"></div>
<div id="c"></div>
We've attached the onclick listeners to each product, which will trigger the show function
function show(ele) {
$('#b').html(ele + " was selected");
$.ajax("http://fiddle.jshell.net/favicon.png").done(function( data ) {
$('#c').html("data: " + data);
});
}
It will first update div b, then does an ajax call and update div c. You just need to replace the ajax URL to your php for processing(, and add some POST or GET request params)
Here's the fiddle: http://jsfiddle.net/5h8RV/4/

Related

Dynamically show/hide subset of records?

I am writing a web app using PHP, MySQL, jQuery, and some miscellaneous add-ons like jEditable and DataTables. On most pages, the user will submit a form which will query the DB and bring back records matching my query rules. This works for 95% of my users 95% of the time. It's the other 5%/%% I am trying to help.
I am excluding records that are no longer being processed (completed/cancelled/accepted/rejected/etc.), leaving only "live" records. However, sometimes the leadership team needs to see the records I exclude. I could write a whole other page or report for each case, but that seems a huge waste of time.
Is there a way to add a "show all records" checkbox or button to my page? When clicked, the button would get and display the rest of the data, so users don't have to refresh/go to another page/etc.
you should add a toggle switch - it could be just a check box, or you could use something fancy like this: http://simontabor.com/labs/toggles/
Bind an event to it that preforms a table.ajax.reload() in datatables to pull in the new records. Also, for the datatables ajax request, provide a callback that returns the toggled state of the toggle control as a post variable, then handle the filtering in your sql on the back end.
Note, this solution means you will have to configure datatables to source data via ajax, which, from what you described sounds like you should be doing anyway.

Sort and retrieve data with drop down menus in php

I have two drop down menus on my webpage. One is a course list and the other is a student list. What I want to do is, when a selection is made in the course menu it will update the student menu to only list students in that course.
All the course and student data is saved in a MySQL database. The SQL statements to retrieve the results I want are not a problem. I have those figured out. The problem is that I don't know how to get one drop down menu to update the other without the use of a submit button. Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
I've looked through several similar questions, but a lot of them end up resetting the first menu when the second is updated. I need to print both the selected course and student on the page at the end.
Is this something that can be done with PHP, or would Javascript be more preferable? If someone could point em in the right direction, that would be much appreciated.
Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
Yes. The buzz-word for this is AJAX.
You will end up using both JavaScript and PHP to do this. The actual implementation is quite involved, so I will list the basic steps for you.
(JavaScript) Bind the change event for the course drop down menu.
(JavaScript) When that event is fired, capture the selected course and fire an XMLHttpRequest off to your server along with the selected course.
(PHP) Capture the selected course, and run the SQL statement to fetch your students.
(PHP) Convert the student list to a text format (JSON, XML, delimited-text, etc.) to send back to the browser (using echo, print, etc).
(JavaScript) Populate the student drop down menu.
The general approach to this is to use jQuery to add a hook to your drop-down selector and trigger an AJAX load on another section of the page, populating that with data retrieved either as an HTML fragment (easy) or JSON data that's turned into one (harder).
A really quick and dirty version is to grab a portion of a page and re-populate the current document with it using $.load():
$('#select1').on('change', function() {
$('#select2').load('select.php #select2', 'select1=' + $(this).val())
})
That's the rough idea: When your first selection box changes, load the select.php page, or whatever you're using, and add on the parameter select=N where N is the selected value. It then rips out the #select2 section and replaces it.

Fill and add select options and sync with database

I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.
What I want to do is:
form is open in browser with a drop-down list of records in a database
if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
this will open a new window with an additional form for this entry
on clicking submit the processing script will run to insert this information into the database
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.
Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)
ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?
No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...
form is open in browser with a drop-down list of records in a database
This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.
if the desired option is not in the list, the user can click on a link
next to it to add a new entry to the database
this will open a new window with an additional form for this entry
The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.
on clicking submit the processing script will run to insert this information into the database
On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.
And this is it. Now it's up to you. Hope it helps.

Searching, sorting, paginating and filtering DIVs using Jquery/AJAX/Javascript

I'm working on the front-end of my project and doing the back-end later. I've ran into a snag though. I have a list of DIVs (want them to be collapsible as well) that are suppose to show various apartments around a given zip code. Problem is, I don't know where to go to look for these things:
Firstly, I wish to sort these divs by name or ranking.
Secondly, I
want to be able to search these results and toss out the ones that
they do not want, i.e. I type in A, all apartments that begin with
letters B-Z disappear in the list. I think in p after A, all Aa-Az
letters disappear from the list, etc.
Thirdly, should I use jQuery to paginate my results or should I use PHP instead?
Lastly, I have a filter box. I want to do the same as above except with different selectable options (on the fly using AJAX). User selects, 1 to 3 bedroom apartments, no pets,
and hits filter... boom, list of apartments with values.
Is there anything that I can use using jQuery/Javascript to speed up this process that also degrades when Javascript's disabled? I know this sounds like a lot, but any help would be greatly appreciated.
Well for this to work without javascript, and still behave like you want, i guess you have to build this in pure old html (with form post's / links) and then add jquery ajax functionality to make it prettier and faster when javascript is enabled.
If i were doing this, i would build it with form post's that return the whole page (when javascript is disabled) and add jquery events on page load to prevent default form post and instead use ajax post to only partial load your pages and aply transition effects.
One last thing, if you have a lot of data to show on page use pagination and sorting at database level, return only the visible content of your page. This will work with and without javascript, and is scalable (with lots of results it becomes unmanageable to it in javascript)

How to query database from javascript (or JQuery) click?

I have a summary view of a database table. When clicking on a row in the table, I'd like to have a popup showing the full data plus some controls for manipulating that item. I've attached a click handler to the item, which then grabs the primary key from one of the table cells in the row. How can I now pass this primary key to ASP.NET and run server code to query my database and update my UI?
If you're using jQuery, you probably want to use the jQuery.ajax() or jQuery.getJSON() functions to make ajax calls to your backend server which can then return data from your database.
You can then use that returned data to construct the popup and insert the popup into your page to show it to the user.
Within the click handler, you need to make a call to an exposed page /somepage.aspx?id={yourid} which should return the HTML blob that you want to render within the popup you've created.
You can use the JQuery.load method to do this for you, taking the html generated by your page and transferring it to your popup in one line.
$('#your-popup-id').load('database-summary.aspx?id=1');
There are other methods, where your page or generic handler can return JSON, which you then parse after making the callback, but this is not the way I would go if you're just starting out.
If you want help with the popup itself, then you can use a library like qTip2 which has built in Ajax > Popup methods, making the task even easier.
This question is very broad, so I'll keep my answer pretty general. The basic idea is that you want to make an AJAX call from your page to your server, include the key in that call, and then when the AJAX call returns use the response to update your UI.

Categories

Resources