Allowing a cell to be jeditable with left-click OR open a dialog upon ctrl-click

Question

Update: I still haven't figured this out, but saw Jquery - Jeditable: How Reset to non-editable without page refresh which looks similar to what I'm wanting to do. Tried to incorporate it but am not sure I'm doing it correctly since it is taking 2 clicks (or 2 ctrl-clicks) for it to behave in the way I'm expecting.

$("div.wanttoedit").click(function(e){
if (e.ctrlKey) {
$('div.wanttoedit').addClass('non_edit').removeClass('edit').unbind('click.editable');
alert('Ctrl was pressed');
} else {
alert('Ctrl was NOT pressed');
$('div.wanttoedit').addClass('edit').removeClass('non_edit');
$('.edit').editable('http://#request.host#/vp/metrics.cfc?method=updateMetrics&returnformat=plain');
}
});

<div id="#results.id#" class="wanttoedit non_edit">#val(value_disp)#</div>

Again, any help is mightily appreciated. Thanks.

---

I'm still very new to jquery/javascript/jeditable so please be kind and as explicit as possible. :)

I have a table with row labels = Metric Name and column labels = Months. The cells contain the corresponding metric values. I want to be able to single left-click and have the metric value be editable but also be able to ctrl-click (or right-click, shift-click or other) and be able to enter a reason why the metric was missed (if it was). These two things are updated in two different tables in my database, but both are linked back to the metric_id/name and timeframe/month they are associated to.

I have been able to get the single left-click editing of the metric value working through jeditable but I have been unsucessful so far in finding a way to make the field also allow the other-click pop-up of a dialog box to enter the miss information.

Any help would be sincerely appreciated especially if you can make it easy to understand for this rather simple girl.

I'm using Coldfusion (not sure if that is necessary knowledge, but thought I'd mention it just in case) and can provide any code snippets as necessary to allow you to help me get this fixed.

Here is a sample of my code, I'm using jquery tabs, so the editable is in a rather different place than usual (hopefully I'm including everything you need to see...if not just let me know what I might be missing)

$(document).ready(function() {
$("#cymteamtabs").tabs( {
cache: false,
load: function(event,ui) {
$(".editMetric").editable("http://#request.host#/vp/metrics.cfc?method=updateMetrics&returnformat=plain");
},
ajaxOptions: {cache: false}
}
);

<cfloop query="metrics">
<tr>
<td>#metrics.mdisplay#</td>
<cfloop query="dates">
<td id="#results.id#" class="editMetric">#val(value_disp)#</td> </cfloop>
</tr>
</cfloop>

Oh and just to make sure I was clear on what I want it to do....if I ctrl-click on the field, the pop-up would appear allowing the entry of the miss info (the editing is disabled). Once that dialog is closed, if I left-click on the field it would enable editing of that field so, basically I don't want to ever turn off jeditable completely, I just want it to go into hibernation mode between the time that the user ctrl-clicks on the field and when the dialog box that pops-up because of that is closed.

Thanks in advance.

Answer 1

I'm not certain that this is the best way to do this, nor am I positive that it is doing exactly what I want it to do, but it so far appears to work.

$(document).ready(function()
{
$("#cymteamtabs").tabs(
    {
    cache: false,
    ajaxOptions: {cache: false},
    load: function(event,ui)
        {
        $(".editMetric").click(function(e) {
            if (e.ctrlKey) {
                var metric_id = $(this).attr('data-metric-id');
                var date_type = $(this).attr('data-date-type');
                var value_date = $(this).attr('data-value-date');
                var url_tf = 'cym';
                var url_view = 'edit';
                scorecards.display.miss_details(metric_id,date_type,value_date,url_tf,url_view);
                e.stopImmediatePropagation();
            }
        });
        $(".editMetric").editable("http://<cfoutput>#request.host#</cfoutput>/vp/metricCFComponents.cfc?method=updateMetrics&returnformat=plain");
        }
    });
});

This appears to check first for the ctrl-click and if it is pressed, then the non-jeditable code runs and the e.stopImmediatePropagation(); appears to not allow the jeditable code below it to run.

Answer 2

The only way I can think of sorting this is a little bit of a hack. There doesn't seem to be anyway of running a conditional on the event so what I propose is setting two event types and switching between them when ctrl is pressed

The problem is the event types - unbinding them seems a bit excessive. The best option would be to set the editable element as the <td /> as you have but have a separate element (like a span) as the trigger.

To continue with your current html you could try this:

$('.editMetric').editable('url1', {
    event: "nrmlClick"
}).editable('url2', {
    event: "ctrlClick"
}).bind('toggleClick', function(e) {
    if (e.ctrley) {
       /* modal javascript here */
       $(this).trigger('ctrlClick')
    } else {
        $(this).trigger('nrmlClick')
    }
});​

I don't have the facilities to test this properly but this should work.

I've never made up event names before so I don't know how good an idea that is (hopefully someone can enlighten us) but I can't see the harm right now.

Hope that helps!