I have a list of checkbox in a two tabs page, the problem I have is the page jumps to topscreen when I click on a checkbox in the first tab and this code gets called :
this.getOwnerComponent().setModel(mymodel,"mymodel")
If I navigate between the tabs and go back it doesn't happen anymore, this only happens when i click checkbox before navigating.
My checkbox :
<CheckBox app:mydata="a" select="onSelect" ></CheckBox>
N.B : this only happens if i'm trying to overwrites a model I created in Component.js (mymodel). If I set another model to the componentowner using another name it works fine
Related
I have a page having a classic report in an Oracle APEX application. The first column of each row is a checkbox. Also, I have added a checkbox in the first column of headers row. The purpose of this checkbox is to provide Select-All, Unselect-All functionality so that when I select the header checkbox, the checkboxes in all rows get selected, and when I unselect it, the checkboxes get unselected. Here is JQuery code that I use on the "change" event of the header row's checkbox:
if ( $( '#selectunselectall' ).is(':checked') )
{
$('input[type=checkbox][name=f01]').attr('checked',true)
}
else
{
$('input[type=checkbox][name=f01]').attr('checked',false)
}
The problem is that this functionality is working only for the first page, and only when it is first loaded. If I go to next page, this functionality no longer works, and also if I come back to first page, that functionality doesn't work even on first page.
Another problem is that when I select some individual checkboxes on first page, and then go to next page, and then come back first page, all the checboxes again come as unselected. It means the application doesn't remember user's selecttions when the user navigate out of page.
Can someone please help resolve these issues?
Try the following steps:
InteractiveReport - Columns - "Select" - Heading - "<"input type="checkbox" id="selectunselectall" onclick="$f_CheckFirstColumn(this)"">"
InteractiveReport - Attributes - Heqading - Fixed To - "None"
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.
I'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)
but I wonder if this has.
I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).
basically these are links to tabbed content on the about us page.
first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:
<a id="#learn-more-1" href="about-us.html#company-history"/>
<a id="learn-more-1" href="about-us.html#why-choose-us"/>
about-us.html has a tab container with two divs that are assigned the id's:
#company-history and #why-choose-us
and below these we have our content (a heading with the paragraphs containing respective info).
The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.
I'm at wits end trying to understand what I'm missing.
My question is, Is there a way for me to use jQuery on the about-us page, i.e:
$document.ready(function() {
* psuedo code here *
if the user arrived here via clicking learn-more-1 button
make the tab button #company-history ACTIVE
and scroll up 50px ( so we can see the damn button as it only shows
us the heading and paragraph content of the tab container..)
else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us ACTIVE
and scroll up 50px
};
Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.
Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?
Would appreciate some direction here folks cheers!
EDIT:
Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.
Some code to show you algoritm
$(document).ready(function() {
var tabId = window.location.hash; // get id of destination tab
if(tabId) {
$("#our-company-history").hide(); // hide default tab
var tab = $(tabId); // get destination tab
$(window).scrollTop(tab.offset().top); // scroll to destination tab
tab.show(); // display tab-content
}
});
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.
I have some weird behavior with jQuery paginate plug-in (jPaginate). I need to have top and bottom pagination and I want to sync them - whenever one is clicked, the second one should be properly changed as well.
I have two divs with number_pagination class and they are initialized the same way:
$(".number_pagination").paginate(options);
Now, here where it gets weird. Whenever I click on the top div, everything works as supposed to, but if I click on the bottom one, it changes the bottom one and does the pagination, but the top one stays the same. I cannot figure out why that could be happening.
Here's the onChange function that is supposed to change both pagination divs. Note the jQuery.fn.draw function that is a part of jPaginate. This is where it applies classes and style.
var opts=jQuery.extend({},jQuery.fn.paginate.defaults,options);
var o=jQuery.meta?jQuery.extend({},opts,jQuery(this).data()):opts;
jQuery(".number_pagination").each(function(){
var obj=jQuery(this);
jQuery.fn.draw(o,obj,page);
});
Found another solution that works perfectly.
It may even work for other pagination plug-ins. It checks the class that has the currently selected page number and checks if the content matches the selected NOW page, and if it doesn't, it looks for siblings that have the correctly selected page and triggers the click event.
jQuery(".jPag-current").each(function(){
if(jQuery(this).html() != page){
jQuery(this).parent().siblings().children().each(function(){
if(jQuery(this).html() == page){
jQuery(this).trigger("click");
}
});
}
});
You should probably look at using the onChange event to redraw the other pager that didn't incur the change