I wrote my first app using nodejs,reactjs and spring using this tutorial and all went fine except for the buttons that are not working as expected because when I click on them, the link is updated in the browser address but the page is not loaded until I press F5 to reload.
Is hard to explain without an image so I attached a print screen with some text.
So I can add customers, delete and edit... but after every click on a button, I must press F5 to actually load the destination page. I tried this in Chrome, Edge and Opera and in all browsers the behaviour is the same.
This seems to be very basic but I don't know what to search on google to fix it, I tried to search documentation about the button tag but in everything I read I can't even find the attributes listed in the tutorial.
The button syntax is "<Button size="sm" color="primary" tag={Link} to={"/clients/" + client.id}>Edit" and attributes like "tab" and "to" don't seem to be documented in the reactjs documentation.
I think you should use Link in react router
and also check you api if their syntax is correct
Why not use the useHistory hook with Button onClick. Seems like there is no to prop in reactstrap documentation. You need to convert your container component using the Button in to functional component though.
import { useHistory } from "react-router-dom";
import { Button } from 'reactstrap';
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push(`/clients/${client.id}`);
}
return (
<Button size="sm" color="primary" onClick={handleClick}>Edit</Button>
);
}
After more searching I found the answer here:
Link tag inside BrowserRouter changes only the URL, but doesn't render the component
Thank you.
Related
I am trying to copy the embed code from a single Instagram reel by clicking the ... menu and clicking Embed. However, the code never loads and I get this screen. Anyone know a workaround to embed an Instagram reel on a website? The specific reel is: https://www.instagram.com/reel/Cd56By5FxBF/
See screenshot for what loads when I try to use to embed function on instagram. I have tried on multiple browsers.
Thanks
The integration code is made up of two elements. A long <blockquote> followed by a short <script>.
The <script> element should look something like this:
<script async src="//www.instagram.com/embed.js"></script>
Just add https: to the value of the src attribute, thus:
<script async src="https://www.instagram.com/embed.js"></script>
And everything should be working fine.
I am messing around with React.js for the first time and cannot show or hide pages when I click button and outside click. I am not loading any other library to the page, so I am looking for some more code to using . This is what I have so far. I would like
enter image description here
U can do something like this maybe
const [pageFlag, setPage] = useState(false) // default value is false
onClick={() => setPage(!pageFlag)} // toggle
Hey I'm trying to scroll the amazon offers page using puppeteer but it is not scrolling and there is no mouse event happening.
This is the offers page URL.
https://www.amazon.com/dp/1416545360/ref=olp_aod_early_redir?_encoding=UTF8&aod=1
This is the selector I'm trying to scroll on the above page. #all-offers-display-scroller
I would appreciate your help regarding this.
I need to use the puppeteer own methods to serve this purpose.
You can use pressing space on main scrollable element. Ideally it works in most of the sites just by pressing space you can go down
Here's the code for the page you given,
const element = await page.$('#aod-container')
await element.press('Space')
the HTML Element looks like
<div class="toggleButton" ng-class="{checked: settings.$storage.enabledApps[app.name]}" ng-click="settings.apps.toggleApp(app.name)"><input class="workplayEnabled switch" type="checkbox" ng-checked="settings.$storage.enabledApps[app.name]"></div>
i tried browser.click('.toggleButton .switch'),browser.click('.toggleButton'), browser.click(' .switch')
but it's not working
it throws the error as element not visible
whereas if i try browser.isSelected('.toggleButton .switch'),browser.isSelected('.toggleButton'), browser.isSelected(' .switch') it returns false
As it stands, it's really hard to pin-point your EXACT problem as you're doing multiple things wrong.
HTML breakdown:
that is HTML generated via AngularJS;
if you analyze the Angular attributes (ng-attributes/directives) you'll notice only your <div> has click-triggered functionality added (via ng-click="settings.apps.toggleApp(app.name)"), thus you only have to target the <div> element;
the <input> only has reactive behavior (if the toggle-button is checked, then it gets populated on ng-checked trigger);
Your problem: Now that we narrowed down the solution to clicking your <div>, we need to make sure your selector is returning the correct element.
open your Angular app, open the browser console & try seeing if your selector is working (e.g.: $(div.toggleButton)). If the CSS-selector returns more than an element($(div.toggleButton).length > 1), that means you have multiple <div>s with that class so you will have to find a more specific locator;
after you have found the correct locator for your <div>, I would add a .debug()(more info here) prior to your click in your WebdriverIO script so I could easily debug the scenario;
once in debug-mode, I would try with the same selector that found my element in the browser console.
!!! Note: .isSelected() will always return false in your scenario as you mentioned you failed to click the toggle switch, which is satisfying the ng-checked condition. You can verify this by manually selecting your toggle switch in debug-mode and then performing the .isSelected() command on your <input>. Then it should return true.
I'm using ajax in Rails 4 to load this form. Using select2-rails gem, it renders properly when the document loads:
After I click update, it loads the view partial:
but when I click on edit, the styling doesn't show up, and only the default bootstrap styling shows up:
How do I get this last image to show the select2 styling from the first image? I think it has to do with how select2 styling is loaded when the document is first loaded, but would appreciate a solution. Here is my stylesheet below:
$(document).ready(function(){
$("#e9").select2();
})
Allen:
Hello again by the way...
I had a similar problem in rails 4 and it had to do with turbolinks.
link: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#how-turbolinks-works
In your JS file change your document ready to the function name below, then add the two commands just below the function, which are also below. This may be your issue as well because your page initially loads correctly, however when turbolinks is working, it tries to load only previously loaded files to quicken the load process and may skip your document ready function. Let me know if this helps... (Jake - DBC).
var select2Gem = function(){
$("#e9").select2();
};
$(document).ready(select2Gem);
$(document).on('page:load', select2Gem);