Some javascript help needed

rubyonrails-talk
1

I need a little support with js. Would be great…

I have a textfield with a hover function. If click on the popup I want a value 0 dropped into the textfield.

With the code below just a alert appears…

<%= h.text_field :field %>

$(function()

{ $.contextMenu({ selector: ‘.context-menu-one’,

   items: {

“paste”: {name: “Paste”, icon: “paste”},
} });

$('.context-menu-one').on('click', function(e){

console.log(‘clicked’, this); // here ???

})

});

Thanks für your Support

Werner

2

either find the input by the id (look at compiled html code, but it is something like FORMNAME_FIELDNAME) and use val to get data into it.

however, if you want to reuse the function i would recommend something like this (totally not tested and straight out of my mind):

<%= h.text_field :field, data: {insert: 0} %>

and in your javascript:

$(document).ready(function() { $(‘.contest-menu-one’).on(‘click’, function() { var self = $(this); var input = self.find(‘input’); var data = input.data(‘insert’); input.val(data); }); });

would make it a bit more reuseable…

3

Hi Crispin… thanks so far…

I get the idea… but still…

either find the input by the id (look at compiled html code, but it is something like FORMNAME_FIELDNAME) and use val to get data into it.

however, if you want to reuse the function i would recommend something like this (totally not tested and straight out of my mind):

<%= h.text_field :field, data: {insert: 0} %>

and in your javascript:

What I understand:

$(document).ready(function() { $(‘.contest-menu-one’).on(‘click’, function() {

when I click

    var self = $(this);

I get an identifier?

    var input = self.find('input');

find … but what…this is unclear to me

    var data = input.data(0); //put it to 0 and remove the data: {insert: 0}

    input.val(data);

});

});

my code is:

<input class="submittable" id="booking_user_746_angefragte_stunden" name="booking_user[746][angefragte_stunden]" size="30" type="text" value="21" />

May be step two…if I get the above working

Another thing is that I actually don’t click the insert field directly, but a small pop-up window above it

the is some coffee:

$ →

$.contextMenu

selector: ".context-menu-one",

trigger: 'hover'

autoHide: true

items:

  zero:

    name: "Ableh."

    icon: "delete"

    #callback: ->

     # m = 0

      #alert(m)

Js is a little nightmare fore me… need some time

Thanks

4

So I see.

It would be cool if you could describe what you intend to do with this, e.g. simply fake like an checkbox with custom checkboxes.

For a quickstart in jquery (i would recommend to use jquery) look at code school, they got a pretty solid free course which will help you start going.

Correct me if I got you wrong on this one but i think what you try to do is the following:

have some context hidden from the user until he triggers an event (your example, hover) and then populate a field with a given value of that triggered event. the question is, do you really need to insert the tooltip with coffeescript or would it be good to use something like this:

Heading

Lorem ipsum dolor ist amet.

Click me for details
<%= h.hidden_field :field %>

and in your js listen for the events:

$(document).ready(function() { $(‘#trigger-tooltip’).on(‘click’, function() { $(this).closest(‘.context’).find(‘.tooltip’).toggle(); }); });

$(document).ready(function() { $(‘.tooltip’).on(‘click’, function() { var data = $(this).data(‘input’) $(this).closest(‘.context’).find(‘input’).val(data); }); });

This would listen for a click event on a div called tooltip trigger and then toggle it (showing it and on another click on the div hide it) and the second function listens on a click event for the tooltip div itself getting the data-input value and setting the input field in the div class=“context”

if you want to restrict manual user input into a field it is better to use a hidden_field (hidden field simply isnt displayed but since you populate it anyway its not that much of a hassle…)

If I got you wrong on what you really want to do it would be cool if you could give a short description what you want to do and how your dom looks like (maybe post full form)

since you had questions about the last code example:

var self = $(this); // I use this often so i can better stick with the ruby convention to self. it is the object that triggered the event - so i can write self.function and dont need to type $(this) all the time. you will find this stuff quite often.

.find() // traverses the dom downwards to find the first object responding to the expressung or find null - means .find(‘input’) will give me the first input after $(‘this’)

var data = input.data(‘insert’) // returns the data-insert=“0” - its a way to pass stuff to JS using the data array for an object. data(‘FIELDNAME’) →

input.val(data) // you dont need to set the data inside the input to 0 first to override it since you dont append to the stuff already contained in that input

hope this is helpful in some way for you.

sincerly, crispin