I have a php file that searches for a keyword in a MySQL database table. This script builds a page with a lot of products organized by brands… When you click a product it shows a bootstrap modal with more info (calling another php file that looks for the particular id of the product). The modal has two buttons and needs to be able to go to the previous and the next product of that brand and this buttons should be disable when reaching the first or last product.
This is what I’ve been doing:
While inserting the data from the products in the page I generate an XML file with all the brands and inside each brand, all the ids of the DIVs corresponding to the product. Then I have to build arrays in Javascript to handle this data. The code is getting really messy so I’ve been wondering:
What’s the best way to link all the products so I can go back and forward in my modal?
I ended up building something like this:
<div id='231' data-brand='somebrand' data-brand-index='3'>
then i can get the id with jquery:
var x = $("div[data-brand='somebrand'][data-brand-index='2']");
alert(x.attr("id")); //shows 231
Related
Currently have a fully functional form that has a dropdown field that lets the user choose products. I want to ensure the dropdown field is locked to product_x if the user has been redirected to the form from product_page_x (theres a total of 8 products) and the dropdown remains accessible if user has been redirected from any other page except the product pages.
Edit: What I've thought so far is to assign different IDs to the buttons redirecting from each product page and assign null ids to buttons on all pages except product pages and then use js to implement an switch statement that displays a fixed element field according to ID and the defaults to the dropdown. Is this the most optimal approach? I've attached my dropdown and a supposed src page id.
Open to both php and js suggestions. The whole website has been developed using Laravel.
Would appreciate both logical and functional help.
Final edit: Made form redirect buttons return an id (unique to every product page) and then used php to get that id. Used a switch to display simple readonly text field with product name nested inside an if statement that checks if switch var (i.e. id has been set) and then echoed the dropdown in the else block. Open to suggestions about how this could be better.
you can use js to select a value and then make the dropdown unclickable.
var pageType= "<?php echo ($pageType); ?>" ;
if (pageType=='product'){
$("#dropdown").val('product_x');
$("#dropdown").css("pointer-events","none");
}
It is difficult to give you a proper code without seeing your page design, but this is the basic format on how you can achieve this.$pageType will have to be defined from controller itself.
Is there any way to save variables using Jquery or javascript, besides setlocalstorage?
For example: I have a product catalog website online. I made administration rights features like a window where you can add the name, picture and price of an item. That item data goes into the array using push(). But it only works locally. I want the items I add to be seen by anyone who visits my website.
var products=[["fishing rod","https://i.pinimg.com/originals/d1/1c/41/d11c419d0c75307b18e388a0c2d64907.jpg",10.99],["fishing line","https://s7d2.scene7.com/is/image/dkscdn/15SFXUSFXSG330YD6FLI_Clear_is/",3.99]];
I have 3 inputs on my window, 1 for name, 1 for img src and the last one for the price. When I click 'OK' it pushes that new array into my products array. But I want to save that array inside the folder of my online website. So that more people with admin rights can add more products and that I can see the changes online.
I hope I made myself clear.
You should use a backend that store this data in some kind of database (SQL or nosql).
Then you access it a display the content to all the users.
At the moment I am working on a medialibrary in the Laravel framework.
I am looking at WordPress with a users-experience point of view.
The tab Media Library shows the images which you can select.
I've checked TWO images (Shift + click) within "Insert Media"
I switch to "Featured Image" and check ONE image for Featured Image.
When I switch back at Insert Media it remembers the two previously selected images and forgets the checked Featured Image.
How does WordPress "remember" what images are checked in Insert Media view. Is that a Backbone view they're using with some data stored in a model? Because each time I switch between Insert Media and Featured Image the UL element is changing it's id attribute: (__attachments-view-xxx).
When I just use plain javascript, could I put some ID's in an associative array instead? It means that each time I switch back to Insert Media, I need to find the corresponding images to re-check them? What if you have hundreds of media-items to search each time...
I have the feeling the Underscore library might be helpfull somehow as a good alternative but haven't figured out how to use it to make everything as smooth and fast as possible... It looks WordPress isn't even "refreshing" the media items. Could anyone give me some advice to mimic this behaviour?
A simple way would be:
each item in the gallery view has a unique id (for example the actual ID from wordpress). It can be stored as a data-attribute or the html id attribute for example.
you then have separate arrays that store the IDs of selected items for each tab (insert media / featured image)
when user clicks an item, the ID of that item is added (or removed) to the corresponding array for the tab he's viewing
when the user switches tabs you first deselect everything in the gallery (remove the class that marks them as selected), then go through your corresponding array and re-select what's in that list.
Of course, I'm sure Wordpress is doing something much more refined, like storing a list of all the images it got from the AJAX request as objects, then doing these operations on that list and also showing/hiding items in the gallery view based on what tab you select. But the general idea is the same.
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.
I have a website with Drupal 7. On one page, we have two quicktabs (using quicktabs module), under each quicktab we have expendable fields. Those fields are expandables thanks to this code:
jQuery(".ideas-content").hide();
jQuery(".ideas-title").click(function () {
jQuery(this).toggleClass('ideas-closed').toggleClass('ideas-open').next(".ideas-content").toggle();
});
The user can click links inside these expandable fields to go to another inside page. When the user goes to the previous page (the page with these expandable fields), quicktabs are back to default and the fields the user previously expanded are not expanded anymore.
How can I do to have the user coming back on the page with the right quicktab and fields expanded? I was thinking to create anchor links but I do not know more.
I googled the issue with no success.
Thank you for any input and help.
If you are able to access the exact HTML of your page, through template.php function overrides, .tpl.php overrides, or by writing the HTML yourself within the page.tpl, you can add IDs and classes around the elements you want, and then since you are using javascript, you can try using a library such as https://github.com/browserstate/history.js in order to get functionality to take the user back to the state they were in -- with open sections -- after going to another page.