I have an xhtml page with a set of panels stacked one above the other. Each panel has a datatable with a particular column as a hyperlink. When I click on the hyperlink in the first data table, the second datatable is rendered. When I click on the hyperlink in the second datatable, the third datatable is rendered. I wanted my page to scroll down and display the newly rendered datatable in the center of the screen and not load the page back to the top of the screen. How can I achieve it. below is the code that I have written to achieve that, but with no luck.
Each of the hyperlink in the table has the following code written,
<p:commandLink value="#{abc}" action="#{myBean.myFunction}"
ajax="false" oncomplete="focusPanel3()">
<f:setPropertyActionListener
target="#{myBean.xyz}" value="#{abc}">
</f:setPropertyActionListener>
</p:commandLink>
The javascript is as follows
function focusPanel3() {
var el = document.getElementById("panel3");
el.scrollIntoView();
window.scroll(0, 1200); //Also tried this line. No luck even then
}
In my Bean, i am setting the rendered attribute of the next panel to true.
You can check jQuery smooth scroll out, this answer can guide you. Or jQuery scrollTo plugin and this answer includes a basic demo as well. Do not forget giving the correct HTML generated cliend ID when you are using document.getElementById.
Related
I have tried with the following ideas, but it all has few issues:
Idea #1:
var $oTable = $('#table').DataTable();
$oTable .settings()[0].oFeatures.bPaginate = !($oTable .settings()[0].oFeatures.bPaginate);
$oTable.draw('page');
Issue: It toggles the pagination but page-numbers at the bottom remains as it is. For example, if the datatable has pages with pagination, and we toggled the pagination it toggles fine but the div at the bottom of datatable that contains all the 5 page-numbers of the table, doesn't hide. I need to write extra code to hide the div that contains page-numbers.
Idea #2:
var $oTable = $('#table').DataTable();
if ($oTable.page.len() == -1) {
$oTable.page.len(10).draw('page');}
else {
$oTable.page.len(-1).draw('page');}
Issue: It toggles the pagination but page-numbers at the bottom of the table doesn't hide. Considering the example of last scenario, in this scenario it becomes one page instead of 5 pages. But the problem is the div containing page-numbers remains visible. Again, I need to write extra code to hide the div that contains page-numbers.
Please help me out so that I can toggle the pagination of the datatable and at the same time the div containing page-numbers gets hide.
The developer says that
There is no option to enable and disable features in DataTables on-the-fly at this time
here: https://datatables.net/forums/discussion/35146/on-the-fly-change-of-option so I guess that settles that.
I had a gridview in a webform, with javascript for scrolling the selected item into view; worked fine.
Then I moved the gridview to a user control, got it to work except for the scroll into view.
Here's how the scrollintoview works, or used to work.
On gridview.itemselected, a unique value from the selected row is stored in a hidden field.
$(document).ready on the main page calls a javascript "scrollintoview" function.
The scrollintoview function gets the value from the hidden field, finds that value in the gridview, identifies the vertical location of that value, does a scroll to the appropriate vertical position, and sets the background-color of the gridview row to light yellow.
Again, that worked fine when the gridview was in the main form.
Now, with the gridview in the user control, the javascript executes correctly (I can watch it during debug), but when the gridview appears on the page, it has not scrolled.
So, maybe somewhere in the sequence of events, the gridview is being rendered after the scrollintoview has taken place?
Any suggestions on how to get this to work would be appreciated. Thanks!
This can be tricky. The way I've done it is to place the gridview in a div which looks like this:
Then in function setScrollValue the hiddenfield value is set to divGvMD.scrollTop.
When the page refreshes divGvMD.scrollTop is set to the hiddenfield value.
I managed to get some js to work to my surprise, now I want to make it a little more complex which is way out of my expertise.
I have a button when clicked will reload a iframe that is on my page. I have multiple iframes all but 1 are hidden. Then I use jquery to display a different iframe and hidden the previous depending on the nav button clicked. e.g. "1-btn" (nav btn) tied to "1-win" (iframe), "2-btn" (nav btn) tied to "2-win" (iframe) etc. So when you click "2-btn", "1-win" iframe hides and "2-win" iframe is displayed. Now I want to change my code so this ties into my reload javasrcipt. Currently, my js only reloads 1 iframe via the iframe id. I want to change this id every time to a different iframe. This will allow my Reload btn to only reload the current iframe displayed and not any of the other that are hidden.
Here is my Reload js
function Reload () {
var f = document.getElementById('1-win');
f.src = f.src;
}
As you can see this reload script only works for iframe "1-win". When i click "2-btn" nav to display "2-win" iframe (and hides "1-win") the reload button still only works for "1-win". Therefore, I want it to also change. For e.g. when I click "2-btn" (nav) to display "2-win" iframe I want to change the Reload id to "2-win" also.
I was thinking of using onClick within my nav buttons which passed through the id of the iframe which that nav btn is tied to. However, I have no idea how to do this.
For full code see:
https://github.com/tmacka88/Service-Manager
Sorry if this doesn't make any sense, I cant think of an easier way to explain it.
Thanks
EDIT
This below answer may or may not still apply now that the problem has been better defined.
One approach you could try is having a hidden field on the page which contains a semi-colon separated list of the Id's of the iframes. E.g.
<input type="hidden" name="iframeids" value="1;2;3;4;5">
On the click event of your button, call some JavaScript which gets the value of the hidden field, takes the first token before the semicolon, and then reorganise the string. An example:
// Next value is 1
// Use 1 in your JS
// Put 1 to the end, next is now 2
<input type="hidden" name="iframeids" value="2;3;4;5;1">
You would contain the logic of re-arranging etc. in the JS function.
Now that the problem is better defined, we can work out a proper solution.
Here are some design considerations:
Ideally you do not want to manually add a new button for every iframe that you put on the page. Main reason being code maintenance. If you were to add a new iframe, or remove one, your code would not function correctly. Also the amount of mark-up required will be unnecessarily high
jQuery will make your life easier, although it's not required, it will cut out a lot of code. I can't stress enough the importance of knowing JavaScript basics first, but this is your responsibility to learn
For point 1, what we would like is a generic solution so that if you add more iframes, the buttons are added automatically. JavaScript is the way to do this (I'm assuming this is just HTML, not ASP.net or php or some other server side
Point 2 - jQuery will help with point 1.
Now we have this understanding, let's look at an outline of what we need to do:
In JavaScript, loop through the iframe tags on the page
For each iframe, generate a button using jquery, using the values like src and id in the iframe as attributes on the button
Add some click-event code to the button do define what it needs to do when clicked
Again using jQuery, add the newly created buttons to the DOM
This did the trick:
function Reload()
{
$("iframe").each(function()
{
if($(this).is(':visible'))
$(this).attr('src', $(this).attr('src'));
});
}
So this one is baffling me and I'm hoping someone has encountered it. I've checked this site for answers but haven't found the correct answer.
I'm using Bootstrap 3.1.0, and I have a page that has tabbed content, each of which is holding dynamically generated tables. Within those tables, I have dynamically generated content that has a link - and on this link, I am attempting to generate a tooltip.
This makes the structure of the element as such:
-A Tab
--A Table
---A Row (tr)
----A Cell (td)
-----A link (a data-toggle="tooltip" id="{dynamically generated based on content}" class="specificClassName")
I've put the scripts before the closing body tag.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{{url_for('static', filename='js/bootstrap.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
});
I'd link all of the code but it's dynamically generated so I am not sure it would make sense. Ideally, I would like the tooltip to be placed to the right of the link, but I thought perhaps it was attaching itself to the wrong element as a "parent" and not showing up as a result, which is why I changed the placement to top.
Note: I've also tried the class name instead of data-toggle=tooltip, but this did not produce any different results.
The rest of the bootstrap items work- the tab functions correctly, the tables show up as desired. The tooltips are the only item that isn't functioning as intended.
Short Answer: I can't do what I'm trying to do. Or I could, but it's a bad idea. So I'm going to just write custom JS.
Long(er) answer: You have to include a title in a bootstrap tooltip, but the title is the tooltip content. My tooltip content is a dynamically generated div and div content, and I don't want that to be the value of the title property.
I have an ASP page which consist of a table that is generated with the ASP script. I am now populating the table values from a RSS feed by parsing items in it.
The RSS feeds consist of some Job Vacancies data. The items are: date, JobID, Title, Location, Category, Apply Link.
I have one requirement to make a mouseover to the Job Title. When mouse over to the Job Title, a small popup will display and shows Job Description from the RSS feed. The table is showing all the entries and mouse over is also working perfectly after page fully loads.
The problem is during the page load (before the page fully loads) if a user mouse over the job title in the first row, then the mouse over will shows the first entry, but it affects the last entries. The last entry Job Titles will not displays the description when mouse over. "Firefox error console displays the variable description undefined".
How can I rectify the problem??
One way is to not set the mouse over before the pages loads fully. for that use the body.onload event
rough eg:
<body onload="document.getElementById('jt1').onmouseover = showJobDesc;">
<a id="jt1"> JobTitle </a>
</body>
The other way is to set a flag in the body.onload evetn and modify the mouseover code to execute only if that flag is true.
rough eg:
<body onload="var myPageLoaded = true;">
<a onmouseover="if(myPageLoaded==true) showJobDesc();"> JobTitle </a>
</body>
The issue is solved perfectly by setting the below condition
to the mouseover function content.Thanks for the suggestions.
if(document.readyState=='complete')
{
//code
}