I use an external header for a Multi-Page Template JQM 1.4
$('#pageprostoriheader').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
$('#pagetestheader').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
In the header I have a button with ID gumbiskanje, that opens a popup dialog.
$(document).on('click', '#gumbiskanje', function(e){
var niz = $('#niziskanje').val();
prikaziiskanje(niz);
window.location.href = "#pageiskanje";
});
when i had only one page worked all fine, but now that i have multiple page. It only works on the first page in html, but on other pages it doesn't start the dialog.
Update
Popup div should be either place internally as a child of page div, or externally outside page div.
If placed externally, you need to call the below function in order to enhance/create it. Then you will be able to call it from any page.
$(function () {
$("[data-role=popup]").popup();
});
To call it
$(document).on("click", "#gumbiskanje", function () {
$("#popupLogin").popup("open");
});
Demo
If you have the same popup in each page with the same id, you need to call it from within the active page too.
$(document).on("click", "#gumbiskanje", function () {
var active = $.mobile.pageContainer.pagecontainer("getActivePage");
$(active).find("#popupLogin").popup("open");
});
Demo
Related
I'm having trouble delegating a click function to only certain links. Essentially, I'm trying to trigger a simple fadeout for all internal links that won't kill a lightbox functionality. Here's my problem (in essence):
HTML
<body>
<div id="fade">
<p>some content</p>
</div>
</body>
jQuery
$("#fade").on("click", "a", function () {
// get the href attribute
var newUrl = $(this).attr("href");
// veryfy if the new url exists or is a hash
if (!newUrl || newUrl[0] === "#") {
// set that hash
location.hash = newUrl;
return;
}
// now, fadeout the html (whole page)
$("body").fadeOut(function () {
// when the animation is complete, set the new location
location = newUrl;
});
// prevent the default browser behavior.
return false;
});
I can't figure out why this isn't working. The function isn't executed on any links. I'm trying to delegate it to all links within the wrapper id of "fade."
When I change
$("#fade").on("click", "a", function () {
to
$("document").on("click", "a", function () {
//specifying all links
The fade works perfectly, but it destroys the lightbox function that is needed for the site.
Is there a better way to delegate links for this event? Or perhaps not include the lightbox links in a different manner? Ideally I would keep the code above for executing on all links using $("document") and exclude the lightbox gallery from the function, but I don't know how I could do that.
I am having a little problem using javascript-ajax here. In my page, I load in the content into one of the div with id content in an ajax manner, whenever the user clicks on links which have the class myajaxreq, and the contents are loaded into the div in a fade in manner. The javascript that I am using is this
$(document).ready(function(){
$("#content").load($('.myajaxreq:first').attr('href'));
});
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
$('#content').hide().load(myhref).fadeIn('slow');
return false;
});
All works great on localhost, but when i put it online and then when we click on these links, then: First the same content which was initially there in the div is loaded in fade in manner. After a few seconds, the new content is loaded.
I think I am missing some sort of
if(content document is ready)
then load in a fade in manner
and so on..
Please somebody help me out here !!
call fade in after success callback... try this
var jContent = $('#content').hide();
jContent.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
here the whole code (untested)
$(document).ready(function(){
var jContent = $("#content").load($('.myajaxreq:first').attr('href'));
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
jContent
.hide()
.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
return false;
});
});
I'm trying to use Phantom.JS to do some page automation on this page: https://reserve.apple.com/GB/en_GB/reserve/iPhone
I know how to use document.getElementById('store') = "R363" to choose the first option. But it seems after I've chosen the first option, the DOM element of the original page will change and I don't know how to achieve that using Phantom.JS
Instead of using document.getElementById('store') = "R363" try using jQuery instead like so:
var page = require('webpage').create();
// open the page
page.open('https://reserve.apple.com/GB/en_GB/reserve/iPhone', function() {
//inject jQuery
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
// run the following code in the context of the page
page.evaluate(function() {
// change the value of the combobox
$("#store").val( newval );
// do stuff in the page
});
phantom.exit()
});
});
I want to separate these functions. They should both work separately on click events:
FIRST FUNCTION
$("ul.nav li").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
ACTION A
});
$(window).trigger('hashchange');
});
SECOND FUNCTION
$("ul.subnav li").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
ACTION B
});
$(window).trigger('hashchange');
});
This is what happend in ACTION A:
$mainContent
.find(".maincontent")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " .maincontent", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$(".nav a").removeClass("active");
$(".nav a[href="+newHash+"]").addClass("active");
});
});
The Problem is that if I click the Link of the Second function always the the first function fires.
Details of what I'm trying to do:
First, I build my site on .php to serve poeple without JavaScript. Now I want to load the "maincontent" dynamically. So I found this script I'm using:
http://css-tricks.com/6336-dynamic-page-replacing-content/
It does do a great job if you only want to load "maincontents".
But my site has sub-navigation on some pages where I want to load the sub-content. In .php these sites use includes. So I get my content by: href="page2.php?page=sub1"
So, when I click on the sub-links now they load also dynamically but the script also on the whole maincontent loading area. So it doesn't really load content by .load() but the sub-content of the includes do appear.
So what I thought was just to separate this function. The first to simply load the maincontents and a second one for the sub-navigation to refresh only the sub-content area. I don't even understand how this script loads the include content dynamically since the link is the straight page2.php?page=sub1 link. All dynamic loaded content usually looks like "#index", without the ending ".php".
Some quick history:
I'm trying to get the best page structure. Deliver .php for non JavaScript user and then put some dynamic loading stuff over it. Always with the goal to keep the browser navigation and the browser links (for sharing) for each page in tact.
I'm not an jQuery expert. All I have learned so far was by trial and error and some logical thinking. But of course, I have a lack of fundamental knowledge in JavaScript.
So my "logical" question:
How can I tell the "nav" links to perform only their "$(window).bind"-Event and to tell the "subnav" links only to perfom their "$(window).bin"-event.
Is this the right thinking?
Since I've already been trying to solve it for nearly the last 18h, I'll appreciate any kind of help.
Thank you.
IMPORTANT:
With the first function I not just only load the maincontent but also I'm changing a div on the page with every link. So for any solution that might want to put it together in one, it won't work, cause they should do different things on different areas on the page. That's why I really need to call on the window.bind with each nav/subnav click.
Can anyone show me how?
Melros,
In your second function, you are binding to the event hashchange2, which is incorrect. Instead, you STILL want to bind to hashchange. Instead of:
$(window).bind('hashchange2', function() {
...
});
Try:
$(window).bind('hashchange', function() {
...
});
If you want to namespace your event subscriptions, you can suffix the ending of the event you are binding to with a period (.) and then the namespace:
$("#test").bind("click.namespace1", function() { });
$("#test").bind("click.namespace2", function() { });
Ok, it seems that you want to execute action A when a link inside .nav is clicked, and action B when a link inside .subnav is clicked.
You can just put these actions inside the event handlers. Furthermor, if .subnav is nested inside .nav, you have to restrict your selector:
// consider only direct children
$("ul.nav > li").delegate("a", "click", function() {
var href = $(this).attr("href");
if(window.location.hash !== href) {
Action A
window.location.hash = $(this).attr("href");
}
return false;
});
// consider only direct children
$("ul.subnav > li").delegate("a", "click", function() {
var href = $(this).attr("href");
if(window.location.hash !== href) {
Action B
window.location.hash = $(this).attr("href");
}
return false;
});
I don't think listening to the hashchange event will help you here, as this event is triggered in both cases and you cannot know which element was responsible (you probably can somehow, but why make it overly complicated?).
Here's by the way the solution I came to:
After understanding that the haschange-event doesn't have to do anything with it (as long as you don't want to make the subcontent bookmarkable too) I just added a new load function for the subcontent:
$(function(){
$("ul.linkbox li a").live('click', function (e) {
newLink = $(this).attr("href");
e.preventDefault();
$(".textbox").find(".subcontent").fadeTo(200,0, function() {
$(".textbox").load(newLink + " .subcontent" , function() {
$(".subcontent").fadeTo(200,1, function() {
});
});
$("#wrapper").css("height","auto");
$("ul.linkbox li a").removeClass("activesub");
$("ul.linkbox li a[href='"+newLink+"']").addClass("activesub");
});
});
});
I have a page which displays multiple blocks with results details. Inside each block I have some <a> tags with thickbox jQuery plugin attached: class="thickbox"
Here is an example of one kind of ampersant tag:
<a class="thickbox" title="Please Sign In" href="userloginredir.php?height=220&width=350&deal=3">
Problem comes when I added a jQuery pagination to the page because of too many results displaying on the page.
The div component with the results inside is updated through ajax load() event.
Below is the pagination script:
$(document).ready(function(){
//References
var pages = $("#menu_deals li");
var loading = $("#loading_deals");
var content = $("#content_deals");
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
//Manage click events
pages.live('click',function(){
//show the loading bar
showLoading();
//Highlight current page number
pages.css({'background-color' : ''});
$(this).css({'background-color' : 'yellow'});
//Load content
var pageNum = this.id;
var targetUrl = "ajax_search_results.php?page=" + pageNum + "&" + $("#dealsForm").serialize() + " #content_d";
content.load(targetUrl, hideLoading);
});
//default - 1st page
$("#1").css({'background-color' : 'yellow'});
var targetUrl = "ajax_search_results.php?page=1&" + $("#dealsForm").serialize() + " #content_d";
showLoading();
content.load(targetUrl, hideLoading);
});
When I added pagination (code above), the thickbox events are not recognized anymore and instead of poping out a window with the login form inside it opens the results in new page (is acting like clicking on a normal link)
From my jQuery knowledge this means that the components are not defined in the DOM because the content is updated after document ready triggered.
I'm trying to bind the load event with something like this:
content.bind('load', ???);
But I don't know how to pass the load params, targetUrl and the callback function hideLoading, when binding the load event.
Please help me out in this matter, it already took me more time than possible allowed.
tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
call that in the callback of the ajax.
You have used the hideLoading function as the callback, instead replace it with this where you intialise the thickbox and also hide the loading.
content.load(targetURL, function(){ tb_init('a.thickbox'); hideLoading(); });