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.
Related
I am trying to display on my webpage how many customer reviews there are, however the customer reviews are on another website.
So my idea was to target the DOM of that website and find out how many reviews there are by using .length, which returns me the correct value.
but I need to somehow link that .length value to my own website so that people who view it can see in text how many reviews there are. there will be a hyperlink below this to then direct the viewer to the other site to read them.
I want this because every time someone leaves an additional review on the other website the .length value will change and therefore need this to reflect automatically on my website.
Any ideas how this can be achieved?
Im having a hard time passing data from one HTML page to another.
Im building an online store, i have one page with my items, and with their buttons for users to pick.
and i have seconde page that is my checkout page.
I want to make it so that when the user clicks on the items in the items page it will get written on the DOM on the checkout page.
2 main issues im having:
1 inside the javascript file i have for both pages, i have the variables and eventListerner for the buttons from the items page, and i also have the variable for the table in the checkout page where i want to write with the DOM.
When im on the items page, my table variable comes as null when console.log.
And when im on the checkout page i get:
itemsScript.js:44 Uncaught TypeError: Cannot read property 'addEventListener' of null
at addEventListeners (itemsScript.js:44)
at Array.map (<anonymous>)
at itemsScript.js:46
So i see that they are not comunicating properly.
2 where should i put the value and names of the items, on the buttons themself? maybe a data.js file, and the how could i get this data from the button that was clicked?
Is the checkout page a complete new site or implemented inside your product site?
In case of a complete new site you will trigger a new request. One way is using local storage/cache as one already mentioned. This would probably the best solution so you wont lose any items on a normal site reload.
In case of a implemtation direct on the product site have a look at ajax. This might help you.
I find myself having to interact with a web page that hides state in various places so that one cannot easily share it as a URL, for example this page which allows users to look up information from city zoning applications:
https://aca.cityofberkeley.info/community/Default.aspx
You can interact with the page all you want, but the URL in the location bar will remain the same as the above.
Currently, city staff provide users with instructions like "Load this URL, click on the 'Zoning' tab, enter DRCP2020-0010 under the 'Permit Number' field, click 'Search', then when the records come up, click 'Record Info' and then select 'Attachments' from the dropdown menu, then click on the PDF document that says '2020-10-21_DRCP_APP_PCKT_2801 Adeline.pdf'". I would like to be able to replace these instructions with a URL.
Another example is the website where video from city council meetings is archived:
http://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa
It would be nice to be able to produce a link which brings up one of the meeting videos, and seeks to a certain timestamp like 53:40, so that I can refer to something specific that was said at a meeting.
Looking at the pages that are loaded when I follow the instructions in each case, I can see that there are some POST forms, cookies, hidden input fields, and so on.
Is there some kind of tool that I can use to create "deep links" to pages like these, that were generated using non-URL hidden state, which will allow me to quickly share what I'm looking at with another user?
What I'm seeking is similar to the frmget "bookmarklet", which changes the forms on a page to use GET instead of POST. Sometimes this succeeds in producing a URL which captures form submission query parameters. However, it doesn't work for these applications, for whatever reason.
This question is possibly related to the idea of capturing a web page's DOM state using "browser screenshots" and a script called html2canvas. A possible solution might involve getting and setting cookies in a bookmarklet. Ideally something that produces a normal "https://" URL would be ideal, but if it is impossible to solve the problem except by outputting a "javascript:" URL (bookmarklet) then that is acceptable to me (in spite of the security implications). Thanks.
That seems like not a programming matter. It seems like the site has some security issues as well.
QUESTION A: About Zoning
Here are some links you can use
Direct link to Zoning (I've found it via Advanced search from the site):
https://aca.cityofberkeley.info/CitizenAccess/Cap/CapHome.aspx?module=Planning&TabName=Planning&TabList=Home%7C0%7CBuilding%7C1%7CHousing%7C2%7CPlanning%7C3%7CFire%7C4%7CLicenses%7C5%7CPublicWorks%7C6%7CCurrentTabIndex%7C3
A strange link to the list of files (I've found it via downloading a file, then going to chrome://downloads, then right-clicking the file I've download. The link has been the following):
https://aca.cityofberkeley.info/CitizenAccess/FileUpload/AttachmentsList.aspx?iframeid=ctl00_PlaceHolderMain_attachmentEdit&module=Planning&isInConfirm=False&isdetail=True&isaccountmanager=False&isAdmin=True&isPeopleDocument=&agencyCode=BERKELEY&isForConditionDocument=N
It still doesn't give the direct link to the file, but it it gives the list of attachement of the previously opened Zoning record.
Currently I have no idea what file is triggered by javascipt:__doPostBack('attachmentList$gdvAttachmentList$ctl02$lnkFileName','').
In any case, based on what we have, step one, and then step two seems like minimize the path to download the file. I guess there could be a way to download the file directly, but I currently don't see any easy way. Maybe someone else could figure it out.
QUESTION B: About video
I've used an embed link that shows all the attributes that can be used.
There is a pretty strange but working way to give the exact timestamp. Change starttime from the link below:
https://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa&starttime=0&stoptime=undefined&autostart=1
So replacing 0 for 3600 will rewind the video forward by one hour (3600 seconds):
https://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa&starttime=3600&stoptime=undefined&autostart=1
The problem here is that ... you cannot rewind back manually that particular hour (it just gets kind cropped out). But it works to show the exact episode.
That's a pretty strange site.
I need some help with oracle apex. The thing which I want to do is the following:
I have table with some data about people. So each row describes exactly one human. And I want to show some more information about certain human. For example, list of shops he or she has visited. Such data provided by other tables.
I see it in this way: right click on table with people on certain row -> select option (what kind of info to show) -> execute stored procedure and show new page with data table (e.g. list of shops). But how can I implement it?
I've already found this plugin. Now I can execute some JavaScript function after right-click. But how can I execute stored procedure and show new page?
I'm new in apex, any help would be appreciated.
You're trying to reinvent the wheel. You're new to apex. Have you taken a good look at the documentation?
Start out where everyone else has to start: at the beginning. Report + form. Column links.
There is ample help available to someone new to apex.
The 2-day developer guide, running you through some of the
basics of apex and a good familiarization.
Get a workspace at apex.oracle.com
Each workspace starts with the sample database application, based on
products and customers. You can view and edit this application and
thus you can glean plenty of information from it.
Furthermore, there are the packaged applications, many of which offer
good basic solutions to common situations. Again, you can glean a lot
of information on them, and they are even editable after you unlocked
them.
After you are familiar with the basics, you can look further ahead. What you are asking is simply too much for someone new to the matter. You even want to implement a jQuery plugin straight away. You're talking ajax. It's great if you know those subjects and they'll be of plenty of value to you, but it just seems you don't even know how to present and fetch your data.
A good start would be to make a report and a form. In the form you can then add some classic (or an interactive) report(s) to represent associated data.
It's possible. First of all, assume that each row contains unique identifier ID. You have to add hidden item to the page which would contain additional info about certain row. Let's name it P1_ID. Then add the following JavaScript code to page which contains initial data (in example from question, page with table with information about people):
function TestFunction(action, el, pos) {
var id = $(el).children('td[headers="ID"]').text();
var href = 'f?p={APPLICATION ID}:{PAGE_NUMBER}:&SESSION.::::P2_ID:'+id;
window.location = href
}
Function name should match name in plugin settings. Example: link
Replace APPLICATION_ID and PAGE_NUMBER with actual values according to application. PAGE_NUMBER is the page number which contains additional info about row.
Then you can add some reports to the page with additional info and use ID parameter to select information about certain row.
The only problem is that plugin mentioned in question stop working after table refreshing. For example, if we filter data in table then no menu on right click will be shown. I don't know how to fix it for now. Any ideas?
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.