How to use the back button correctly? - javascript

I have a problem with back button in my app.
I mean I am using react-router-last-location to know my last page:
const backUrl = this.props.lastLocation ? this.props.lastLocation.pathname : MAIN_PAGE;
The problem is:
e.g. From main page "/" I clicked to "cards" and my route changed to "/cards", then I clicked to any card and my route changed to "/card/64531", then I clicked to information tab and my route changed to "/card/64531/info".
If I try to use back button from last page ("/card/64531/info") my route will be changed to "/card/64531". Then if I try to use back button my route will be changed to "/card/64531/info", and this will be change in a circle. How to fix it?

From the top of my head, I would implement a LIFO (Last In Frist Out) stack, where you push every url change to that stack and then take out the last elements from it on every back button press.
Just make sure you are not adding to the stack urls that are triggered by the back button.

Related

Handling updated content in static HTML with Selenium

I am using Selenium to automate our document downloading tasks. The function I have looks like this:
def download_csv()
i = 2
while True:
try:
button_main_page=wait.until(ec.element_to_be_clickable((By.XPATH,'/.../div[{}]/button'.format(i)))
button_main_page.click()
i = i+1
button2=wait.until(ec.element_to_be_clickable((By.XPATH,'/...')))
button2.click()
download_button = wait.until(ec.element_to_be_clickable((By.XPATH,'/...')))
download_button.click()
driver.back()
driver.back()
except:
Next_Page = wait.until(ec.element_to_be_clickable((By.XPATH,'/...')))
Next_Page.click()
download_csv()
The main page has a table containing 10 elements and a button for each. To download each document, I need to navigate to the download location by doing 3 clicks and return to the main page to repeat the operation for the next element in the table, after that I am looking to repeat it on the next pages.
My issue is after I download the first element on the second page and do
driver.back()
I get returned to the original first page and start accessing the same elements again. The page url doesn't change and there is nothing I see going off in the Network tab when I click on "Next Page" button. I believe the content update is triggered when the next page button is clicked, however I have very limited knowledge of AJAX/js etc to know where to start looking.
Is it possible to bypass something like this with Selenium? And how do I look for what is triggering the table content update, if nothing is displayed in the network tab during button clicking.
Thanks!

How to use a button to come back to the index, checking the pagination table of a specific ID?

I have this problem: I use Yii2 and, when I go to an index page, I select a view for an element (Example, I go to the page 4, because I want to enter in the view of the element with ID 41, which is at the page 4 because I have the pagination set to 10). This is ok for me but, when I enter in the view, I have this link to come back to the index:
<?= Html::a ( "Back", ['codici/index/','CodiciSearch[IDCodice]='=>$model['IDCodice']], ['class' => 'btn btn-primary']) ?>
Actually, this return to the index, but it show me only the record with the ID that I pass to the link. So, in this case, only the record 41. I want, instead, that the Back button turn to the previous page checking the pagination in which I was, and not only the ID. So, the link must checking the pagination of an ID. I hope to be clear. I don't need a solution like "window.history.go(-1)" because this create a problem if I came to the view by another way. I would to have a specific option: the link must to return to the index and get the pagination of an ID (so, in this ex. case, to the page 4).
I hope to be clear. Thank you in advance!!!!
Here are the solutions I use:
most times I just open the target page in a new tab. That is the simplest solution. If this is acceptable then simply add a parameter to the Html::a options as follows:
Html::a(“text”,[url],[‘target’=>’_blank’]);
Note: if the link is within a Gridview you need to set the format to raw (“format”=>”raw”)
on the index page, pass the pagination number to the new page.
Html::a(“text”,[url, ‘index_pagination’=>5]);
You can then use this in your button
instead of passing the pagination, you can capture the referring page and send the user back:
$url = Yii::$app->request->referrer
This is easy but it can cause challenges if the user reloads the page in which case the referring page is the current page.

jquery back button to previous category in sortable gallery

I have a jquery portfolio gallery with 4 categories which are sortable. When you click on a category the portfolio is rearranged on the same page through jquery showing only those project in that category. Upon clicking a specific project the user can then see the project page/details. I want to add a back button on this page so that when a user is viweing a project they can return to category they were at before.
I tired the following which creates the back button but it take me back to the main portfolio page, not the category which I was browsing before.
function goBack() {
window.history.back();
}
This is one of the gallery page just in case: http://goo.gl/JeSNjD
Not knowing any of your application's code, this is a bit of a shot in the dark but I think I know what you're probably missing.
Using the history.back() will take you to the last page you visited (a page visit is only recorded if the URL is updated). If you are updating content in your website with jQuery and not loading a new page, your browser's history doesn't record this so back takes you back to the top page still.
What you will need to do is change your back button code to hide the current project, and redisplay the category page. You cannot use history.back().
Edit:
If you need more data to correctly rebuild the previous page, you can either change the url for the category page (not necessarily simple to implement but perhaps the most robust thing to do), or to store information about what page they came from. If you are using cookies, you could save navigation there, but you could also add a ref value to the query string when you navigate to a project page.
Category page:
Link to project
Project page:
Back button
Then use that information to reopen or resort your categories.
One problem is knowing which category a back button should return to.
For example, /portfolio/foothill-pasadena-2 should route back to the office category and /portfolio/131house should route back to the Residential category. If I emailed you a link to one of those and you clicked it to go straight to the project page, should there be a back button on the page when you go to it and would it take you back to all categories or to the category related to the project?
One thing you could do is to change your permalink structure to include the category, such as /portfolio/office/foothill-pasadena-2 and /portfolio/residential/131house. Then your could hard-code your back button to go to /projects. You have some jquery running there (wp-content/themes/yourtheme/js/jquery.custom.js):
var isotopeContainer = jQuery('.portfolio-wrapper, .gallery-wrapper'),
isotopeFilter = jQuery('#filter'),
isotopeLink = isotopeFilter.find('a');
isotopeContainer.isotope({
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
filter : '.food-service'
});
isotopeLink.click(function () {
var selector = jQuery(this).attr('data-category');
isotopeContainer.isotope({
filter : '.' + selector,
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
animationEngine : 'best-available'
});
isotopeLink.removeClass('active');
jQuery(this).addClass('active');
return false;
});
That is finding the four category links inside your filter div and adding a click function.
Maybe you can add some extra code that would get the document.referrer, checks it for a match against yoursite.com/new/projects/{category}/{project}, and pulls out the value of {category}. If the category matches one of your four values (food-service, office, residential, other), then call the click function on that element.

Ember.js outlet's model change but the content not change

In my user controller,i use a outlet to render userLog section,and use controllerFor('userLog').set('model',App.UserLog.find(model.id)) to set the model of userLog,but i want to add a button to userLog section ,when user click it,it will load more logs,but i tried to push new object to its model,nothing happened.
here is the project address:https://bitbucket.org/magicshui/web/src/4ff895b5c22823c6ec1c1536ca2e7b59237f0459/assets/coffee/app/routes/?at=master
when you goto web/index.html#/users and then click one user name,it will show the section,because i haven't set all url correctly,so you should fill into the address bar this address directly.
the problem file is user.coffee and userLog.coffee
thanks for your help
you should be using pushObject instead of push that's how Ember catches that you've changed the array and updates the template

jQuery queue and trigger

I have a dynamic page and am trying to build dynamic links (domain.com/#/page2/content/etc).
If the person enters a link, let's say domain.com/#/2010/05/14 I want it to click on the element #2010. $("#2010").trigger("click");
Then after the function loads, click on $("#05").trigger("click");
See what I'm saying? As of right now it works perfectly for the first one, but the second click runs before the other can load.
You will need to build a function that runs at the end of the click function of $('#2010') that checks if there is another link to click. You could build an array of components at page load and at the end of each click function check if there are any more parts of the array, if there are trigger the next click. Each time you go through remove the element from the array so that it won't be used again.

Categories