When the content is static:
Click
<script>$('#nearme').bind('pageAnimationEnd', function(event, info){});</script>
When the content is AJAX:
Click
How do I bind something to occur after the AJAX (page.html) is loaded?
This question pertains to jqtouch which makes AJAX requests from regular anchor tags
Take a look at the demo, in particular the "GET Example" under AJAX section. Essentially, you want to have the anchor element to link to a page which returns a "jQTouch page", i.e. <div id="pageID">...</div>.
So, in your case, you may have this anchor:
Click
And the page.html may be something like:
<div id="ajaxPage">
<div class="toolbar"><h1>Title</h1></div>
<div>
<ul>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
Related
I have some results that are loaded via Ajax in the #results container and anothers, the same content in #last_results (this one loads without ajax). The same scripts that work on #last_results doesnt work in #results I think due to they are not binded.
HTML
<ul id="results"></ul>
<ul id="last_results">
<li class=showLb>[click to show LightBox]</li>
<li class=showLb>[click to show LightBox]</li>
<li class=showLb>[click to show LightBox]</li>
</ul>
JQUERY This is a basic Jquery script:
$('.showLb').on('click',function(e){
alert('Show LightBox');
});
This script works in the page li but not in the loaded via Ajax li. I knew I have to delegate or use on, How
You have to define your on click method directly after you execute you ajax call.
$.ajax({
...
success: funtion(data){
//your code
$('.showLb').on('click',function(e){ alert('Show LightBox'); });
}
...
Here you go. Now, My preference would be to ask you to actually go and check what this change does. Remember, we are here to help you understand.
$('.results').on('click', '.showLb' ,function(e){
alert('Show LightBox');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="results"></ul>
<ul id="last_results">
<li class=showLb>[click to show LightBox]</li>
<li class=showLb>[click to show LightBox]</li>
<li class=showLb>[click to show LightBox]</li>
</ul>
I use jQuery Mobile 1.4.5. When I load a page and right away click the mobile menu toggle button, the mobile menu opens. When I change pages, the mobile menu does not open anymore when I click the toggle button.
My navigation looks like this:
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<a id="toggle-mobile-menu" href="javascript:void(0)" data-role="none">
Toggle mobile menu
</a>
<ul id="mobile-menu">
// ...
</ul>
</div>
</div>
<div data-role="content"></div>
$(function () {
$(document).on('click','#toggle-mobile-menu', function() {
$('#mobile-menu').fadeToggle();
});
});
How do I need to adapt my code?
Use just one external toolbar and place the markup outside the page within the body of your page. It's easy: the markup remains the same.
Don't forget to initialize the toolbar: because external toolbars are not within a page, you must call the toolbar plugin yourself.
In $(document).ready add this:
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
Here is the jQuery Mobile documentation about this topic:
http://demos.jquerymobile.com/1.4.5/toolbar-external/
and here for fixed toolbars:
http://demos.jquerymobile.com/1.4.5/toolbar-fixed-external/
I love jQueryUI, but the Tabs widget seems to be complicating things too much (jQueryUI version 1.10.3).
I know it can load content on the fly and this is all wonderful, but I have here a very simple structure with a form and some DataTables, more or less like this:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form">
<form>...</form>
</div>
<div id="SubTable1">
DataTables 1 goes here
</div>
<div id="SubTable2">
DataTables 2 goes here
</div>
</div>
However, things break horribly when I apply jQueryUI Tabs to this. One reason I already know is the use of <base> tag in my code, which makes Tabs "think" I want to load my content on the fly, instead of simply hiding/showing content already there. But even using a hack to fix this, DataTables doesn't render correctly.
And frankly, I don't want to spend days trying to figure it all out to find a fix.
Instead, I would like to know if there is a way to "switch off" all the fanciness of JqueryUI Tabs, and make it just hide and show my tabs, using whatever is inside each div. Is it possible?
That would solve my problem. If I manually create some buttons and associate a click event that simply do a display: none / display: block to my divs, they work like a charm, including DataTables.
In fact, I'm considering dumping jQueryUI Tabs completely and creating the necessary code to do just that, but I would prefer to use jQueryUI Tabs, if possible.
Thanks a lot in advance!
I will admit this is a bit ham-fisted - but it works, as an example.
HTML:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form" class="tab active">
<form>My Form</form>
</div>
<div id="SubTable1" class="tab">
DataTables 1 goes here
</div>
<div id="SubTable2" class="tab">
DataTables 2 goes here
</div>
</div>
CSS:
.tab{display:none}
.active{display:block}
jQuery:
$('#MyContent a').on('click',function(e){
var id = $(this).attr('href')
$('div.active').toggleClass('active');
$(id).toggleClass('active', ($(this).attr('class') != 'active'));
console.log()
})
Working jsFiddle
I'm working on an app for learning purpose.
Theres a header, content and navbar with 2 buttons.
The body="onLoad()" function works really well when the app is starting, but when I click on another button at the navbar I would like to fire a function which is displaying the content for the page. But when I call a function in the new HTML file exactly the same way like on the index file (body="contentLoader()") it doesnt fire!
Heres the code from the index.html
<html>
<head>
<head>
</head>
<body onload="onBodyLoad()">
And now I would like to click on the "Listview"-Button at the navbar, which has a own HTML page, also with
<body onload="onListLoad()">
But my javascript function function onListLoad() { alert("test"); } is not fireing.
I can't figure out why. Isnt this the normal way?
Thanks in advance. Regards, john.
I'm pretty sure the tag within your sub page is stripped out within PhoneGap. Only the main index page will fire its onload method.
From what I gather, you're trying to fire some code as soon as one of your nav tabs is activated. I'm not sure I can tell you the 'proper' way to do it, but here is what I do:
<div data-role="page" id="reports-browse">
<div data-role="header"></div>
<div data-role="navbar">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
</div>
<div data-role="content">
<div id="tab1">This is my first tab</div>
<div id="tab2" style="display:none">This is my second tab.</div>
</div>
<script src="reports.browse.js"></script>
<script>reports_browse.init();</script>
</div>
My init() function then does:
$( document ).bind( "pagebeforeshow", function( prev_page ){
// Populate the two tabs here.
});
Hope this helps.
I'm using the JQTouch framework for building an iPhone app/WebPage. I have it working nicely, but i cannot make it scroll to the bottom of the page.
<body>
<div class="current">
<div class="toolbar">
<a class="back button" href="javascript:{}">back</a>
<h1>header</h1>
</div>
</div>
<ul id="myContent">
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
<div id="myInput">
...a couple of input elements..& submit button
that results in the "myContent" being updated with another li
</div>
</body>
Basically I have a UL at the top of my page, that gets updated/added to via server events coming in. This works nicely, but i want to be able to scroll to the "myInput" div which is at the bottom. However, I can't find a way of achieving this, I'm either using libraries incorrectly, or missing a trick. Any ideas?
Cheers
Have you checked the size of your webview? I had this issue but it was because I set my webview height to 480 (so it was off the screen due to the navigation bar)