Highcharts legend item hover event? - highcharts

I have a chart where I want some series not to be clickable in the legend, but others to be clickable. That was easy, because there was a legendItemClick event that I could make do nothing depending on the series. An example is here: http://jsfiddle.net/9PqyG/3/
My problem is that the mouse pointer still changes from the arrow to the clickable-link-hand-pointer, and I don't want anyone thinking that this is clickable. I know that I can change the itemHoverStyle parameter to make the arrow appear for all the legend items, but that will change it for every series.
Can I make this happen only for a particular series?

I would up just using a CSS selector:
.highcharts-legend-item:first-child:hover { cursor:crosshair; }

I make it actually with modal with mouse hover event, This is how you can do this, please insert this code in your chart function:
$('#chart_container').on('mouseenter','.highcharts-legend-item',function(event) {
var seriesName = $(this).text();
if (seriesName === "this_series_name") {
$('#myModal').modal('toggle');
}
});
Then you can make a modal div to open with hover event like this one below
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Note</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
your message here
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Ok
</button>
</div>
</div>
</div>
</div>
this is a demo

Related

Bootstrap modal button click not firing with click event

I am using a bootastrap modal inside a .Net MVC Razor page which uses Vue JS
The modal popup is initiated with a button click event like below
<div>
<button type="button" class="btn" v-on:click="rejectModal(item)">Reject Popup</button>
</div>
rejectModal: function (item) {
this.selectedItemReject = item; //set a property
console.log(this.selectedItemReject);
$('#declineModal').modal('show'); //show modal
},
This shows the popup and text area to enter a comment and when i am trying to click on SAVE Button , The click event seems to be not firing. I am planning to add the notes property to selectedItemReject object and proceed with an ajax call and hide popup on SAVE button click. But no idea why the button click event is firing
<div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="declineModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="declineModalLabel">Decline Note</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<textarea name="decline-notes" v-model="rejectNote" placeholder="Add a note..." rows="4" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary" v-on:click="reject">SAVE</button>
</div>
</div>
</div>
</div>
reject: function () {
console.log("reject"); // NOT FIRING
}
Based on some suggestions already tried removing data-dismiss="modal" from close button , but no differece

Passing model to a partial view that is used for modal

I am trying to open the bootstrap modal by passing the model object dynamically. The modal content is in partial view as follows,
#model int
<div class="modal fade" id="modal-action-id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<form>
<input type="text" value="#Model" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" >cancel</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" >delete</button>
</div>
</div>
</div>
</div>
And, here is my div which opens modal by passing model object dynamically,
<div>
#{
for (int i = 5; i > 0; i--)
{
<div>
<button id="deleteModal-#i" type="button" class="btn btn-danger" data-toggle="modal" data-sid="#i" data-target="#modal-action-id">
<i class="fa fa-trash-o pr-2" aria-hidden="true"></i>Delete #i
</button>
#await Html.PartialAsync("_MyPartialView", i)
</div>
}
}
</div>
Now, the problem is no matter which button I click here it only passes the value 5 to the partial view. Also, I have only seen #await Html.PartialAsync() portion of code outside of for loop passing static model to the partial view in different applications. Am I missing anything here, conceptually? Any suggestion would be appreciated.
The reason is all _MyPartialView in same id id="modal-action-id", and that's why you click any button only to show same _MyPartialView.
You could change button data-target="#modal-action-#i"
<button id="deleteModal-#i" type="button" class="btn btn-danger" data-toggle="modal" data-sid="#i" data-target="#modal-action-#i">
and change div id="modal-action-#Model"
<div class="modal fade" id="modal-action-#Model" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Then, you can get what you want. All tested.

2 Modal show ordering for loading purpose

I'm writing a MVC project which using bootstrap. I create the button, and add event onclick function.
For the view, I have make 2 modal. The first modal id call "loadme" (just for loading message). The second modal is the result screen which contain table.
The loadme modal is simple as like
<div class="modal fade" id="loadMe" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<div class="loader"></div>
<div clas="loader-txt">
<p>Check out this slick bootstrap spinner modal. <br><br><small>We are addicted to Bootstrap... #love</small></p>
</div>
</div>
</div>
</div>
</div>
and the main result modal as below
<div class="modal fade" id="modalwnd2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Car Model Browse 2</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body no-padding">
<div style="width:100%; margin:0 auto;" id="CarSelectedList">
#Html.Partial("~/views/Home/_SubDemoTable2.cshtml", ViewData["CarRecords"])
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
At the tag, I have do as below
$('#cmdCustPopup3').on('click', function (e) {
e.preventDefault();
console.log('#loadMe show');
$("#loadMe").modal({
backdrop: "static", //remove ability to close modal with click
keyboard: false, //remove option to close with keyboard
show: true //Display loader!
});
var url = '#Url.Action("getCarList", "Home")';
$.post(url, { _partialViewName:'_SubDemoTable3'}, function (data) {
$('#CarSelectedList').html(data);
console.log('#loadMe need hide');
$("#loadMe").modal('hide');
console.log('#loadMe hide end, modalwnd2 show()');
$('#modalwnd2').modal('show');
},'html'
)
});
You will see , even I have added "$("#loadMe").modal('hide');", but the loadme modal is still screen. Can you advise what's wrong for that ?
Thank you
Do you added bootstrap.js in page? If not, try to include it and try again

MVC modal showing in full screen

Today I came across with this, I tried doing what was in the project and came across with the OP's problem about the full screen modal. I saw a solution below about about cutting the div and pasting it in an outer div.
I did what was in the solution but what happens is that the full modal div is retained and the normal popup shows.
If I add it to the script, no popup shows but backdrop changes.
How do I solve this? Thanks in advance
UPDATE
PARENT VIEW BUTTON
<button type="button" class="btn btn-success btn-sm modal-link" data-targeturl="#Url.Action("_Popup","Application",new { MotorId = item.motor_id, Serialno = item.serialno, AppNo = item.application_no, Remarks = item.remarks })"> View
</button>
PARENT MODAL
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
X
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
SCRIPT
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$("#modal-container").remove();
$.get($(this).data("targeturl"), function (data) {
$('<div id="modal-container" class="modal fade">' + '<div class="modal-content" id="modalbody" >' + data + '</div></div>').modal();
});
});
});
PARTIAL VIEW
#model iVehicle.ViewModel.FranchiseViewModel
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>Some content here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>

MVC partial view to Bootstrap modal injection - solution perplexing

I followed a great little solution over at CodeProject for injecting partial views into bootstrap modals with no explicit ajax calls required...
https://www.codeproject.com/Tips/826002/Bootstrap-Modal-Dialog-Loading-Content-from-MVC-Pa
In a nutshell, the author does this (UPDATE: I have added modal-dialog, which the author doesn't do but is required):
_Layout
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content"></div>
</div>
</div>
<script>
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
</script>
UPDATE - Here's the _Partial
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
... and by doing so makes any link with class="modal-link" inject its result to the modal automatically.
Seems wonderfully simple and elegant, but just one problem: The data-target he specifies is the <div id="modal-container">. Really? Why? The content should be injected into the <div class="modal-content">, shouldn't it? But nearly everyone has no problem, and no one mentions this conundrum. For me, the solution does exactly what he's told it to, it injects into <div id="modal-container">, thereby overwriting <div class="modal-content"> with my modal-body, etc. that are the contents of my partial view, so the display is messed up -- full width of the window and transparent, because it's not going into the modal-content.
Am I missing something here?
UPDATE
One of Stom's answers below is correct (I've marked it). However, as I've shown in updates above, I actually already had the <div class="modal-dialog" role="document"> in the _Layout and <div class="modal-header">, body, and footer in the _Partial. Ultimately, after this issue persisted for days, I woke up today and it just started working with no changes! Seriously? Frustrating. The problem previously was that the data-toggle was causing it to actually inject into the #modal-container, not the .modal-content. But now it started to function as Stom says the documentation says, which is that even though you set the data-toggle as the #modal-container, Bootstrap should inject it into the .modal-content. Why that was not happening before but is now, I haven't the foggiest. I haven't upgraded versions overnight or anything. Ghost problem ---
The content should be injected into the ,
shouldn't it?
Before version 3.1 it should be injected root element of modal i.e your modal-container But on version 3.1 it has changed. And now the bootstrap docs says it will be injected in modal-content.
modal-content with my modal-body, etc. that are the
contents of my partial view, so the display is messed up , Why?
Because your partial view should contain modal-body and not modal-content.
Also Adding modal-dialog inside model root element solves the syling issue.
So below setup should work for you:
Action Methods
public ActionResult Index()
{
return View();
}
public ActionResult GetPartialData()
{
return PartialView("_ExamplePartial");
}
Index View
<!-- Button trigger modal -->
<a data-toggle="modal" href="#Url.Action("GetPartialData","Home")" data-target="#myModal">Click me</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
_ExamplePartial View
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h1>Remote Partial Content</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
Note:
This option is deprecated since v3.3.0 and has been removed in v4.
Reference:
1.
2.
Below Setup should work to inject partial view content into modal body and it doesn't mess up with your default bootstrap modal style.
Action Methods
public ActionResult Index()
{
return View();
}
public PartialViewResult GetSomeData()
{
System.Threading.Thread.Sleep(2000); // Just to show delay to Get data
ViewBag.Message = "Example Data from Server"; //Using ViewBag Just for example, use ViewModel Instead
return PartialView("~/Views/Shared/_ExamplePartial.cshtml");
}
Index View
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" id="btnGetData">
Get Modal With Partial
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="partialViewContent">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
_ExamplePartial View
<h2>Partial View Contents</h2>
<h3>#ViewBag.Message</h3>
<p>Some More Static Content</p>
Script:
<script>
$(document).ready(function () {
$('#btnGetData').click(function () {
var requestUrl = '#Url.Action("GetSomeData", "Home")';
$.get(requestUrl)
.done(function (responsedata) {
console.log("success");
$("#partialViewContent").html(responsedata);
$('#myModal').modal('show')
})
.fail(function () {
alert("error");
})
.always(function () {
console.log("finished");
});
})
});
</script>

Resources