Some javascript help needed

[Werner]

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...

<div class='context-menu-one'>
  <%= h.text_field :field %>
</div>

$(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

[Crispin Schäffler]

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):

<div class="context-menu-one">
    <%= h.text_field :field, data: {insert: 0} %>
</div>

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...

[Werner Laude]

Am 18.04.2013 um 15:49 schrieb Crispin Schäffler <crispins...@gmail.com>:

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):

<div class="context-menu-one">
    <%= h.text_field :field, data: {insert: 0} %>
</div>

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:

<div class="context-menu-one">

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

</div>

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 

would make it a bit more reuseable...

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

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...

<div class='context-menu-one'>
  <%= h.text_field :field %>
</div>

$(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

--
You received this message because you are subscribed to a topic in the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/rubyonrails-talk/M4ia565UuJo/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to rubyonrails-ta...@googlegroups.com.
To post to this group, send email to rubyonra...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msg/rubyonrails-talk/-/u5NASXAqtVcJ.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Crispin Schäffler]

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:

<div class="context>
    <div class="tooltip data-input="0" style="display: none;">
        <h1>Heading</h1>
        <p>Lorem ipsum dolor ist amet.</p>
    </div>
    <div class="menu>
        <div id="trigger-tooltip>Click me for details</div>
    </div>
    <%= h.hidden_field :field %>
</div>

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') -> <div 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