I have applied a data-role = 'header' to a jqm 'page', but the header doesn't work. In firebug I can see that the header div does NOT have the ui-header-fixed class applied to it.
I'm using jquery.mobile-1.3.0.min.js.
In this example you can see I even hard-coded the class into the div (only for testing), but jqm removes it!
I have a:
<div id = 'page_home_header_div'
data-role = 'header'
data-position = 'fixed'
data-tap-toggle = 'false'
data-theme = 'a'
class = 'ui-headerfixed'
>
Why would jqm ignore data-role = 'header'?
EDIT: all the other jqm stuff is working: styles, DOM changes, pageinit events, etc
Related
I've got a situation where I am loading DIV's dynamically from a server with dojo.xhrGet. All that is fine. The content comes back fine, and the DIV is inserted into the page fine. Note that in this situation, I cannot know the DIV to load prior to some other event occurring.
The problem seems to be that DIJIT widgets contained within the dynamic DIVs aren't DIJIT widgets, but run-of-the-mill HTML widgets. That is, I can work on them using "dojo.byId('widgetID')" and use standard JavaScript, but if I try "registry('widgetID')", I get an "undefined" response.
How can I get dynamically loaded and otherwise declarative DIV code to be parsed into true DIJIT widgets?
You need to use dojo/parser after your markup div has been loaded to your DOM.
The function parse() will transform your HTML markup from div to a dijit widget if the markup has been decorated properly.
By the way dojo.xhrGet is Deprecated and you should use dojo/request/xhr instead.
Below and example with some pseudocode:
require(["dojo/request/xhr", "dojo/dom-construct"], function(xhr, domConstruct){
xhr("example.json", {
handleAs: "text" // or whatever
}).then(function(data){
// place your div to the dom (data is an html markup similar to this <input data-dojo-type="dijit/form/TextBox" type="text" name="dept1" />)
var targetDom = 'targedDom';
domConstruct.place(data, targetDom, 'replace');
// trasform your div to a dijit widget
parser.parse(dojo.byId(targetDom)).then(function(){
// after is parsed do smt here
});
}, function(err){
// handle the error condition
}, function(evt){
// handle a progress event from the request if the browser supports XHR2
});
});
How can I use jquery to change the id of a div acting as a jquery mobile popup as well as the href of the anchor pointing to the popup?
In my webapp I have an anchor that, when clicked, brings up a jquery mobile popup div all of which I'm inserting dynamically. In any instance of the webapp, I don't know how many times this code will be inserted. Therefore, my understanding is that I need to be able to dynamically create a unique id for the jquery mobile popup div and set the href of my popup icon.
I am not currently succeeding at dynamically changing the id and href. I've created the following test (JSFiddle Test).
Here is my sample html:
<div class="phone1">
<p class="textLeft"> <strong>Number: </strong><span>(555)555-5555</span>
Learn more
</p>
<div id="myPopup" data-role="popup" class="ui-content" data-theme="a" style="max-width:350px;">
<p class="flagText">This number has been flagged as incorrect</p>
</div>
</div>
Change href property
Here is my sample javascript / jquery:
$('#changeButton').click(function () {
alert("Handler for .click() called.");
$('.phone1 > a').prop('href', 'myNewPopup');
$('#myPopup').attr('id', 'myNewPopup');
});
Thank you for your help in advance!
As your anchor is not a direct child of .phone1 but rather a grandchild, the > selector does not work. Also the href needs the # symbol:
$('.phone1 a').prop('href', '#myNewPopup');
Technically you should also use prop to update the id as well:
$('#myPopup').prop('id', 'myNewPopup');
Updated FIDDLE
Are you sure you need to do this. After dynamically inserting the popup the first time, you could just update it each successive time by testing if it exists in the DOM first:
if ($("#myPopup").length > 0){
//update
} else {
//create
}
I am using cordova 2.2.0 with Xcode 4.5.2. On one of my pages I have a select component and once a particular option is selected I want to display a table within a div. My html looks like this: <div class="hero-unit" id="#facprog"></div>
The javascript/jquery looks like this:
<pre><code>
$(function() {
$('#selFaculty').change(function() {
var facultyName = $('#selFaculty').val();
var progDetails = app.fillFacultyProgramme(facultyName);
alert(progDetails);
$('#facprog').append(progDetails);
});
});
</code></pre>
Note that #selFaculty is the id of the select object. However, when the select option changes, everything in javascript executes except for the append. Nothing shows up in the div. Is there a different way to add html element to a div in jquery under cordova 2.2.0 in iOS?
Thanks in advance,
José
With jquery you can refresh a div.
This is a good example:
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>
and now you need to put the div in the body section of your page
<div id="loaddiv">
</div>
from http://designgala.com/how-to-refresh-div-using-jquery/
and there is another example here:
refresh div with jquery
The first example is useful when you need to load a script and refresh and the second one is useful when you need to make a change, e.g. append html and then refresh as in your case.
I want to load the content of a page that is in another folder (eg: "files/pages/example.html") for the div container by clicking on the button in jQuery Mobile!
How to do it?
<div data-role="page">
<div id="container" data-role="content"><button id="clickButton">Click me!</button></div>
</div>
The $.mobile.loadPage is the method you need. It allows you to load an external html file and insert it into the dom. Default for this method is to load it as an entire page, so you have to specify the options to load it into a dom element. This is an example (and untested) code:
$('#clickButton').on("click",function(){
$.mobile.loadPage("theURLofThePage",{pageContainer: $('#container')})
});
now, don't forget about the crossDomain security problem. I managed to make this work in firefox by adding:
$("#landingPage").live('pageinit', function() {
jQuery.support.cors = true;
$.mobile.allowCrossDomainPages=true;
});
Also, the page you are loading must be wrapped in a data-role=page div (let's say it has id='secondPage'). After the load, trigger on the data-role=page with id=secondPage div:
$('#secondPage").trigger('pagecreate');
I have a simple jquery script that shows and hides div block:
<script type="text/javascript">'
$(document).ready(function(){
$(".slidingDiv").hide();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<a class="show_hide" href="#">Show/hide</a>
<div name="gohere" class="slidingDiv">
...
</div>
It's working fine, but if the URL contains #gohere I want to automatically show this div and hide it only if .show_hide is clicked.
Set the divs ID to be gohere, then you can do:
$('.show_hide').click(function(){
$($(this).attr('href')).slideToggle();
});
since your href attribute will contain #gohere, the selector for the slidetoggle will end up being #gohere, which corelates to your divs ID.
EDIT:
for the first part of your question, you can get the current hash tag from window.location.hash.
if (window.location.hash.length > 0) {
$(window.location.hash).show();
}
You should probably put some better error checking in there, but it should work.