I'm currently studying jquery widget. What I did was convert a working javascript code into jquery widget.
So the goal would be able to create a chart and update it when new data arrives. In the code that I'm going to show you, I just used timeout to update the data.
JSFIDDLE
If you're using chartjs, you'll definitely know that you need to call destroy to delete the iframe created by chartjs then recreate it to successfully update the data.
I was able to redraw the chart but when you hover it, I could still see the previous chart. I know that that kind of scenario happens only if I didn't destroy it properly. But I have this code which is supposed to destroy the iframe.
update: function() {
this.destroy();
this._create();
}
1) If I'm not deleting the iframe, then what is?
2) how will I correct this code?
I think the problem with my code is when I used this then called destroy. Because when you say this I think it is referring to the element created not what new Chart(...) returns. So what I did was save the value returned by new Chart(...) then used that to destroy the chart. see how I did that in the jsFiddle
options : {
labels : [],
data : [],
pieChart: null
},update: function(){
pieChart.destroy();
pieChart._create();
}
If you have additional or more meaningful answer than mine, please feel free to post it as well. Thanks :)
Related
Started to try out this fancybox3 plugin to zoom thumbnail images in our app that works perfectly on desktop and mobile browsers.
In the app where the cart has thumbnail images of the products added to it that can be purchased. If I remove a product(image of it)from the cart, it gets removed from the cart, however, if I zoom one of the remaining product images of the cart and navigate through it, still showing the removed product there. I am expecting to see only the product images present in cart.
I tried using the preload: 0 option but that does not work for me. Fancybox is initiated in following way
$('[data-fancybox="images"]').fancybox({
idleTime : false,
loop: true,
transitionEffect : "fade",
animationDuration: 333,
buttons: [
'close'
],
protect: true,
infobar: false,
preload: 0
});
Any help to make this work is really appreciated.
Thank you
Looks like you have misunderstood the concept of "preloading". The script preloads images before displaying, but what that means is that it is showing loading icon before displaying full image. If you disable preloading and provide dimensions (width/height) of full image, then the script will display thumbnail image while full image is loading. This is a great feature if you want to make your app/webpage look more interactive (e.g., user would not stare at black overlay with loading icon but will see something useful instead).
But what you have described sounds like "caching" and fancyBox is not caching dom elements. So, if you see something in the gallery, that means that corresponding element exists in your page.
So, make sure that your product is actually removed from the dom or try to tweak the selector to match only "actual" products using "selector" option, e.g., something like:
$().fancybox({
selector : '.fancybox:not(.removed)'
});
Obviously, you should tweak this to suit your needs. Since you have not provided any details, I can not create a full example.
#Janis, Thank you so much for the clarification on 'preloading' concept.
You were right about dom still holding the removed item. Upon removal, the div is simple being set as display none.
First, I added code to remove the div form the dom but that resulted in page getting refresh which we don't want.
Next tried, the selector option and it worked perfectly.
function hideCartItem(id) {
var divItem = document.getElementById("divCartItem" + id);
var elem = "#divCartItem" + id
if (divItem != null) {
$(elem).hide();
$(elem).remove();
// added code
$('[data-fancybox="images"]').fancybox({
divItem: '.fancybox:not(.removed)'
});
}
}
Thank you so mcuh for your help. Much appreciated!!
I am working on a project where I need to use a messaging system.
I have an inbox: When I used the $state.reload() to show the newly sent message but when the state gets reloaded the header bar gets disappeared and doesn't gets visible until i do the manual refresh. I am using ionic 1.1.1 version
I searched a lot but didn't get any suitable reason that why it is happening. Kindly suggest me on this.
So, after searching a lot for ways to solve this problem, that I am also stuck on, I found out there is not! Unfortunatelly updating to the new version of Ionic did not help, and the workaround provided at Ionic's GitHub desn't work for me. It is:
$scope.$on('$ionicView.enter', function(e) {
$ionicNavBarDelegate.showBar(true);
});
But if you have custom buttons in your header, this code doesn't work as expected. There are some jQuery solutions too, but I think it's not what we really need.
Source: https://github.com/driftyco/ionic/issues/3852
EDIT
So, I've worked on a pure Javascript solution, for my situation, and here it is. Hope it can help.
$scope.$on('$ionicView.enter', function(e) {
$timeout(function() {
showHeader();
}, 1000);
function showHeader() {
// Having the nav-bar in your template, set an ID to it.
var header = document.getElementById('header_id');
if (header.classList) {
if (header.classList.contains('hide')) {
header.classList.remove('hide');
}
}
}
});
For me what was causing that issue came from the solution of this problem:
https://github.com/ionic-team/ionic-v1/issues/119
Once i removed this line:
$ionicConfigProvider.views.maxCache(0);
from my config phase the action bar started to work again.
I have a large form with a image upload field working ok.
Field is defined in model as:
$this->add('filestore/Field_Image','thumbnail_id');
Then I created two tabs inside form:
$tabs=$form->add('Tabs');
$main=$tabs->addTab('General');
$design=$tabs->addTab('Design');
And moved image field to design tab:
$design->add($form->getElement('thumbnail_id'));
Now I can't upload files. When I try I get the following javascript error
Error: cannot call methods on atk4_form prior to initialization; attempted to call method 'submitPlain
Is there any other way to move the field or have upload working again after moving it?
I was trying to use the same method ($design->add($form->getElement('my_element'));) to move a slider into another place on the page. That didn't work - I think it was because the slider input field is not placed on the page the same way as other input fields.
So I tried with the jQuery appendTo-method (I found the hint in a comment from romanish in a documentation page). That worked. But then I experienced the same problem as you - and in the end I gave up and solved the problem by editing the slider-class page.
So I can't help you, sorry, but I guess this points out that there is a general problem related to getting input from moved form elements.
The object is to Show-Hide text located under their respective Titles, so a User reads the title and shows or hides text belonging to that title if the User wants to read more.
I tried whatever I could find so far on here, we're talking dynamically setting text coming from a spreadsheet, can't use IDs, must work with .class, must be missing something, I have this piece of code:
... html.push('<div class="comments">' + comment + '</div></div></div>');
but when I try this Show-Hide code nothing happens, even if the error console shows nothing. Basically I want to Show-Hide the .comments class divs with a show-hide toggle link located under each of them. I say them because the .comments divs are reproduced dynamically while extracting text coming from Google spreadsheet cells/row (one .comments div per spreadsheet row). I tried .next, child and parent but they all divorced me so I dunno looks like a dynamic issue. So far I only managed to globally toggle all divs to a visible or hidden state but I need to toggle independantly individual divs.
I prefer a jQuery solution but whatever worked so far was achieved with native javascript.
Note: If a cross-browser truncate function which would append a more-less link after a number of words (var) in each .comments divs would be easier to implement then I would gladly take that option. Thx for any help, remember I am still learning lol!
I have been working on an entirely JS UI project and have brought myself to using $('', { properties }).appendTo(BaseElement) to work best for adding HTML elements because it appropriately manipulates the DOM every time.
If you are having good luck with push elsewhere, however, breakpointing on the line where you do your $('.class').hide() and see what $('.class').length is. Alternately, you can just add alert($('.class').length) to your code if you are unable to breakpoint the code. If it is 0, then your elements have not been properly added to the DOM. Changing to append will ensure they are part of the DOM and therefore targetable via JQuery.
In jqtouch and iui, what do you do if you want to follow a link like This is a FEED AND dynamically load the content of the <div id="feed-49"></div>?
I've tried bind/live a click handler onto the "a" and onto a parent "div" but it never gets fired, just the event for actually following the link. Thanks.
This is a simplified version of my other question:
jqtouch mobile app ajax loading issue
It depends whether you want the page pre-loaded or load-on-demand.
If you want it pre-loaded, you might want to fill in the page upon, say, $(document).ready:
$(document).ready(function(){
$('#feed-49').load('feed-49.html');
});
If you want it to load on-demand, you can listen to the pageAnimationStart event:
$('#feed-49').bind('pageAnimationStart', function(event, info){
if (info.direction == 'in')
$(this).load('feed-49.html');
});
You may want to read the jQTouch's documentation on callback events.
I just went through what you are going through and know exactly how to solve it. You need to turn that XML into JSON objects, which will be numbered [0],[1], etc.
This JQuery plugin works and rocks : http://www.fyneworks.com/jquery/xml-to-json/ Add that JS to your app. Your parse XML function will then convert the XML nodes you want (like item nodes within a channel) into JSON objects and then numbers the items.
So look how I then empty the current list of items, build a list of the items and add a custom CLICK function to the list items with a class of "sun" (i love jquery). That function then will add it's parent node title and desc to the divs that need it. The href will push it to the new jqtouch DIV which will handle all the detail info. Cool 'eh? Vote me up if this works. It did for me, like a charm.
function parseXml(xml)
{
$('#feedList').html('');
var rss = $.xml2json(xml);
$.each(rss.channel.item, function(i, item)
{
$('#feedList').empty().append('<li class=sun'+i'><a href=#contentDiv>'+item.title+'</a></li>');
$('.sun'+i).click(function() {
$('#titleDiv').empty().append(item.title);
$('#descDiv').empty().append(item.description);
});
});
};