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
Am Donnerstag, 18. April 2013 21:13:17 UTC+2 schrieb Werner Laude:
>
>
> Am 18.04.2013 um 15:49 schrieb Crispin Schäffler
> <[email protected]<javascript:>
> >:
>
> 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
> [email protected] <javascript:>.
> To post to this group, send email to [email protected]<javascript:>
> .
> 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.
>
>
>
>
>
--
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msg/rubyonrails-talk/-/EA_N2xYBT0cJ.
For more options, visit https://groups.google.com/groups/opt_out.
