I am writing a JqueryMobile and jquery based web application. I have three data-pages in my index.html . I am calling an web api in pageshow event of data-page in first page and filling the list view. and then by clicking on that list itam getting an id of that list item and moving to the next page and calling again the web api to get detail of that list item in page show event. and then i am again moving to the 3rd page from detail page to call another api. It is all working fine but problem is coming when i am moving back to detail page and then from detail page to index page. on moving back pageshow event of page is calling again and it is again calling the api in all pages. If i am use oncrete then it will only call api for the very first time.
Can any body tell me how to call api in this type of structure.
Have a look at this fiddle: http://jsfiddle.net/ezanker/tAB7x/
There are different ways to solve your problem, this is just one of them...
I have put the web api for filling the initial list in the 'pageinit' of the first page. This will run exactly one when you load the page. If you require refresh of this list, you could add a refresh button.Each appended item in the list links to page2 with a query string containing the item id. Then a click handler for the listview items is added to get the id of the clicked item and fill out the details form (page2) from web api (in the example I am just writing the id to a text box in page 2).
$('#page1').on('pageinit', function () {
//get list from web api (hardcoded for this example
var $ul = $("#dynamicList");
$ul.append('<li>A</li>');
$ul.append('<li>B</li>');
$ul.append('<li>C</li>');
$ul.listview("refresh");
$('.detailLink').on('click', function () {
var l = $(this).attr("href");
l = l.substring(l.indexOf('?') + 1);
var id = getUrlVars(l);
$('#detalText').val(id['id']);
});
});
Page2 has a button that links to page 3 and a click handler that fills out page 3 from web api (in the example I am again just writing the id to a text box in page 3):
$('#linkPage2').on('click', function () {
var id = $('#detalText').val();
$('#detalText2').val(id);
});
When you click the back button on either page, no code is run and the previous state of the page is maintained.
Related
I am working with this Template from templatemo.
I wanted to include some references to other parts of the website in the body text (e.g. Please "contact me" for further information). If you click "contact me" the page should navigate to "Contact" in the same manner as if the user clicked on the navigation bar to navigate to the page (with the same animation).
In order to so, i added the following code to trigger a click event:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:loadPage(5);">contact form</a></p>
And the function to trigger the click:
function loadPage(pageNo) {
$(document).ready(function() {
$('.nav-item').get(pageNo).click();});
}
So this code is working, if I click on the reference the page changes as if I clicked the navigation bar. BUT:
If I reload the page and click on the reference, the page navigates to the contact page, which then however is not diplayed properly (the contact form and the google maps view are missing).
If I reload the page, first open the contact page via the menu, then switch to the page with the reference and click on it, the contact page is loaded properly.
This behaviour is also shown if I reference another page (e.g. the Gallery). The gallery elements are displayed (the page is not completely empty), but the spacing between the elements is not correct.
It seems like every page has to be loaded at least once via the navigation bar. If this has happened, all pages are displayed properly when opened via a reference in the text.
Thanks for your support.
Your template use Hero slider + some customs JavaScript functions to move between "pages", so you need to use the same functions to get the same behaviour.
Doing that will work:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:goToPage('Contact');">contact form</a></p>
You need to add this JS function:
function goToPage(page_name) {
// Retrieve the <a> tag with the page_name
// page_name is the string of the page in the navbar
page_link_a = $('.navbar-nav .nav-link').filter(function(index) { return $(this).text() === page_name; });
page_link_li = page_link_a.parent();
// Trigger js code from hero slider
page_link_li.click();
// Trigger js code from templatemo
page_link_a.click();
}
The function goToPage() take one parameter, the string name of the section so if you have a section named My Gallery you need to put that, not my-gallery nor an index.
Its my first web application building with jsp , jstl using ajax as to make music player play throughout the site. i have many ajax req in single page . when i click on that its works all fine but when ever i refresh it takes me to blank content page in this code "Djpage.jsp" with out any content as requested in ajax i know as for url it will show but i researched a lot and tried but its not working and when i click button it does not respond only url is changed .
Need help and explanation how do i achieve this -
Show ajax data whenever refresh button is trigger.
Forward and backward button should work and show the ajax content.
Hope you get My problem
Below is on of my ajax req code -
$('li.box').on('click', function(){
$(this).children("form").submit();
var form = $(this).children("form");
var url = 'Djpage.jsp';
var Djname = $(form).children('input[type=hidden][name=inputName]').val();
$.get(url,{inputName:Djname},function(data){
$("#cssSlider").hide();
$("#tabscontainer").hide();
$("#dj_loard").html(data);
$("#dj_loard").show();
var newTitle = $(data).filter('title').text();
document.title = newTitle;
window.history.replaceState({html:"Profilepage.jsp"},null, url);
});
});
You can call functions (to make ajax request) on page load in order to fetch corresponding data of each section.
For e.g.,
$(function(){
// functions to be triggered on page load
abc();
xyz()
});
I have a menu with ~6 buttons, each that lead to the same page.
In that page, there is a drop down menu.
The purpose of the 6 buttons is that when one of those buttons is clicked, the page is redirected, and then the drop down menu opens to the correct tab.
However, all scripts are killed when a page is redirected, so I cant do something like this:
<body>
<a id="buttonID" onclick="GoToPage('buttonID')">All</a>
</body>
<script>
function GoToPage(buttonID){
redirect to page.html;
open menu to tab related to buttonID
}
</script>
Instead I would probably have to create a function that executes when the page loads, and then attempts to find from which button did it get there from, and opens the menu to the correct configuration based on that.
Should I use something like:
window.onload = ....
And how would I be able to pass which button redirected the page to this?
Opening the dropdown menu should be the responsibility of the destination page, not the source page. Since the server doesn't care about the dropdown menu state, send that information in the fragment identifier:
<a id="buttonID" href="page.html#all">All</a>
On the receiving end, you can retrieve the identifier with
document.addEventListener('DOMContentLoaded', (event) => {
let target = window.location.hash; // target = "#all"
// modify your menu as appropriate
});
The load event doesn't fire until the page has completely finished loading: images, stylesheets, everything. Modifying the dropdown menu doesn't require any of that, so use the DOMContentLoaded event instead. It fires when the HTML page has been loaded and parsed and is ready for DOM manipulation.
I am wanting to trigger a function that will display all events but only when the user comes from a URL with /events/ in it.
Right now I am using referrer to take the user back to the page and to scroll to the last event they clicked on. But if the event they clicked on has to be loaded by clicking 'view more' it will just scroll to the bottom of the page. I need all the events to collapse when the user hits the return button.
Any help is much appreciated!
You can achieve what you're trying to do with localStorage:
if(!!localStorage.getItem("isEventsInPath")) {
// user came from /events
}
var isEventsInPath = document.location.pathname.includes("/events/");
localStorage.setItem("isEventsInPath", isEventsInPath);
// keep the order intact!
You can use the following to parse the URL and call your function:
$(document).ready(function(){
if(document.location.pathname.includes("/events"))
{
//CALL YOUR FUNCTION
}
});
This parses the path name and checks if /events exists in it.
I have a blog category page to which I want to re direct from my one of my blog posts page and I want to simulate mouse click events which tells which category do they belong to i.e mouse click on the appropriate category in the blog page.I have achieved this on the blog page itself by means of jquery as follows,
function categoryNav(){
window.onload() = function(){
$('#item-0').click();
$('#item-0-0').click();
};
}
This works fine standalone on the page, but somehow I am not able to combine this with a href linking from my posts page i.e after a link click from the page this function is executed, in that case where the click always gets executed first before the redirect.
I have tried window.onload,document.onload,document.ready but nothing seems to work correctly.
What am I missing here?
On the first click, generate a url in the form www.myblog.com/?item-0. Then, on the target page (on DOM ready):
s = location.search;
if(s != '') {
var split = s.split('?');
var cat = split[1];
$('#' + cat + '').click();
}
In the case above, you should trigger a click on #item-0.