I have a JQM page with some events on html elements that will change DOM of the page. e.g. clicking a button will add a paragraph on the page. The page also have a link that will load another page via ajax. The new page have back button, but the problem is that when the back button is triggered, it will go to the previous page with the original content. What I want is to retain the modified DOM of the page. How can I do this with JQM?
Thanks.
Related
I am using primefaces 3.5, the latest release for our development work! In our homepage, we display the rows of data. When we click a row onRowSelect (SelectEvent) event we navigate to the next page with the Navigation Handler. On this landing page, I have a dataTable with expandable rows which has data in it. When I click the rowToggle icon the data is displayed in row expansion section (as it should normally).
What I need is to show the data automatically when page is loaded, with the rowToggler displaying down.
How can I achieve this?
This can be achieved using a bit of JavaScript (jQuery). All you have to do, is as your page loads call the click action of the RowExpander.
Something like this would work :
jQuery('.ui-row-toggler').click()
You can place this in your body onLoad attribute.
Source
http://forum.primefaces.org/viewtopic.php?f=3&t=8537
I am trying to load a page with transition effect on click of a link. I have used jQuery Mobile.
Below is my code.
Transition
On click of Transition link index.html page should be loaded showing transition effect.
Below is the output of index.html that I am trying to load.
But problem is that when I click Transition link the index page is not loaded as expected. The loaded page looks like below.
When I looked through firebug what is happening, I found that instead of loading complete page what transition is doing that it is putting output of linked page( i.e index.html) into first page and applying css of first page to it.
I want transition to load index page properly with its all css not to embed it into the page link is called from.
Can you please tell me how to achieve this.
In JQM by default when you link to another page JQM looks for the first JQM page (without any of the scripts or styles on that page)on that page (data-role="page") and then via ajax pulls it and enhances it and attaches it to the DOM of the current page. If you want to fully load the second page instead then you need to either set ajax-enabled to false (this is a global setting) or on the link to the second page add the attribute data-rel="extrenal".
Add in your html link tag the following attribute: rel="external"
Transition
I am new to jQuery Mobile. I am trying to move from page #one1 to #page2. #page2 contains an address book form. If I fill something in the form and click on the back button to move to #page1 and then I again move to #page2, the form will show all the previously filled data.
I want that when I go back to #page2 all the fields be blank.
I have also tried it with putting an alert. The alert will popup the first time but it is not showing when I revisit this page again.
$('#page2').live('pageinit',function(event){
alert("Edit");
});
Thanks
Vivek
In the button that shows up #page2, don't move right away to #page2, first call a function that clears the fields. And then you can move to #page2...
On an iPhone when you have a NavBar at the top, there is a back button.
Rather than say "Back" it has the title of the previous page in it.
So you might be on say the "Checkout" page. The title of the NavBar would be "Checkout" and the button might say "Books".
Clicking on the button that says "Books" takes you back to the previous page.
How can this be accomplished in jQuery mobile without the need to code in the name of the back button as you may have gotten to that page from a different route?
edit
I know I can do this on the page;
<div data-role="page" id="pageViewChallenges" data-add-back-btn="true" data-back-btn-text="previous">
But that makes the buttons text "previous" instead of the name of the page.
U can use
Books
(If u r using external page)
and
Books
(When using Internal page)
This is simple settings to customise back button and if u want previous page title as back button then simply get the title of back button through jquery method and set in the back button title.IF u can get the previous page title then set it on pageshow event by getting the id of back button using jquery like this:
$('#MaterialAndQuantityDetails')
.live(
'pagebeforeshow',
function() {
// page header Management
$('#bkbtnid').html("");
$('#bkbtnid').html(BackButtontext);
});
And if u r thinking how to get the title of previous page then on previous "pagehide" write the code
var BackButtontext = document.getElementById('previous_page_header_id').value;
Here BackButtontext is global variable that is to be used to set the back button text.
Can Any one explain how to refresh a parent page from child page in C#
We have a requirement like, we have a textbox followed by image popup button , If we click on Image popup button it will open one popup which has a textbox in it.
If we add some text in that and click on the save button , The parent page textbox has to be updated.
It's updating only when we manually refresh the page.We want a requirement like we have to updated it without any manual refresh.
Does any one know this?
Is it a "real popup"--literally a new window? Or is it a simulated popup with an HTML Element? If the latter--you need some Javascript. You can do this without reloading the page with jQuery by:
PARENT PAGE:
<textarea id="parent-textbox"></textarea>
CHILD POPUP:
<textarea id="child-textbox">This is some content I'd type in the popup</textarea>
<button onclick="$('#parent-textbox').val($('#child-textbox').val())">Click Me To Copy</button>
After it copies, you can close your popup and see the results--no page refresh required. Add jQuery to your site with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
For info on how to integrate jQuery into your site (it's very easy), see
http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
try this (javascript):
window.top.reload()