I am having left side ul and right side ul. When i am clicking left side li making an ajax call in that ajax call i am adding a dynamic li in right side ul. The content was coming but the jquery mobile design was missing. I searched i got a solution like add $("#ul_id").listview('refresh') but it's not working for me.
$.post('/app/Unit/unit_detail', {item_id : task_id},
function(data){
$('#right_ul').html(data);
$("#right_ul").listview('refresh');
});
In my unit_detail.erb i am having the following code
<li class="showDetails" style="list-style:none;" data-theme="b">
<a href="#">
<div class="ui-grid-b">
<div class="ui-block-a"><div><%= unit_detail.name %></div></div>
<div class="ui-block-b"><div><%= unit_detail.description %> </div></div>
<div class="ui-block-c"><div><%= unit_detail.accessories %> </div></div>
</div>
</a>
</li>
In some place i found first find the id of ul in div and refresh the list view
$("#rigth_pane_content_footer").find("#right_ul").listview('refresh');
I tried that also not working.
In my page i am having the following
<div id="rigth_pane_content_footer">
<ul data-role="listview" id="right_ul">
</ul>
</div>
Any suggestions?
try this
$.post('/app/Unit/unit_detail', {item_id : task_id},
function(data){
var container = document.getElementById('right_ul');
var new_element = document.createElement('li');
new_element.innerHTML =data;
container.appendChild(new_element);
$(container).listview("refresh");
});
Related
I'm working in kendo UI & I'm facing an issue while I give an ng-click option on the HTML content which was loaded later.
Here I'm adding a few codes related to what I have did:
HTML:
<div ng-controller="KendoCtrl">
<div class="show_html_here"><!-- Ajax inserts HTML here --></div>
</div>
HTML & ng-click in RED box & which is working:
<div ng-model="open_Filter" ng-click="onClick('open_Filter')">
<span>Total Open</span>
<span>0</span>
</div>
HTML & ng-click in ajax HTML & which is not working:
<ul>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 1</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 2</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 3</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 4</li>
</ul>
While clicking in any of the li which has ng-click, the alert is not working.
I have also tried by adding the ajax HTML section directly to my view page without the ajax and at that point, the click was working fine.
Ajax:
$('body').on('change', '#dropdown_id', function(){
$.post('controller/htmlsection', {'id': $this.val()}, function(data) {
$('.show_html_here').html(data.html);
});
});
Kendo/Angular Codes:
angular.module("KendoApp", ["kendo.directives"]).controller("KendoCtrl", function ($scope, $http) {
...
$scope.onClick = function(param) {
alert(param); // Not working while we click in a section which is loaded in ajax(eg.: PRT-4)
}
...
});
alert(param); inside $scope.onClick not working while we click in a section which is loaded in ajax(eg.: PRT-4) to div with class show_html_here. I think that it is because of the reason that the ajax section is loaded later the Kendo/Angular code is initiated.
If you know some solution for this please help me.
I do not get a solution from Stack & need to find a way to solve my issue. I found a solution for the issue, do not know whether its a proper way or not, but it solved my issue.
Update in HTML:
<ul>
<li class="customFilter" ng-model="stageFilter">PRT - 1</li>
<li class="customFilter" ng-model="stageFilter">PRT - 2</li>
<li class="customFilter" ng-model="stageFilter">PRT - 3</li>
<li class="customFilter" ng-model="stageFilter">PRT - 4</li>
</ul>
Kendo/Angular Codes:
// Custom Click
$('body').off('click', '.customFilter').on('click', '.customFilter', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
active = 0;
} else {
$(this).addClass('active');
active = 1;
}
$scope.onClick('stageFilter', active); // Click was working as required
});
The custom click was working properly as I required because of the reason that the click was happening only after the HTML from ajax is loaded.
I do not say that this solution is a proper way, but it's my issue for this time.
Open to new or a proper solution
Building a jQuery Mobile app in DreamweaverCS6. Have a an ul with multiple links calling html pages each hold a quiz. The "quiz" page is a jqm page with a javascript file doing all the work of the quiz. Everything works fine, but when you click on the li quiz button to load the page it takes a little while to load and the ajax loading spinner is not showing up. This is a problem because you don't know if the app has frozen or not. Any thoughts on how to force the spinner to show while loading the page?
<div data-role="content">
<ul data-role="listview">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Quizzes</li>
<li>Quiz 1</li>
<li>Quiz 2</li>
<li>Quiz 3</li>
You can use the
$.mobile.showPageLoadingMsg();
and
$.mobile.hidePageLoadingMsg();
You can refer http://jquerymobile.com/demos/1.2.1/docs/config/loadingMessageTextVisible.html for proper usage.
You can reduce the page loading speed by actually writing the contents of each pages in particular div tags like :
<div data-role="page" id="quiz1">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
You can load this page as :
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Quizzes</li>
<li>Quiz 1</li>
<li>Quiz 2</li>
<li>Quiz 3</li>
</ul>
This will greatly reduce the page loading time and speed up your app.
The way you have your code, those links will do a full refresh, abd not showing the jqm spinner.
What you can do is change a page programatically, which uses the jqm spinner for transitioning pages. More info http://jquerymobile.com/demos/1.2.1/docs/api/methods.html - changePage ($.mobile.changePage())
The idea is to have yours as follows:
<li><a class="quiz1">Quiz 1<a><li>
<script>
$(document).on('pageinit', '.quiz1', function() {
$.mobile.changePage('quiz1.html');
});
</script>
hope you get the idea...
SUMMARY:
I need to insert a "Back to Top" links after every <div class="wrapSection">. I've been successful using the following:
<script>
$('.wrapSection').after('
<div class="backToTop clearfix">
Back To Top
</div>
');
</script>
However, I want to use a smooth scroll when clicking 'Back to Top.' With that in mind, I tried the following:
<script>
$('.wrapSection').after('
<div class="backToTop clearfix">
<a href="javascript:void(0)" onclick="goToByScroll('top')" class="up">
Back To Top
</a>
</div>
');
</script>
That does not work. Being a jQuery rookie, I did what seemed logical, which seems to never be the correct answer.
IN A NUTSHELL
More or less, I need this to appear, dynamically, after every <div class="wrapSection">:
<div class="backToTop">
<a class="top" href="javascript:void(0)" onclick="goToByScroll('top')">
Back to Top
</a>
</div>
This is the solution I came up with:
$(document).ready(function() {
// Markup to add each time - just give the element a class to attach an event to
var top_html = '<div class="backToTop">Back To Top</div>';
$(".wrapSection").after(top_html);
// Use event delegation (see http://api.jquery.com/on/)
$("body").on("click", ".top", function(e) {
e.preventDefault();
$("html,body").animate({ scrollTop: 0 }, "slow");
});
});
You can try a jsFiddle here: http://jsfiddle.net/F9pDw/
My html
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
My javascript code :
$('[data-toggle="tabajax"]').click(function (e)
{
e.preventDefault()
var loadurl = $(this).attr('href')
var targ = $(this).attr('data-target')
$.get(loadurl, function(data) {
$(targ).html(data)
});
$(this).tab('show')
return false;
});
I have given links for tabs respectively. But i couldnt render those links in the page when a tab is clicked..
Could anyone please help me out of this.
Seems to work fine for me:
JSFiddle
The only code that I added to yours (aside from using some gists for the ajax calls) was putting the tab panes inside a <div class="tab-content">.
I need some help about creating more HoverCards with this plugin (download). I just created a code demo on JSFiddle. Do you have any recommendations about this?
JavaScript:
$('.babe-hover').hovercard({
detailsHTML: $(this).attr('data-control').html(),
width:278
});
HTML:
<ul class="demo">
<li>
<span class="babe-hover" data-control="control-01">William Johnson</span>
<div id="control-01" style="display: none;">
<p class="s-desc">Address: 64 Newman Street.</p>
<ul class="s-stats">
<li>Tweets<br><span class="s-count">1337</span></li>
</ul>
</div>
</li>
<li>
<span class="babe-hover" data-control="control-02">Hanson Thomas</span>
<div id="control-02" style="display: none;">
<p class="s-desc">Address: 64 Newman Street.</p>
<ul class="s-stats">
<li>Tweets<br><span class="s-count">1337</span></li>
</ul>
</div>
</li>
Now it working with some help from the author
$('.babe-hover').each(function(){
var $this = $(this),
myControlId = $this.attr('data-control'),
htmlForHovercard = $('#'+ myControlId).html();
$this.hovercard({
detailsHTML: htmlForHovercard,
width:278
});
});
anyway thank #egasimus for ur suggest :)
I suppose you're asking: why doesn't this work?
You're trying to call the .html() method on what $(this).attr('data-control') returns. $(this).attr('data-control'), however, only returns a string, and you need to obtain the corresponding element in order to use .html(). The following code works for me:
$("#" + $(this).attr('data-control')).html()
I.e., "select the element whose id equals this element's data-control attribute, and call .html() on it."