I am teaching myself Javascript at the moment and I am creating a small website project for fun. My issue is:
I have a homepage that has a button in a navbar called "Products". When I press it, I am redirected in a page where I have a grid layout with 5-6 categories (as images). When I press the images, I am redirected to the relevant products. For example Products > Cars > Fiesta 2009 and more cars.
The thing is that for every different product category I have a different HTML page, but I know that I can just have an HTML page and change its content dynamically(DOM). Is there a good guide that describes this specific functionality? I have tried many different approaches but I don't really know how to do that and my site doesn't work.
Posting it after 15 hours on working on my code and not finding a solution myself*
You can consider using a UI framework/library such as ReactJS, Angular ...
Then use a routing handler (react-router, #angular/router ...).
Another alternative is to use plain javascript (VanillaJS).
I submitted a sample few days ago nearly around this topic.
Related
So this is more a design/tooling question (no code to show)
The Idea:
I have an idea for a web app that I'd like to implement using either React/Angular depending on the outcome of this discussion really. The idea is that I want to be able to bundle up my web application and embed it in any website with as little code as possible. The end result for the website it's embedded on would be a new 'widget style' button hovering in the corner which when clicked opened up my new React/Angular application in a pop up or layover modal style window.
To be clear, I want to, if possible provide the clients host website with as little code as possible such as:
<script src="https://myappurl.js"><script>
<some-new-element-in-html-body?> </some-new-element-in-html-body?>
This would then leave them with a widget style button that when clicked opened my app as a layover
The How:
Now I know there are probably a few ways of implementing this. I come from an Angular development background as a full stack dev so embedding apps within websites would be a new concept to me. I guess the outcome I want is similar to that of a chat widget application on a website.I'm struggling to find online the best solution or toolset for the job.
Web components seem to have popped up quite a lot. This would result in me having to provide the website with the tag and the new html element but could this then add a widget style button which triggered the application popup. I've also read that React/Angular bundle sizes may be too much for web components, even in smaller apps, so something like preact may be preferred? Again the same question above stands. This youtube video explains preact/react web components and wonder if its the best option - https://www.youtube.com/watch?v=PUGDzA1uP-Y&t=545s
iFrames are definitely an option if I wanted to simply mount my application with any other website. That said its not really what I'm after, as although I want the contained app, I also want to be able to add this custom widget style button to the host website, without having to edit the website directly.
UMD Libraries - again something else I've come accross but this is the most unclear, and how they differ or would benefit my specific scenario compared to web-components.Now I may be barking up the wrong tree completely, and if so could you kind people please point me in the right direction of what I should be looking at.
I may also need to consider 2 apps, one for rendering a button that loaded quickly annd then facilitated the popup / modal type layover, and then one which loaded up my application with one of the 3 methods mentioned above?
THANKYOU IN ADVANCE! :)
I'm making an administrator portal for a band-website. The design is as follows:
There is a side navigation bar(on the left of the page), with things to be done (such as verify reservation requests, answer fanmails, modify band info, upload photographs to the gallery etc.). Clicking on these options should populate a form in the empty space on the right. I don't want to create a separate page for every one of them.
I have checked hell lot of websides for side navs, but i see they all redirect to links to different pages. If anybody could suggest me what all i should explore.
What you are asking about is called 'Single Page Application'. You need to use JavaScript for this. Best way is using JavaScript MVC frameworks like Angular, Ember, React etc.
At my company, we are debating this. Say you have a color swatches that is already built in product detail page. At the category page, where each products are displayed, doesn't have color swatches. So we are trying to build one. I was suggesting if we can use jquery or javascript to crawl it, cache it or drag it from the pdp and display it in category page. If we do that, it probably gonna be very slow because the category page is going to hit the server many times.
Additional info, we don't have access to the php codes, so only javascript, jquery and html is possible.
I am actually looking for a way to do that. of course, it has to run fast too. Any suggestions of possibility anyone?
i dont think it is possible, your jquery or javascript should be native to the page to read its contents, ok lets assume it is native and you can read the content but where do you store ? with only javascript and jquery and not much of server side it is impossible
I was wondering how GMail and things like that can update the emails in there without the entire screen going blank.
I am working on a web tools site here. As you can see on the right hand sidebar, there is a news feed that shows the recent events of certain members.
It is a simple PHP script that shows the latest events, these events are stored in a MYSQL table. This PHP script is then iframed for the sidebar.
I want the sidebar to automatically update. It can either update on a time interval (like every 10 seconds) or just when a new event is added.
I tried having a meta refresh that went every 5 seconds (on the PHP script)... it did not work well though. Every 5 seconds the entire sidebar would go blank and then re-appear. Plus the loading wheel for the site would constantly appear every time the sidebar refreshed.
Is there a simpler way to do this? Maybe using some type of JavaScript event to check for new events and then spit them out, instead of refreshing the whole page?
EDIT: OkayThanks For Your Help! I got it going with AJAX! However, I am now running into a different problem...Please continue reading...
I was using JavaScript to display the time in the bottom right corner of each event. I was using a code similar to this...
<div class="event">
<p>The event text</p>
<script type="text/javascript">
document.write(get_time(1332900003));
</script>
</div>
This would be the HTML actually stored in the database. The problem is that the AJAX is grabbing this code, spitting it out (onto the iframed page), and then the time snippet is not being executed (everything else works fine).
I would prefer to use JavaScript over PHP to display the time, because with JS you don't have to worry about timezone differences.
Is there anyway I can fix this?
Essentially if you want to mimic the concept of how GMAIL and various other sites render a page and then manipulate it there after without making the page reload between transactions as j08691 indicated in a comment to you AJAX is the methodology your looking for, however it requires knowledge of JavaScript and some server-side scripting such as PHP in your case.
For the sake of ease when building a scaleable piece of software of even just a web site in general I would suggest looking into a JavaScript library like jQuery, Prototype, Dojo, or the like. My personal flavor is jQuery as in my own opinion it is very stable, has a large support community and all around is easy to learn over all.
It will aid in rapidly developing JavaScript based code that will be cross browser compliant without having to write long lengthy scripts in native javascript to do the same as you could more easily achieve with a library backing it up.
http://www.jquery.com - core library
http://www.jqueryui.com - extension of the library
plus there's hundreds of thousands of little plugins you can pick up to aid develop your overall user experience quicker as well.
You can check it here:
Ajax let you send/fetch data from the back-end without refreshing your page
http://api.jquery.com/category/ajax/
I'm wondering if doing this along in JQuery would be stable enough? or if it would need to be done in ruby/rails first?
Either way I don't want a butt load of messages being loaded when a user enters the page where they're displayed. What I want is limit results to a specific amount then either have the page load more results when a user scrolls down or have them click a "load more" button similar to how it's done on both facebook and googleplus.
Currently I have comments scrolling down my page for miles and would like to use jQuery to take control of this. I'm guessing since each comment is stored in a div / class I could use this as a way of recognising what a comment is.
Anyway trying to figure out the best way to approach this I'd really appreciate some advice and maybe links to some good tutorials on how to pull this off.
I agree with the Ohgodwhy's comment - use will_paginate in Rails.
However, I'd also look at how to do scroll-down pagination, rather than page number links, depending on your design. I like Ryan Bates's screencast on this topic: http://railscasts.com/episodes/174-pagination-with-ajax
He also has a video for doing it without will_paginate: http://railscasts.com/episodes/114-endless-page (the newer, revised version of this requires a subscription).