i have a problem with jQuery and jQueryMobile.
I have a site with 2 pages:
<div data-role="page" id="main">
<div data-role="header">
header1
</div>
<div data-role="content">
<a id="1" href="#detail">link</a>
</div>
</div>
<div data-role="page" id="detail">
<div data-role="header">
header2
</div>
<div data-role="content">
<div id="foo">content2</div>
</div>
</div>
when i press the link i save the id with jquery:
$(document).ready(function(){
var test = 0;
$('a').click(
function ()
{
test= $(this).attr('id');
}
);
});
to this point, everything is fine. the problem is, when i want to read out the var test after i clicked the link, it is not saved anymore.
what can i do to prevent this?
i want to make something like this:
$('#foo').html(test);
jQM Docs:
http://jquerymobile.com/demos/1.0.1/docs/api/events.html
Important: Use pageInit(), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as
the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
I would also suggest reading on var Scope and Closures in JavaScript
Related:
Why the variable is out of scope?
Reading from your comment you need to use pageInit. Have you tried
$( '#main' ).live( 'pageinit',function(event){
var test = 0;
$('a').click(
function ()
{
test= $(this).attr('id');
}
);
});
var test = 0;
$('#main').live("pageshow",function(event){ //or pageinit, or pagecreate
$('a').click(
function ()
{
test= $(this).attr('id');
}
);
});
Related
I have this :
window.onload = function() {
$("#show").load("show.php");
}
and my html :
<div id='loader'>Loading Data</div>
<div id='show'></div>
<div id='other'>some text.........</div>
What I want is, on page loaded, html show <div id='loader'> and <div id='other'> when JS/JQuery success loaded the <div id='show'> then hide <div id='loader'>
Can you help me?
.load() provide a callback you can use this. Just updated your js with following
$("#show").load("show.php", function(){
$('#loader, #show').toggle();
});
as #techLove's comment here, I found this working on me. I modified his answer into this:
$( "#show" ).load( "show.php", function() {$("#loader").css("display","none");});
load() has a callback that runs when it is complete. Use this to show and hide the relevant divs. You should also use jQuery ready function instead of window.onload so that the page won't have to wait for all resources (images etc) before it can load in the php:
$(document).ready(function() {
$("#show").load("show.php", function() {
$('#loader').hide();
});
});
EDIT: Super User's answer provides a better solution than using .hide(), wish I'd thought of it!
I've found here, on Stackoverflow, function, which should toggle between multiple divs. I tried it in JSFiddle and it worked. But for me, on website, it doesn't work. I am really not good at javascript / jQuery, so I will be really glad for any help! And one more thing - is it possible to set link, that I just clicked on add class "active", that it would have underline or something, to see which section is selected??
Thanks!
-- FIDDLE HERE: https://jsfiddle.net/vkmw86bp/
Code is below.
HTML:
<div id="sluzby-nabidka" class="section">
<div class="sluz">div 1</div>
<div class="sluz">div 2</div>
<div class="sluz">div 3</div>
<div class="sluz">div 4</div>
<div class="sluz">div 5</div>
</div>
<div id="text-sluzba" class="section">
<div id="slidingDiv" class="slide-div">1</div>
<div id="slidingDiv_2" class="slide-div" style="display:none;">2</div>
<div id="slidingDiv_3" class="slide-div" style="display:none;">3</div>
<div id="slidingDiv_4" class="slide-div" style="display:none;">4</div>
<div id="slidingDiv_5" class="slide-div" style="display:none;">5</div>
</div>
JS:
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide',
slideDiv: '.slide-div'
};
var options = $.extend(defaults, options);
return this.each(function () {
$(this).click(function () {
$(options.slideDiv).hide();
// this var stores which button you've clicked
var toggleClick = $(this),
toggleDiv = $(this).data('slide-id');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).fadeToggle(options.speed, options.easing, function () {
// this only fires once the animation is completed
// if(options.changeText==0){
//$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
//}
});
});
});
};
$('a').showHide({'slideDiv' : '.slide-div'});
Since I don't have enough reputation yet to add a comment, I'll speak to the issue and then ask for more information, if necessary.
When I loaded your JSFiddle, it didn't work because a JQuery library was not included in the fiddle itself. Once I switched the Frameworks & Extensions selection to any JQuery library, I hit Run and it worked. So this, IMO, means that your JQuery import is either in the wrong place in the HTML DOM, or you're not waiting for the DOM to be ready before hitting the code you provided. Som examples:
<html>
<head>
<title>
</title>
<!-- normally, JQuery script gets added here -->
<script type="javascript" src="path/to/jquery.js"></script>
</head>
<body>
<!-- then, import the above code here, either as a separate JS file or inside some <script></script> tags -->
<script type="javascript" src="path/to/showHide.js"></script>
</body>
</html>
Also, you should wrap the code you provided with:
$(document).ready(function() {
// Your code here
});
This will ensure that the JQuery code doesn't execute until the DOM is loaded. It seems to me that your code is running before the DOM is ready so the lookup isn't finding any anchor tags to attach the showHide functionality to when you make this call:
$('a').showHide({'slideDiv' : '.slide-div'});
PHPstorm spoiled my files just now, so I have to rework everything. And for some reason I can't get this working - click event just don't happen at all, neither with $("body"). It does work with $(document).on(...) though.
(script is inside head and script tags)
$("#cover").on('click',function(e) {
$(e.target).removeClass("no");
$(e.target).addClass("yes");
});
<body>
<div id="button"></div>
<div id="cover">
<div class="rows" id="row1"></div>
<div class="rows" id="row2"></div>
<div class="rows" id="row3"></div>
<div class="rows" id="row4"></div>
<div class="rows" id="row5"></div>
<div class="rows" id="row6"></div>
</div>
</body>
Code is executed in the order in which it's found on the page. So this:
$("#cover")
Needs to be executed after this is added to the page:
<div id="cover">
Otherwise that element won't be found by that selector, because it doesn't exist yet.
One approach is to move the JavaScript code to the bottom of the page. (Or at least to after the target element exists.) Another is to wrap it in the jQuery function which will attach it to the document's ready event:
$(function () {
// add your code here
// this will execute after the DOM is completely loaded
});
Try doing this. It will execute once your DOM is ready.
$(function(){
$("#cover").on('click',function(e) {
$(e.target).removeClass("no");
$(e.target).addClass("yes");
});
});
You could try reverting your changes in PHPStorm by right-clicking the folder, navigating to Local History -> Show History -> right click file(s)/folder(s) and select Revert Changes.
If that doesn't work do the following:
Move your javascript to the bottom of the page
Wrap the click with $(document).ready(...)
For debugging purposes do console.log($("#cover")); as your first line before binding a click event to see if jQuery object length is 1 or 0. If 1 the element is matched and found, if 0 then element doesn't exist or no match found.
I'm generating pages dynamically in jQueryMobile, but I can't understand why the new generated page is not updated to the last version.
This is the use case:
Page A contains a list of 'a' elements. When I click one, the app redirects to a new page that is generated dynamically. Then I go back to page A. I click another 'a' element, but from now on, the app will always redirect to the first page that was dynamically generated.
Please look at this fiddle:
http://fiddle.jshell.net/cqUrD/
This is my code:
HTML
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>static page</h1>
</div>
<div data-role="content"> Create new page
<div data-role="content"> Create another new page
</div>
<div data-role="footer" data-position="fixed">
<h1>footer</h1>
</div>
</div>
jQueryMobile:
$(document).on('click','a',function() {
nameId = $(this).attr('id');
page = '<div data-role="page" id="page" data-theme="e"><div data- role="header"><a data-role="button" href="#" data-rel="back" data-icon="back" data-iconpos="notext">back</a><h1>Dynamic page</h1></div><div data-role="content"> Last id was: '+nameId+'</div><div data-role="footer" data-position="fixed"><h1>footer</h1></div></div>';
//alert(nameId); this prints the right value
$.mobile.activePage.after(page);
$.mobile.changePage('#page', {
transition: 'flip'
});
});
How can I solve this problem? I need to always show the updated version of the new page.
Thanks in advance!
Working example: http://jsfiddle.net/Gajotres/Xfh8p/
Before new page is created previous one must be removed. In this case a DOM was filled with new pages but first one was still there and because they all had same name that first one had a priority.
Also when binding a click event don't bind it to a tag only, this was also a problem. Each time return button was pressed another page was created in DOM.
All in all this will work:
$(document).on('pageinit', '#home', function(){
$(document).on('click','#createfirst, #createanother',function() {
nameId = $(this).attr('id');
alert(nameId);
page = '<div data-role="page" id="page" data-theme="e"><div data- role="header"><a data-role="button" href="#" data-rel="back" data-icon="back" data-iconpos="notext">back</a><h1>Dynamic page</h1></div><div data-role="content">'+nameId+'</div><div data-role="footer" data-position="fixed"><h1>footer</h1></div></div>';
$.mobile.activePage.after(page);
$.mobile.changePage('#page', {
transition: 'flip'
});
});
});
$(document).on('pagehide', '#page', function(){
$(this).remove();
});
In this case pagehide event has been bound to dynamically created page. Because it is bound to the document object it will still be there when page is removed. It tells jQuery Mobile to remove page #page during the transition from it.
As you can see I have used jQuery Mobile page events to trigger a page removal. If you want to find more about this topic take a look at my other ARTICLE (my personal blog) or find it HERE.
When you are clicking the button second time, the page with same ID is already in DOM so I think jQuery is unable to create a second one with the same ID (maybe caching). I changed the code a bit. You need to remove the #page if it already exists.
if ($('body').find('#page').length != 0) $("#page").remove();
Link: http://fiddle.jshell.net/cqUrD/1/
Using jQuery Mobile, I want an alert to display when the user opens a page
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page Three</h1>
</div>
<div data-role="content">
<script>alert('How are you');</script>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
But the above code shows the alert on the startup of the app and when I open the page it does nothing. Thanks in advance for your help.
With jQueryMobile there are specific events to know when the page loads.
You should instead try the following (put this in your head element, before the body):
<script>
$('#page3').live('pageshow', function() {
alert('Page ' + $(this).attr('id') + ' about to be shown');
});
</script>
You could also handle instead the 'pagebeforeshow'/'pagecreate' events.
Try this
<script>
$("div[data-role=content]").eq(0).ready(function() {
alert('How are you');
});
</script>
Do it like this. It is assumed this div is loaded after page load.
Accessed with div Id.
$('#page3').load(function() {
alert("loaded....");
});
Accessed with div class.
$('.page').load(function() {
alert("loaded....");
});
In the <head> portion of your page place the following:
<script>
$(document).on('pageshow','#page3',function(){
alert('How are you');
});
</script>
Note: the .live() method has been deprecated. See the docs for more details about why. Also the .on() method is preferred but does require that you are using jQuery 1.7+. If you are pre jQuery 1.7 use delegate instead.
<script>
$(document).delegate('#page3','pageshow',function(){
alert('How are you');
});
</script>