I created a time series chart using high-charts. For some scenarios there is no data to have a chart for them.
Is there any way to hide the high-charts and don't show it at all when there is no data to show?
There is a way, using HTML and jQuery. You can put the chars inside a div and if there is no data you can use jQuery to hide the div where the chart is.
Something like this would work:
HTML code:
<div class="chartIsInside">
<!--chart here-->
</div>
JavaScript code (using jQuery):
if(data === null){ //or empty or whataver
$('div.chartIsInside').hide();
}
There are effectively a billion ways of doing this, this one seems the most simple to me.
Related
I am trying to set up a table in an index view of my "relations" controller including an editable dataslider which directly safes the "preference" value to my db.
Is it possible to combine bootstrap dataslider with "best_in_place" or form method or is that nonsense? (I am newbie on ruby on rails) Does anybody have any suggestions ? Thanks for your help!
I am using "bootstrap slider rails"
Doing what you want through forms may be a little challenging - you'll have to nest each one in a form, ensure that submitting the form doesn't reload the page, etc.
The easiest thing to do might be to pass an onChange function to your data slider that posts the data to the backend. Something along the lines of this (I don't know the data-slider component so I'm sort of guessing as to syntax):
html:
<input id="slider" />
js:
$("#slider").slider().change(function(data) {
$.post({ url: "my/url",
success: function(response) { ... },
...
});
});
Here is what I am trying to do.
If the user makes a selection from the suggested options then I display a div tag using jquery. I use onCompleteTopics to fire this event.
Now when the user makes any changes to the text box I want to hide the div tag again unless the user makes a selection from the suggested options.
How to fire the text changed event on jquery struts2 autocompleter.
I make a div tag visible when the user selects something from the suggestions using onCompleteTopics.
However if the user changes the text in the field I want to hide the div tag again.
But I am not able to find the right event for the same.
After trying a lot of permutation and combination I managed to figure out the solution. Its not straightforward maybe not the ideal solution but it works.
Struts Code
<sj:autocompleter
theme="simple" name="userName" id="idautocomplete"
href="%{fetchList}" onSelectTopics="complete" onSearchTopics="textchange"
loadOnTextChange="true" loadMinimumCount="3" />
Note I have used onSelectTopics and onSearchTopics but this itself do not solve the problem. I have to use some jquery along with this.
jquery
var gvar;
$.subscribe("complete", function(event, data) {
gvar = data;
setTimeout(delayfunc, 0);
});
$.subscribe("textchange", function(event, data) {
$('#idBizAccess').css("display","none");
});
function delayfunc() {
$('#idBizAccess').css("display","table-row");
}
The unusual part here is setTimeout with delay 0. I tried calling the function directly but it doesn't fetch the selected value instead it just fetches the value that is typed in the autocompleter field.
Now it works as per the requirement.
I am using Shield ASP.NET MVC charts on a page. I need the charts to initially show data for my visitors, and I need to provide the user the possibility to hide the charts by clicking on the corresponding button(s). For this purpose I use the following function:
<script>
function HideChart() {
document.getElementById("DataSpot").innerHTML = "";
}
</script>
And I am placing the charts as follows:
<p id="DataSpot">
#(Html.ShieldChart()
.Name("chart")
.PrimaryHeader(header => header.Text("Profile Hits"))
.Export(false)
.AxisX(axisX => axisX
………..
)
</p>
<button onclick="HideChart()">Hide Chart</button>
The problem is, that when I click on the button, nothing happens.
#user2492467,
Do you need to hide the chart or do you need to wipe out its content? If just hiding the chart, the approach suggested by Chris would work just fine. However, if you need to irrevocably wipe out the chart from the page altogether, then clearing its content is not enough. Only removing the rendered chart markup would open the door for memory leaks, as references to the DOM nodes may remain in the chart javascript component.
A better approach would be to find the javascript component instance and call its .destroy() method. This will ensure the component is fully destroyed and no memory is leaked:
$("#DataSpot").swidget().destroy();
Note that you still need to give your chart a name using the MVC wrapper's .Name("DataSpot") method just like Ed suggests. This will give your chart's HTML element an ID that you can use with jQuery to find the chart instance.
The .swidget() method is a standard jQuery extension method added by the Shield UI javascript framework. It returns the javascript component instance associated with the element matched by the jQuery selector. This is how you find the chart instance.
How about:
<script>
function HideChart() {
document.getElementById('DataSpot').style.display='none';
}
</script>
You should also update your button:
<button type="button" onclick="HideChart()" value="Hide Chart" />
Actually there is something happening, obviously not the thing that you need. This is because you need to wipe out the rendered chart by referencing its container.
The element is fine and if you put some text in your function and execute it you will see that it will appear on the appropriate spot. However to hide the chart you need to use it’s name. In other words the following statement:
document.getElementById("DataSpot").innerHTML = "";
should be changed to
document.getElementById("chart").innerHTML = "";
or you may rename the chart to
.Name("DataSpot ")
and remove the P element in both cases since it makes no use.
A question similar to this has been posted several time, but I cannot find a solution that works. Hopefully, someone can help!
I am using jQuery Mobile 1.1 and jQuery 1.7.2, so I'm on the most recent stable releases. I want to create a dynamic page header. Using this HTML code, it works fine:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
<h1>Title</h1>
</div>
</div>
So I then go to dynamically create the title. I change the HTML to this:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
</div>
</div>
And added the following jQuery code:
// Set the header
var dirHeader = $('#hdr_levela');
dirHeader.append('<h1>' + title+ '</h1>');
The title appears, but is not styled. I have found several posts about this. In the jQuery Mobile Documentation, it says:
"However, 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.).
For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event 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" );
So I tried several things. After the above code, I added the following:
dirHeader.trigger("create");
This had no effect. So I tried to put it on the actual append itself:
dirHeader.append('<h1>' + folderName + '</h1>').trigger("create");
This had no effect. I then tried the process on the parent element (in this case, the id of the parent div is "levela"). So I tried this:
$('#levela').trigger("create");
This also had no effect. At this point, I am completely lost. Every solution involves doing one of the things I have tried and is just not working. I must be missing something incredibly basic but I just can't seem to find it.
Thanks in advance for your help!
You can update the content by calling .page:
See this working Fiddle Example!
// Set the header
var title = 'super hyper BuBu',
$dirHeader = $('#hdr_levela');
$dirHeader.append('<h1>' + title+ '</h1>').page();
I just solved a similar problem -- it appears that jQM headers and footers do not have the "create" method, so as far as I can tell, the css classes and roles need to be added manually.
For reference, I posted an example fix on this (old) question: JQuery Mobile trigger('create') command not working
This whole jQuery mobile dynamic data (pulling data from the server) is driving me nuts. Why should it be this difficult to manipulate the DOM and the refresh the page?
I have my page:
<div data-role="page" id="intranet-holidays" data-title="HOLIDAYS" data-add-back-btn="true"></div>
In document.ready I have the following:
$( document ).delegate( "#intranet-holidays", "pagebeforecreate", function() {
$('body').addClass('ui-loading');
$.mobile.loadingMessage = "Loading Holidays...";
$.mobile.showPageLoadingMsg();
// calls getJSON to retrieve data from the web server
loadHolidays();
});
When my data returns back from the server I add collapsible DIVs into my page (intranet-holidays).
Inside of the collapsible DIVs I have some ULs.
I know my syntax is correct because I can grab the generated HTML, save it to a file, then display that file and it all shows correctly. Here is a screen shot:
Here is what my dynamically loaded page looks like (not what I want):
I know that I can refresh a listview with the following:
$('#list').listview('refresh');
That works great for a list.
How do I refresh the page (that contains collapsible DIVs and those collapsible DIVs contains ULs)?
Yes, I want all the data in the page to be dynamic.
In the success handler method of the AJAX call that fetches the JSON data,add $('#intranet-holidays').trigger('create'); after you create the lists.
Try:
$('#page').trigger('create');
Or read:
http://www.elijahmanor.com/2011/02/dynamically-appending-elements-to.html