I'm still new to jQuery mobile. I'm trying to fix a minor problem on one of my pages.
I have a page that has a simple list of links. There's nothing special here, just this:
<ul>
<li> One</li>
<li> Two</li>
<li> Three</li>
<li> Four</li>
<li> Five</li>
<ul>
More
I have a bit of js so that when the #list_more link is clicked, we do an ajax call that pulls the next five items and adds to the end of the ul.
$('#list_more').click(function(){
$.post("/scripts/ajax.php", function(data){
$('#list_more').attr('data-time',data.time);
$('ul li:last').after(data.out);
});
})
The pages are setup using multipage templates. Because the new pages are being added to the DOM dynamically, I'm getting an Error loading page message. I'm not sure how to fix this.
Have you tried refreshing your list? http://operationmobile.com/dont-forget-to-call-refresh-when-adding-items-to-your-jquery-mobile-list/
Related
I am using Dotclear blog software, which provide a widget for the blog categories with a resulting code looking like this:
<div class="widget categories ">
<h3>Catégories</h3>
<ul>
<li>Cat1</li>
<li>Cat2
<ul>
<li>Subcat1</li>
</ul>
</li>
<li>Cat3
<ul>
<li>Subcat2</li>
</ul>
</li>
<li>Cat4</li>
</ul>
</div>
What I am trying to achieve here is using the <a> tag (for Cat2 or Cat3) as header (or a dynamically added <h4> around it) and fold the subcategory list. If I call the accordion like this :
$(".categories").accordion({
header: "li:has(ul) > a",
});
the accordion does work, but when I click on the link it just folds/unfolds the item and doesn’t let me go to the link target (the category page, that is).
I tried wrapping the <a> in an <h4> tag and use that tag as header, but it doesn’t seem to make a difference. Is there a way to do what I seek or should I abandon the idea of collapsing subcategories and have functioning links within the header ?
Thanks for your time.
Well, after reading your comments, I realized I was using the wrong tool to achieve my objective. I have replaced jquery-ui’s accordion with a treemenu jQuery plugin which is actually made for my use. Sorry to have wasted your time and thanks for your kind answers.
I've created a simple Jquery menu but have run into a problem I cannot isolate:
The first item I mouseover is fine, but as soon as I move to another item (parent and child items alike) the menu loses focus.
What I've done to try and isolate the problem:
removed all CSS from my page
using base theme for Jquery UI 1.10.3
removed all other javascript from the page
using Jquery 1.7.2
Tried debugging, I get no errors
Code works in fiddle
Included menu.js, widget.js, ui.js, position.js and core.js in the <head>
Here is my HTML
<body>
<form>
<div style="width:50%">
<ul id="buildingmenu">
<li>Social Update</li>
<li>Building Update
<ul>
<li>building 1</li>
<li>building 2</li>
</ul>
</li>
</ul>
</div>
</form>
</body>
And my javascript
$(document).ready(function () {
$("#buildingmenu").menu();
});
I'm pulling out my hair, what have I missed??
EDIT: Here's a screencast of the problem with chrome inspector open
With full jQuery UI version included works fine: http://jsfiddle.net/B2HFE/
Reading the docs I see the dependecies of jQuery UI menu are:
UI Core
Widget Factory
Position
I think you miss the last one.
I'm just starting with jQuery Mobile and adapting an existing application.
My problem is jQuery mobile is inserting anchor tags in my li tags within an unordered list.
The doc tells me that read-only lists will be created if the list has no links.
This is very unexpected behavior to put it mildly.
When I comment out the JQM includes I get my simple li elements back, so I know it is JQM that is doing it.
Markup without JQM:
<ul id="root_ul" data-role="listview">
<li id="1_1306901436141">Profile
</li>
</li>
Markup after JQM:
<ul id="root_ul" data-role="listview" class="ui-listview">
<li id="1_1306901436141">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#/evaluation_headers/714%20/tastesheet&ui-page=ul1_1306901436141" > <span>Profile</span>
</a>
</div><span> </span>
</div>
</li>
JQM has put in links into the list but I want a simple readonly list with no links.
Thanks everyone for responding. In my effort to simplify my code to submit to this site I failed to include a nested list within an item. I created a simple nested list and found that this causes JQM to insert the links. Not what I want or expected but will now figure out a workaround. The nested lists are at the heart of my app so maybe I won't use JQM.
Thanks again for your responses.
What you can do do avoid jQuery Mobile inserting anchor tags for your nested ul is to wrap the nested ul in a div. In fact besides for the conventions provided by the JQM framework you can also pretty much style a JQM li anyway you wish by placing what ever markup/css you want inside the li.
<ul>
<li>Item 1</li>
<li>
<div><ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
</ul></div>
</li>
</ul>
I'm trying to implement simple ajax by using jquery in mvc. I'm just trying to load some contents from another page in the current page. My code is looks like this:
<div>
<ul id="biographies">
<li> Ajax</li>
<li> Index </li>
</ul>
<div id="biography">
The ajax content will appear here...
</div>
<script type="text/javascript">
$('#biographies html.ActionLink').click(function (e) {
var url = $(this).attr('href');
$('#biography').load(url);
e.preventDefault();
});
</script>
</div>
But having some problem as follows:
When I keep the ajax.cshtml file in Home folder under view, its showing content not found, I need to know how to link internal resource in mvc using simple anchor tag not html.actionlink method.
When I keep the ajax.cshtml file in the root directory, it just move to that page rather than loading the contents in first page,which is expected.
Please help. Thanks in advance.
Replace
$('#biographies html.ActionLink')
with
$('#biographies a')
Here is my problem. I have a few hard coded pseudo pages in my index. Some filled with content, some empty which will be filled on user interaction only by ajax. This ajax content contains html lists. When they load they don't have the nice jquery mobile look so I have to call a .listview() method so the jqm framework parse it on my ajax callback. That is where I often get this JS error:
Uncaught TypeError: Cannot read property 'jQuery162027575719612650573' of undefined
The number is never the same...
I wonder if I use the proper way to parse a listview after the page loads the ajax content. the error seems to be triggered when there is slight lag for the loading and the complete event is triggered too soon and my listview is not yet in the DOM at that moment, just a guess. what is the recommended way to initialize a listview after an ajax call?
It is very unfortunate because when the js error occurs it seems to freeze any further js execution...
so here is my empty pseudo page:
<div data-role="page" id="playlist" data-add-back-btn="true">
<div data-role="header">
<h1><g:message code="pd.playlist" /></h1>
</div>
<div data-role="content"></div>
</div>
right under it there is a script tag with the bind an ajax call on pageshow to activate the listview
<script type="text/javascript">
$('#playlist').bind('pageshow', function () {
$.ajax({
url: "updatePlaylistTemplate.gsp",
error:function(x,e){handleAjaxError(x,e);},
beforeSend:function(){$.mobile.showPageLoadingMsg();},
complete:function(){
$.mobile.hidePageLoadingMsg();
$('[data-role="listview"]').listview(); //re-active all listview
},
success:function(data, textStatus, jqXHR){
$('#playlist').find('[data-role="content"]').html(data);
}
});
});
</script>
The updatePlaylistTemplate return this (extract):
<ul data-role="listview" data-split-theme="d">
<li data-icon="delete">
Provider: Bell
</li>
<li data-icon="delete">
Rock - Classic Rock
</li>
<li data-icon="refresh" data-theme="e">Refresh list</li>
<li data-role="list-divider">Next song</li>
<li>
<a href="urlToViewSongInfo">
<img src="images/song.gif" />
<h3>Albert Flasher</h3>
<p>The Guess Who</p>
<p class="ui-li-aside">Next</p>
</a>
</li>
<li data-role="list-divider">Now playing</li>
<li>
<a href="urlToviewSongInfo">
<img src="images/song.gif" />
<h3>Crime of the Century</h3>
<p>Supertramp</p>
<p class="ui-li-aside">14h49</p>
</a>
</li>
<li data-role="list-divider">Previous songs</li>
<li>
<a href="urlToViewSongInfo">
<img src="images/song.gif"" />
<h3>Desperado</h3>
<p>Alice Cooper</p>
<p class="ui-li-aside">14h45</p>
</a>
</li>
[...]
</ul>
What version of jQuery Mobile are you using? In the latest beta (1.0b2) you can trigger the create event on a dom element to have the framework initialize it:
New “create” event: Easily enhance all widgets at once
While the page plugin no longer calls each plugin specifically, it
does dispatch a “pagecreate” event, which most widgets use to
auto-initialize themselves. As long as a widget plugin script is
referenced, it will automatically enhance any instances of the widgets
it finds on the page, just like before. For example, if the selectmenu
plugin is loaded, it will enhance any selects it finds within a newly
created page.
This structure now allows us to add a new create event that can be
triggered on any element, saving you the task of manually initializing
each plugin contained in that element. Until now, if a developer
loaded in content via Ajax or dynamically generated markup, they
needed to manually initialize all contained plugins (listview button,
select, etc.) to enhance the widgets in the markup.
Now, our handy create event will initialize all the necessary plugins
within that markup, just like how the page creation enhancement
process works. If you were to use Ajax to load in a block of HTML
markup (say a login form), you can trigger create to automatically
transform all the widgets it contains (inputs and buttons in this
case) into the enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page"
).trigger( "create" );
Create vs. refresh: An important distinction
Note that there is an important difference between the create event
and refresh method that some widgets have. The create event is suited
for enhancing raw markup that contains one or more widgets. The
refresh method that some widgets have should be used on existing
(already enhanced) widgets that have been manipulated programmatically
and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new
unordered list with data-role=listview attribute after page creation,
triggering create on a parent element of that list would transform it
into a listview styled widget. If more list items were then
programmatically added, calling the listview’s refresh method would
update just those new list items to the enhanced state and leave the
existing list items untouched.
Link: http://jquerymobile.com/blog/
You can also copy the output that jQuery Mobile creates and use that structure rather than using <li> tags and depending on jQM to inititialize it:
<li data-role="list-divider" class="ui-li ui-li-divider ui-btn ui-bar-a ui-btn-up-undefined" role="heading"><span>List Divider</span></li>
<li data-theme="b" class="ui-li ui-li-static ui-body-b">Regular LI</li>