Tab requirement using CSS and Javascript - javascript

I have the below requirement:
Front end for a big database which stores details about the sports students are in a school. For example student xyz plays cricket so database will store cricket details for him, student pqr plays soccer so database will store soccer details for him and so on.
The main screen is divided into two sections. The left section is a search section with several criteria user can input. On clicking search, result will be published in the right section as a summary.
For e.g. if searching for x resulted in 5 students, then the summary result will be 5 rows.
Now clicking on a specific student on the summary result should fetch all the other details specific to him and should publish it as new tabs in the same section. Like Occupation in One tab, his sports details in other tab.
1) How to achieve this using CSS and Javascript?
2) How to keep the other tabs disabled? For eg. soccer tab should not get enabled for student playing cricket.
I am extremely new in CSS and JS, so may be my requirement is not as complex as I feel. But I definitely require a starting point.

Use a separate <div> section for each tab, and specify a class attribute on each div that describes how it is being used. You can hide/show a div by modifying its style.visibility property (you set it to 'hidden' to hide the div and, for most situations, 'block' to display the div). You can use CSS to apply different styling to each div (such as its location on the page).
Personally, I would divide this up into three different tasks. The first task is setting the layout of the page to look right, using fake data (e.g. create a function that "fetches" the data, but actually just gives back canned data). The second task is provide request handlers that can return raw, unstyled data (preferably in JSON format) based on the data in the database. The third, final task is to connect the JavaScript in your user interface to actually fetch the data using XHR requests to these endpoints, and passing along the JSON response appropriately instead of passing along fake data.

Related

How to reload page with new data in Node.js

I'm using express-handlebars as my template engine and I have created an 'Article' template. I have 5 articles in total. I need to show the user each article but randomly. How would I create a 'Next' button that could reload the page with a new article?
I have thought of using a cookie in the browser and implementing some sort of array within it to decide the next article to be shown (the array will be randomised).
As with loading the articles, I have thought of creating a new page for each article and then redirecting the user to a random page when the click 'next', but that wouldn't be making much use of the template engine.
I don't have code to show as I'm looking for a concept that would work.
I want the user to open my website, be shown a random article, click next and another article appear. I don't want each user to have the same sequence of articles (obviously with many users this is impossible but I'd like to minimise it).
For 5 articles,
1. track the articles already read by a user via cookies
2. add a query parameter to the article template link like randon=1 so as to respond back with a random article and another parameter not_in=*already read article ids* to exclude these ones.

modifying HTML page "on the fly"

I looked at "Generating HTML Page on the fly" on this website, but most of it was over my head.
I have a 2 part question that I would like assistance with please.
I want to fill a narrow vertical container, <div id=”counter”> with the numbers 1 .. <xx>.
<xx> is determined by the record count of a database, filtered “on-the-fly”, by the user choosing a category (no problem there – I have an SQL background)
Eg. Category1: 1 .. 200
Category2: 1 .. 6
These numbers could change over time, as I want to allow users to add content to the database (vetted of course).
I have viewed a number of website source code pages (of similar ideas eg. Surgicalexam.com), but they have all been hard-coded and are distinct pages per category.
I have created a small website of a similar nature to that, hard-coding all the images and links, but I am looking at 3000+ images (as a starting point here), and they differ per page.
I have created this scenario many times in stand-alone apps and from past experience, I thought perhaps, I could create a javascript routine which would use a loop to
• print the numbers to the <div> using the getelementbyID ( ).
• Fill an array with the record number, a title and an image link.
Question 1: Is this possible or am I beating a “dead horse”?
If it is possible, any suggestions would be gratefully accepted.
Part 2:
My current idea is that, as the user hovers the mouse over any number, a mouseover ( ) event will occur that will read the appropriate array record and display the <title> as a tool-tip-text.
If the user clicks the number, a function (I have yet to write) will read the appropriate array record and attach the image link to an <a> tag, and subsequently display the appropriate image to the screen.
Question 2: repeat of question 1.
I have viewed a number of website source code pages (of similar ideas eg. Surgicalexam.com), but they have all been hard-coded and are distinct pages per category.
Why are you so sure about that? You can't see php-code, because it is executed on the server. There is no way to know if it was hardcoded or by php
Answer:
It is possible.
If I understand this correctly, you want to read some data from a database and if the user clicks / hovers something, you want to load more data?
You have to splitt this into two things:
Load data with PHP from the db (Server side)
If you want a live, visual feedback you need JavaScript (and/or CSS3) to do changes. (Client side)
One possible solution is to create a API with php (maybe REST-like) and then call that api with JavaScript.
You could also do everything with PHP but this will require a reload of the website on every click. PHP cannot do changes On-The-Fly.
First of all you should learn the basics about web development.
And most important: If you decide to learn Web-Programming: learn about security, too. For example things like Cross Site Scripting and SQL-Injection. Never trust data coming from a client (e.g. JavaScript)!

Appending only numbers to a friendly URL after selecting a number

My website basically consists of photo galleries that people can browse. On the main page, people can choose to access the gallery of images then in the gallery, they can select which photo they want to see.
This is an image of the possible different ways to give users picture choices. On my site now, I offer the left-most options because of compatibility for all browsers.
The option format I want on my site is defined under "Desired Options". When a user selects a boxed arrow, the number (shown as ## here) will automatically increment or decrement. then when GO is clicked, the URL is then http://example.com/picturenumber/##. So if users use the up and down arrow buttons to select number 10 and GO is clicked, then http://example.com/picturenumber/10 is the resulting URL.
Here's the issue
To achieve the above, I feel I need to use javascript. I believe at least one person in this whole world that wants to use my site uses a device or browser with no javascript support. This forces me to use the option format on the far right, a basic text box for the picture number to be typed in and a GO button.
My partial answer to my question is this:
Use this HTML:
Enter #:
and this PHP named imagepicker.php:
While this does work, the problem is that an extra request is required to fully process the user's request.
I feel my only other options to solve my problem are either:
Not use friendly URLs and make them compatible so that when the form is submitted, the correct URL is loaded without the need for an extra request. For example, make this URL the official image URL displayed in the address bar: http://example.com/imagepicker.php?number=##
OR
List every single image number on the main page which is rather redundant because the list is in the gallery page.
I even thought of using a combo box in place of a text box and that wouldn't help either.
Is there some way I can do this so that users with no javascript support can enter an image number and then with a click of a button, be taken to that image without requiring the resulting image page to be accessed at a not-so-friendly URL and without listing all image numbers at once? If so, what would you suggest?
So, basically it boils down to a HTML problem in which you need to increment some numbers pressing buttons that alter the format of the URL in order to be friendly, and after that, you have to produce a postback. I think you need javascript for it.
Without javascript, I think the best solution is to sacrifice friendly URLs and create a form with method GET, so the choice that the user writes will be sent to the server as part of the query string. But only for those users that don't have javascript on their browsers. You can use javascript for the rest, but if you do that, it would be better to keep the "unfriendly" URL format for consistency and maintainability.

Button to open new page and auto fill some form elements

I sell a tremendous number of products that require finance of one kind or another. I also use 8 different lending sources for financing. Problem is that each lender works with certain product types and ages, etc. I can not use a generic application form due to the differences in each lenders requirements. I have added APPLY NOW Button(s) to each individual product but cannot use simple "goto" link.
Example(s):
Customer 1 views product ID#20, unit is 20 years old and only one particular lender will work.
Customer 2 views product ID#55, unit is brand new and all will work with it, but I send all new products to one lender in particular.
Apply Now Button is always the same image, but I need for the button to open the application page specific to that product, and auto fill the input fields such as Vendor Name, Product Name and Description, Price, Etc as most customers are unfortunately lazy and simply won't do that once they have been taken away from the product page. I figure I will need to code the button individually based on individual products to open the correct application, but want all to fill in the information. All items for AutoFill are stored in the Store Database as well as the Vendor (Store) Info.
Maybe I am in the wrong area or simply missed the answer somewhere else, but I am getting snow blind trying to find the answers...even a point in the right direction would help.
It sounds to me like you need to link the product with a lender type, this would make it easier to grab lander data and auto populate the form fields when the page loads. This way you would not need to change the "Apply Now" link.
In short I would suggest creating a link table between product/product type to the lender table.

Dynamically display Edit Control Block menu item in SharePoint

I am trying to set up dynamic per-item menus (Edit Control Block) in SharePoint 2007. My goal is to have certain features that are available based on the current user's group membership.
I know that the CustomAction tag that controls the creation of this menu item has a Rights attribute. The problem that I have with this is that the groups I am using have identical rights in the site (ViewListItems, ManageAlerts, etc). The groups that we have set up deal more with function, such as Manager, Employee, etc. We want to be able to assign a custom feature to a group, and have the menu items associated with that feature visible only to members of that group. Everyone has the same basic site permissions, but will have extra options availble based on their login credentials.
I have seen several articles on modifying the Core.js file to hide items in the context menu, but they are an all-or-nothing approach. There is an interesting post at http://blog.thekid.me.uk/archive/2008/04/29/sharepoint-custom-actions-in-a-list-view-webpart.aspx that shows how to dynamically modify the Actions menu. It is trivial to modify this example to check the users group and show or hide the menu based on membership. Unfortunately, this example does not seem to apply to context menu items as evidenced here http://forums.msdn.microsoft.com/en-US/sharepointdevelopment/thread/c2259839-24c4-4a7e-83e5-3925cdd17c44/.
Does anyone know of a way to do this without using javascript? If not, what is the best way to check the user's group from javascript?
There are two different Javascript functions that you can implement for dynamically adding menu items to list item drop downs. Core.js (C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\CORE.JS) checks for the existence of these methods when generating the menu items for a selected list item. "Custom_AddDocLibMenuItems" and "Custom_AddListMenuItems" are the names of the Javascript methods.
One article that I think you can use to solve your specific problem, dynamic menu item customization based on user role membership, can be found here:
MSDN: Customizing the Context Menu of Document Library Items (note the process is exactly the same for any list type)
This article outlines how server side code can be executed to define the menu items that will be displayed:
[...] in more complex cases, you must retrieve the list of available commands from the server, because only there you can run your business logic and perhaps get the commands from a custom database. Typically, you want to do this if you are implementing a workflow solution where each document has its own process state, with commands associated to it.
The solution for this situation is to have the Custom_AddDocLibMenuItems dynamically call a custom ASP.NET page. This page takes the ID of the document library and the specific item on the query string, and returns an XML string containing all the information for the commands available for that particular document. These commands are available according to the document's process status (or some other custom business logic). [...]
Unfortunately this is not possible to accomplish without using javascript. The ECB doesn't render server controls defined as a custom action (unlike the SiteActions etc).
To learn how to accomplish this by using Javascript check out the following article:
http://www.helloitsliam.com/archive/2007/08/10/moss2007-%E2%80%93-item-level-menus-investigation.aspx

Categories