Some javascript help needed

Rails
#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 fr 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…

Am Mittwoch, 17. April 2013 14:36:39 UTC+2 schrieb Werner:

#3

Am 18.04.2013 um 15:49 schrieb Crispin Schffler
[email protected]:

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:

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

Am Donnerstag, 18. April 2013 21:13:17 UTC+2 schrieb Werner L.: