salam
i'm new in jqueryMobile and i want to view a Thumbnails but a got this
how can i got a normal one?
here the code of this list
<ul data-role="listview" class="ui-listview">
{% for produit in produits %}
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="index.html" class="ui-link-inherit">
{% if produit.Images is empty %}
<img src="{{asset('upload/non_disponible.jpg')}}" class="ui-li-thumb"/>
{% else %}
<img src="{{asset('upload/')}}{{produit.Images[0].path}}" class="ui-li-thumb"/>
{% endif %}
<h3 class="ui-li-heading">Broken Bells</h3>
<p class="ui-li-desc">Broken Bells</p>
</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
{%endfor%}
</ul>
Try the following code instead (using jQuery Mobile version 1.2.0):
<ul data-role="listview" class="ui-listview">
{% for produit in produits %}
<li data-theme="c">
<a href="index.html" class="ui-link-inherit">
{% if produit.Images is empty %}
<img src="{{asset('upload/non_disponible.jpg')}}" class="ui-li-thumb"/>
{% else %}
<img src="{{asset('upload/')}}{{produit.Images[0].path}}" class="ui-li-thumb"/>
{% endif %}
<h3 class="ui-li-heading">Broken Bells</h3>
<p class="ui-li-desc">Broken Bells</p>
</a>
</li>
{%endfor%}
</ul>
Hope this helps. Let me know about your results.
Related
I'm creating a pagination in my website with Liquid template engine. But the link does not work as it should.
I want this link: https://support.beefinity.com/support/tickets/filter?page=2&requested_by=0&wf_filter=all
But I get this link: https://support.beefinity.com/support/tickets/filter/page/2?requested_by=0&url_locale=&wf_filter=all
This is the code that I use for the pagination:
{% paginate tickets by 10 %} {% for ticket in tickets %} {% if ticket.group.name == "Beefinity Support"%}
<div class="c-row c-ticket-row" id="ticket-view">
<span class="status-source sources-detailed-{{ticket.source_name | downcase}}" title=" {{ticket.source_name | downcase}} "></span> <span class="label-status-pending label label-small">{{ticket.status}}</span>
<div class="ticket-brief">
<div class="ellipsis">
<a class="c-link" href="{{ticket.portal_url}}" title="{{ticket.subject}}">{{ticket.subject}}</a>
</div>
<div class="help-text">
Made by: <span class="emphasize">{{ticket.requester.name}} Made on:{{ ticket.created_on | date: "%d-%m-%Y %H:%M" }}</span><br>
Agent: <span class="emphasize">{{ticket.agent.name}}</span>
</div>
</div>
</div>
{% endif %} {% endfor %} {% if paginate.pages != 0 %}
<div class="pagination pagination-centered">
<ul>
{% if paginate.previous %}
<li class="previous">
<a rel="prev start" href="{{ paginate.previous.url }}">
{{ paginate.previous.title }} Previous
</a>
</li>
{% else %}
<li class="disabled">
<span>« Previous </span>
</li>
{% endif %}
{% for part in paginate.parts %}
{% if part.is_link %}
<li>
<a rel="prev start" href="{{ part.url }}">
{{ part.title }}
</a>
</li>
{% else %}
{% if part.title == paginate.current_page %}
<li class="active">
{{ part.title }}
</li>
{% else %}
<li>
<a rel"start"> {{ part.title }}</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
{% if paginate.next %}
<li class="next_page">
<a rel="next" href="{{ paginate.next.url }}">
Next {{ paginate.next.title }}
</a>
</li>
{% else %}
<li class="next_page disabled">
<span> Next » </span>
</li>
{% endif %}
</ul>
</div>
{% endif %}
{% endpaginate %}
in the documentation that I viewed it just goes well:
i am using the existing jquery UI tabs..
<div id="tabs">
<ul>
<li>title 1</li>
<li>title 2</li>
<li>title 3</li>
</ul>
<div id="tabs-1">
<p>t1 content</p>
</div>
<div id="tabs-2">
<p>t2 content</p>
</div>
<div id="tabs-3">
<p>t3 content</p>
</div>
</div>
when rendered in the browser, jquery adds some set of classes to the <li> elements. [some part of it given below]
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
</ul>
when I append some <li> elements in <ul> using the following jquery code:
$('#tabs ul').append($('<li>title 4</li>');
The list gets appended but the classes are not added to it, hence do not exhibit the tab functionality.
Please give some insight into it.
You also need to add the div with the tab id:
var num_tabs = $('div#tabs ul li.tab').length + 1;
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
$('div#tabs').append(
'<div id="tab-' + num_tabs + '"></div>');
Then try a refresh on tabs:
$("div#tabs").tabs("refresh");
WORKING Fiddle
I'm having trouble with the display of my webpage. I used a unordered list with item inside. But after the unordered list is added by items resulted from javascript code, they appear in wrong way and don't follow the css rule of the unordered list
Plus, I'm using jquery mobile 1.4.2 css and js
this is the html code :
<div id="all" class="ui-body-d ui-content">
<ul id="allList" data-role="listview" >
<li>1Data Mining</li>
<li>1Ethics</li>
<li>1HCI</li>
<li>1Mobile Dev</li>
<li>1Software Testing</li>
</ul>
</div>
And this is the javascript code that insert new item into list
function getDeadlines_success(tx, results){
var len = results.rows.length;
//var s = "";
for (var i=0; i<len; i++){
var deadline = results.rows.item(i);
$('#allList').append('<li>1Software Testing</li>');
}
;}
Here's a jsfiddle with your code: http://jsfiddle.net/ruslans/dKy3B/
Edit: alternative solution (as per suggestions from many):
$("button#btn").click(function () {
$('#allList').append('<li>1Software Testing</li>');
$("#allList").listview('refresh');
});
http://jsfiddle.net/ruslans/tUJt5/
the mark-up you've pasted is not the mark-up it generates after rendering, it's actually a lot messier than that:
<div id="all" class="ui-body-d ui-content">
<ul id="allList" data-role="listview" class=" ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-hover-d ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Data Mining</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Ethics</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1HCI</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Mobile Dev</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Software Testing</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
</ul>
</div>
to add an item to this list and keep the styling, you'll have to do some thing like this as per this answer Dynamically adding <li/> to <ul/> in jquery mobile:
$('ul').append($('<li/>', { //here appending `<li>`
'data-role': "list-divider"
}).append($('<a/>', { //here appending `<a>` into `<li>`
'href': 'test.html',
'data-transition': 'slide',
'text': 'hello'
})));
$('ul').listview('refresh');
Please use Google or the stackoverflow search function next time.
The first hit for me: https://stackoverflow.com/a/5926112/994304
$('ul').append($('<li/>', { //here appending `<li>`
'data-role': "list-divider"
}).append($('<a/>', { //here appending `<a>` into `<li>`
'href': 'test.html',
'data-transition': 'slide',
'text': 'hello'
})));
$('ul').listview('refresh');
The last line (refresh) is very important for jQuery Mobile to layout the UI controls again.
I'm not sure it's needed for all jQuery controls but i'm sure for this one :).
Stefan.
Try refresh the listview
$("#all").listview('refresh');
salam
i develop a mobile site with symfony2 and jqueryMobile
i load a listview in a collapsible but a got this response like in image
here my code in the first page
{% block content %}
<h4>Les Categories</h4>
<div data-role="collapsible-set" data-theme="b" data-content-theme="d" class="ui-collapsible-set">
{% for Categorie in Categories %}
<div data-role="collapsible" data-collapsed="true" class="info" data-record="{{Categorie.id}}">
<h1>{{ Categorie.Libelle }}</h1>
<p class="catdetail">
</p>
</div>
{% endfor %}
</div>
<script>
$('div.info').live('expand', function(){
//get the ID for this record
var record = $(this).data("record");
console.log('expanded '+record);
$(".catdetail", this).load("{{ path('Ecommerceboutique_mobile')}}dscat/"+record);
});
</script>
{% endblock %}
and here the second page which loaded in collapsible
<ul data-role="listview" class="ui-listview">
{% for souscategorie in souscategories %}
<li>
<a href="{{ path('Ecommerceboutique_mobile_lstprdsouscat', { 'id': souscategorie.id })}}">
{{souscategorie.Libelle}}
</a>
</li>
{% endfor %}
EDIT
i add the script to second page but still the same problem
<script>
$(function() {
$('.selector').listview('refresh');
});
Maybe refresh the listview once you have pulled it
$(".catdetail", this).load("{{ path('Ecommerceboutique_mobile')}}dscat/"+record).listview('refresh');
jQM Docs:
http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html
I solve the problem by this
{% for souscategorie in souscategories %}
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="{{ path('Ecommerceboutique_mobile_lstprdsouscat', { 'id': souscategorie.id })}}" class="ui-link-inherit">
{{souscategorie.Libelle}}
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
{% endfor %}
thanks phill for your help
I'm using custom icons but they're appearing in a circle. Is here a class I need to turn off to stop this?
<div data-theme="a" data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#" id="test1" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active">
<span class="foot_font">test1</span>
</a>
</li>
<li>
<a href="page40.html" id="test2" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test2</span>
</a>
</li>
<li>
<a href="page44.html" id="test3" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test3</span>
</a>
</li>
<li>
<a href="page22.html" id="test4" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test4</span>
</a>
</li>
<li>
<a href="page47.html" id="test5" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test5</span>
</a>
</li>
</ul>
</div>
</div>
You can override this css behavior by adding
.ui-icon
{
border-radius:0px!important;
-moz-border-radius:0px!important;
-webkit-border-radius:0px!important;
-ms-border-radius:0px!important;
-o-border-radius:0px!important;
}
To remove the circle gray background behind simply add the
ui-nodisc-icon
class to the link/button
for example, your code can be changed to
<a href="#" id="test1" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active ui-nodisc-icon">
<span class="foot_font">test1</span>
</a>