Is there a way to add a listview to a collapsible which is in a collapsible-set node.
I am doing this completely from javascript/jquery.
I only have 1 base node in the html
<div data-role="collapsibleset" data-inset="false" data-collapsed="false" id="coll" data-content-theme="a" data-iconpos="right">
</div>
I make an ajax call to a nested json call, with children of children and need to add collapsibles and listviews to this node. usually the listviews are children of collapsibles but sometimes there is a collapsible with a collapsible and a listview.
I am doing this all in script. I don't know why it came to this, I was using a tree, but the jquery mobile buttons seemed more phone app like. I can add the collapsible with a
var final = "<div data-role='collapsible' id='" + title + "'><h3>" + title + "</h3></ul>"
$('#coll').append(final).collapsibleset('refresh');
but then I got my listview....
var items = "<ul data-role='listview' data-inset='false' id='lv" + title + "'>"<li>test</li>"</ul>";
I think there is a .listview("refresh") but I don't know if I have to refresh my collapsible first and then my listview.
thanks for any advice or help.
Depending on the Version of jQM you can (on 1.4) simply call
$('#coll').trigger("create");
which should create all subsequent jQM code - you could even do this on the whole page once finished - on cost of performance.
For the listview only you would (once you removed a few " ):
$('#lv').listview().trigger("refresh");
Related
I have a jquery-mobile selectmenu that has previously worked fine in both Safari and Chrome, but just recently the selectmenu won't select the option choice. It still works fine in Safari. When using development tools either from an emulator or chrome on my desktop, I get no errors. I do have an issue with glyphicons-halflings-regular.woff2 not loading and I have tried all of the suggestions found here on stack, but none of those seem to work and most all research I've done comes up with answers that are >4 yrs old.
I'm using jquery mobile 1.4.5 and bootstrap 3.3.6 and the application resides on Azure.
Here's what I've got right now...
<div class="ui-field-contain" id="regionDiv">
<label for="region">Region:</label>
<select class="text-left" name="select-region" id="region" data-native-menu="false" data-mini="true" onchange="changeRegion();"></select>
</div>
<div class="ui-field-contain">
<label for="projectmob">Project:</label>
<select class="text-left" name="select-proj" id="projectmob" data-native-menu="false" data-mini="true" onchange="dwmChange();"></select>
</div>
Both the region and the project selectmenus do not select the item, they just leave a blank box or won't let you select the item.
The .js that runs when selected (I think it is fine)...
function changeRegion()
{
var regid = Number($("#region").val());
var projsel = $("#projectmob");
projsel.empty();
projsel.append("<option id='selproj' value='placeholder' data-placeholder='true'>Select Project...</option>");
var projNumber = 0;
var projValue = -1;
for (var i = 0; i < proj.length; i++) {
if (proj[i].region == regid) {
projNumber++;
projsel.append("<option id='oc1-" + proj[i].id + "' value='" + proj[i].id + "'>" + proj[i].wono + ': ' + proj[i].name + "</option>");
projValue = proj[i].id;
};
};
$("#projectmob").selectmenu('refresh', true);
if (projNumber == 1) {
$("#projectmob").val(projValue).selectmenu('refresh');
};
getFilteredEvents();
}
function dwmChange()
{
var projid = Number($("#projectmob").val());
if (projid > 0) {
getFilteredEvents();
var regValue = findRegion(projid);
$("#region").val(regValue).selectmenu('refresh');
};
}
getFilteredEvents(); hits the azure sql database and sets up the screen with the data retrieved.
This all ran fine up until about a week ago as far as I know. I have made changes and updates, but none that I think should affect the selectmenus from working.
Any thoughts or ideas would be appreciated.
Thanks
It seems a problem with Chrome 50.0.2661.89.
Looking further into this...
I have to question the logic behind JQuery Mobile hiding the toolbars on select >element focus by default. The native browser select elements overlay the page in >their various special ways, and even the non-native select popup (which you get >when specify the data attribute data-native-menu="false" in html or nativeMenu: >false in the selectmenu options) is absolutely positioned as a dialog. This >means that the toolbars really do not intrude on the real-estate given to the >selectmenu options as they'll always overlay everything including the toolbars. >To me, this makes the code from line 12664 - 12692 commented as: this hides the >toolbars on a keyboard pop to give more screen room rather unnecessary for >select elements.
Workaround/solution: thankfully jQuery-Mobile does nicely allow you to override >this setting in your header/footer with the data-attribute data-hide-during->focus - simply set this to:
data-hide-during-focus="input, textarea"
and it won't try to hide the toolbars anymore when a select element gets focus."
From https://github.com/jquery/jquery-mobile/issues/8429
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 dynamically generate this html code to delete an item with an id=3 for example:
"<a href='javascript:delete('" + item.id + "')>";
when i click this, it will execute delete('3');i change it as:
<a href='#delete' data-rel='popup' data-position-to='window' data-transition='pop'>
and add a dialog for this tag:
<div data-role='popup' id='delete'>
<a href='javascript:delete(item.id)' data-role='button'>delete</a>
</div>
how to transfer the item's id to this popup dialog's tag, any suggestion?
I feel like you might be going through the wrong way to achieve this. Some things to change :
delete is a JavaScript keyword. You cant use it as a function.
Don't use the onclick attribute. It results in duplication. Instead, you could use a click event for repetitive actions.
You seem to have gotten the idea to create multiple popups (one for each click of the anchor tag). I think one would do.
Now, in correlation with whatever I've just put down, here's some sample code.
HTML
<a href='#' class='delete' data-num='" + i + "'>Delete me</a>
(Note the data-num attribute in the HTML, the addition of class attribute and the removal of onclick in your code)
It could be replaced by JS which looks like this :
$(this).on("click", ".delete", function (e) {
//prevent default action
e.preventDefault();
//take the id value
var id = $(this).data("num");
//send that value to the popup
$("#delete").find("span").html(id).end().popup("open");
});
A demo fiddle for you to look at : http://jsfiddle.net/hungerpain/AxGde/2/
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.
This question already has answers here:
Dynamic controlgroup and checkboxes unstyled
(6 answers)
Closed 8 years ago.
This is my code:
http://jsfiddle.net/YKvR3/34/
I would create a controlgroup with values that are in my array (name).
The problem is that when I click load button the values are added in a controlgroup but the jquery-ui styles are not loaded like in the image.
The controlgroup is not styled with jquery-ui mobile css.
$("#load").click(function(){
var name=["one","two"];
var html='<fieldset id="listPlayers" data-role="controlgroup"><legend><h1>Choose as many players as youd like to remove:</h1></legend>';
for ( var int = 0; int < 2; int++) {
html+='<input type="checkbox" name="checkbox-'+int+'a" id="checkbox-'+int+'a" class="custom" /><label for="checkbox-'+int+'a">'+name[int]+'</label>';
}
alert('<legend><h3>Choose as many players as you would like to remove:</h3></legend>'+html+'</fieldset');
$("#list").html(html+'</fieldset');
//$("#list").page();});
What I am doing wrong?
Thanks.
$("#list").trigger('create');
From: jqm docs
if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
I do applogies if this post is too old and if my post isn't by the correct standard since it's the first time ever posting so please correct me if it's horribly bad :-]
But in case someone else comes across it, I had similar problems with how the dynamic data is displayed and I used the jsfiddles and comments above as a help, and this is what got mine to work, well somewhat near my solution, I don't have a button to load the data it's loaded automatically when the page is loaded.
Updated In my .html-file:
<div id="members"></div>
<input type="button" id="load" value="test"/>
Updated In my .js-file:
$("#load").click(function(){
var name = ["NameOne","NameTwo", "NameThree"];
var fset = '<fieldset data-role="controlgroup" id="members-ctrlgroup"><legend>This is a legend:</legend>';
var labels='';
for ( var i = 0; i < name.length; i++) {
labels += '<input type="checkbox" class="checkbox" id="c'
+ i
+ '"><label for="c'
+ i
+ '" data-iconpos="right">'
+ name[i]
+'</label>';
}
$("#members").html(fset+labels+'</fieldset>');
$("#members").trigger("create");
});
I know the "field" looks a bit weird how I divided it but I find it somewhat easier when it comes to getting the whole html-string correct in these cases.
Updated In order to have the rounded corners and have it as one controlgroup you'll have to have this approach instead. Just like the former posters showed.
Do note that the id with the checkbox and the label for= can tend to screw the output if they're not the same :-]
fiddle
In order to replace the content you should use .html(); instead of .append(), which adds the new content after the existing one.
After adding content to a jQuery Mobile Page you need to enhance the content, using for instance $("input[type='radio']").checkboxradio();
I was using
for( var i=0 ; i < html.length ; i++ ){
var spline = html[i].split("|");
inHTML = inHTML + " <input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" /> <label for=\"checkbox-"+i+"a\">"+ spline[0] +" , "+ spline[2] +"</label> ";
}
jq("fieldset#myFieldSet").empty();
jq("fieldset#myFieldSet" )
// Append the new rows to the body
.append( inHTML )
// Call the refresh method
.closest( "fieldset#myFieldSet" )
// Trigger if the new injected markup contain links or buttons that need to be enhanced
.trigger( "create" );