Dynamically display database information onclick - javascript

I set up a web service using LAMP for personal use.
Basically, I have a scrollable list with some database information I pull once in the PHP script. I'd like to be able to click on one of the items, and have more information appear in a preview pane . (preview pane is set up)
I don't expect to ever have more than 100 entries in my database. Also, the data I'm pulling is very small...about 10 fields, all text data.
My question is as follows:
If I pull all the data I need in one shot, how can I store it so that each block of data I define (2-3 rows are what I need in the preview pane) is "cached" and I can access that given block at will so I can display it upon clicking its corresponding list entry?
Basically, this is about the same as clicking an email in a web-browser and having the rest of the message show up in a preview pane.
Thanks.
nb: the fact that I'm using a preview pane or a list is irrelevant. Just describing what I'm doing.

If I understand correctly, you would like to create a simple page, where several details are hidden until you click on different buttons. If you would like to do this in a "cached" way, you can try the following:
Fetch the complete data so that everything (with details) ends up in the result HTML. Everything: I mean, the parts which should be visible at all times and also the details which should be visible only after pressing a button.
Now, to the design. You will have to write CSS code, which will hide the details. (Of course, for that, you will have to create HTML in step 1 which will let you target the details via CSS classes, for example.) You will also have to figure out how to create buttons.
The most complicated part is to bind the buttons to Javascript actions, which will perform showing the hidden details. You can control all CSS properties from Javascript, so for example you can alter the position, the size, the text color etc. of a <div> dynamically.
Most people nowadays use jQuery for tasks like the one in step 3, or even software libraries built on the top of jQuery. That could help a lot if you're just starting out with tasks like this one. On the jQuery site, you will find a great place to start, called the jQuery Learning Center.
Edit: I've created a very basic fiddle to let you test the JS part of my concept, see it here: http://jsfiddle.net/eL9mj/22/

Related

Scrape web data from mouseover popup

I'm trying to use JavaScript to scrape data from the following page, specifically the "free shipping free returns" text that appears when you hover your mouse over the cart icon:
Whenever I hover over the cart icon, new HTML is added to the DOM.
And when I move my mouse away, the the previously added HTML goes away. I want to be able to parse data from the HTML that gets added without having the popup visible. How would I be able to scrape this text data even if someone does not hover over the cart icon? Is there a way to access all the HTML data at once?
You can try to catch the JavaScript function being executed when you hover your mouse over the cart icon. You can do this via the developer tools. Add break points to code execution if the DOM changes (on the parent element in which the new element is added).
Once you get the function, just execute it directly on that page and you'll probably be able to see the popup and extract it's contents.
You could also try to simulate a hover as explained in these answers: How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?
Scraping a page for data is not usually recommended since they can change over time (especially ones not written directly in HTML, but are rather generated (usually they have CSS classes like 8h2H1)).
If this is not supposed to be a long-term solution, the above answer by #nvkrjn is a good answer. Or, you can just check for an element with the id name free-shipping-label.
But, if this is supposed to be a long-term solution, then I would suggest using an API (this site doesn't seem to have one) or querying the database like how to Javascript does. Also, if you're using a non-browser environment (eg BeautifulSoup), it may not run the JS required to get the data.

Advanced Custom Fields - Toggleable Options for the Backend?

I'm building a website using the ACF plugin (Version 5 Pro), and I'm setting up a button on a page template, which by itself isn't the problem. The problem is that depending on the specific content of each individual page using that template, the button can have one of several different appearances. What I'm trying to do is set things up so that I can upload all the buttons into the default value section of the ACF field ahead of time, and then every time I make a new page using that template, simply select the appropriate button from a radio button, a dropdown menu, or something similar on the backend of the page. I plan to be constantly uploading small amounts of content using this template, so not having to manually select the appropriate images on each page would save me a lot of time.
I've googled around and there wasn't a good answer I could find anywhere, so I'm hoping one of you more knowledgeable folks could help me out!
(And before anyone proposes this as a solution, no, the content of each page isn't something I can define just using programming. It's a little more abstract and needs human input. If all else fails I can just make multiple templates and simply select the appropriate one when I go to make a page, but the way I'm trying to do it now would be a lot cleaner).
You can try ACF Flexible Content:
https://www.advancedcustomfields.com/add-ons/flexible-content-field/
Using Flexible Content field, you will be able to create multiple fields (button 1, button 2, etc) including a WYSIWYG editor and build the buttons HTML adding the default value of the field.
You can read:
https://support.advancedcustomfields.com/forums/topic/html-default-values/
However, I think you'll get in trouble making your buttons dynamic with this approach... so I'd suggest it will be better if you keep some parts of the buttons (like URLs) dynamic, using an extra field to enter the URL, anchor, etc.

How do I automate my workflow with Javascript to save bunch of images

I am trying to copy paste some stuff from some website which I want to automate. Here is my manual workflow:
There is a master webpage which contains set of links.
When I click on one of those links it opens another (say topic page) page with set of tabs.
I click on one specific of those tabs which loads a page containing several buttons with same html-css applied to them.
On click events of those botton calls a javascript function passing four integer parameters.
The function results in generating a separate popup window with some small content which I then print as pdf.
The issue is that the website blocks right click and text selection. And the popup window contains a image which I print as pdf by right clicking on titlebar and selecting print as pdf. When I checked the source of popup, I found that it uses
"data:image/png;base64,<source for image>"
as value for src of <image>.
Now the big question can I write some script which can run when either master page or topic page to automatically click on buttons on them and get those images saved either directly as png or pdfs? I am good at programming languages java, groovy, python, C#... Also explored javascript a lot. But that's many years ago and really lost in touch with JS. Can I do this with say greasemonkey or any other way. Any pointers (possibly detailed) will be helpful...Or even some small pseudocode which I can paste in console of topic page which will do all clicking of buttons and saving image from the popup, so that I don't have to do button-clicking-&-saving-image manually. This will also serve a lot since there are more buttons per topic page instead of number of topic pages themselves.
Update
Well I know this question is not at all specific, so here is my initial hurdles, since I have started to try it out:
given that I am programmatically call all those function on onclick events, how can I get hold of popups in source? That is, how can I reference the popup that is opened by function call in js?

How do I create select menu in an external file and embed it in html to show the menu

My website has individual pages for members, but I have a select menu used to scroll from one member to the other. I have the select menu coded in the html on every page, but I need a better solution since my membership is growing.
I need to be able to create that same select menu in a separate file with the ability, when selected to jump to another member page, have that embedded in the body where I need it so that all I have to do is alter/ update the external file and it'll be done for all the member pages.
I've looked into javascripting it, mysqling it, but can't find (looking on youtube) a code to exactly help me in what I need.
My typical code for the select
//(select.....
//(option value="http:www.website-Profile-blahblah.html.... so on and so forth.
I need to pull this from an external file to use across the board and place it in the body where I need it.
thanks for any help you can offer.
In general this sounds like something you should be using a back end rendering engine for. As far as the select goes, this would be a great place to use a dropdown menu such as the one provided by bootstrap since clicking a select won't actually move you to another page.
If you dont want to use/can't use a back end rendering engine to render the options, I would suggest looking at angular.js which has a great ng-repeat and ng-option feature that would allow you to dynamically build the select/dropdown with as many users as you want.
angular ng-repeat page: https://docs.angularjs.org/api/ng/directive/ngRepeat
bootstrap dropdown: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp (note the a tags could go directly to the user's page)
From experience in cases like this, it is much easier to have an SQL table to store the links you would like to use. The next thing to do is to have your back-end send you the list of links. With this, you can dynamically create the option tag and append it to your select tag. functions like newOptionTag.setAttribute('value', 'url'),document.createElement('option') and selectElement.appendChild(newOptionTag) should help you on your way
If you really want to use a seperate file, you could store the membernames and links in a json file. On document load get the file, parse it, then use the object to build the options.
The w3schools website (though frowned upon by some) has a json tutorial and an example that is already halfway there.
EDIT: I see it actually uses mysql to build the json file...

How to implement a Tag Bar in javascript / css

I'm trying to implement a search bar for a web page having basically the same properties of the Tag bar appearing when you ask questions on Stack overflow:
It should have the following properties:
Allow the user to directly type in it.
Pull up entries with same letters as the user is typing.
Allow to delete an entry by either deleting on keyboard or pressing on inserted elements.
I'm interested in understanding the underlying structure of such an element and how to setup listeners and functions that call each other, not simply the code. Could anyone please help me figure out the skeleton of the functions I need to implement?
Besides just using a jQuery UI plugin, the simplest way to do it would be with a text input box and a ul. You can use jQuery (or something else depending on if you are using a framework) to listen to any change in the input box.
At that point you have a choice depending on the rest of your app: The filtering can happen in the front end or the backend. Because databases tend to be fairly quick, it might make sense to filter within it if you have a very large set of data. Otherwise, you could just grab the entire list and use JS to filter it.
Either way, have a callback occur on that change that initiates the filtering and then renders the results into the ul.

Categories

Resources