Input value problem

[gostbuster]

Hi Everyone (and Hi Craig)

I noticed something weird with the tooltip.

I have actually two problems :

first one :

Imagine a select input with options, when I have the mouse pointed on an option, i want to display something about it (and obviously, this something depends on the option),

I can't get the value of the optio, here is my code :

JS Code

$("#description > option:not(:first):hover").
   //load(function(){
 
 
   //$(this).
   qtip({
 
       content: 
       {   
         text:<span style="font-weight: bold;">HERE I WANT THE VALUE OF THE OPTION</span>
 
          }
.....etc...
 
and now you can imagine a html like this :
<select>
<option>....</option>
....etc

I posted on several french board because I tought it was a javascript with selectors problems....
I'm still waiting for answers on these boards.

But I noticed something while I was doing another feature :

I have a input, and we have to enter a number into it. But the number hasn't to be used...And i want to test in with a jquery request.

I tested this code :

JS Code

$(function(){
 
   $('#numero').blur(function(){
   alert($(this).attr("value"));
 
   }   
 
)})

It works : you enter something, it display what you entered. You changes the input value (you enter another thing), is displays the modified content...

Now i tried this :

JS Code

$(document).ready(function(){
 
   $('#numero').qtip(
         {
 
            content:{
 
               text:+$(this).attr("value")
 
         },

It displays "undefined".. so I tried this :

JS Code

text:+$('#numero').attr("value")

And it doesn't work. here is the scenario :

I load the page, the input is empty. I enter something("5" for exemple), I blur, it displays "".
now I just reload the page, the input content is "5", i enter something replacing the content (6 for example) and when i blur, it displays "5" (content no refreshed...)

does it seem to be a bug ?

I really don't understand...

thankyou in advance.

[Craig]

Hi gostbuster,

This is actually a common error when dealing with jQuery's selectors and the $(this) statement. What your actually doing when you reference $(this) in a function of a selector e.g. $('selector').myFunction, is referencing the jQuery object itself, hence why you're getting undefined!!!

What you need to do is encapsulate it in the .each() method, which gives you access to each element within the selector, as well as their attributes. So here's the code which should work for you:

JS Code

$("#description > option:not(:first):hover").each(function() // Notice the each function 
{
   $(this).qtip({
      content: $(this).attr('value')
   });
});

Your second code example also suffers from the little mistake. Here's what it should look like:

JS Code

$(document).ready(function(){
 
   $('#numero').each(function(){
      $(this).qtip({
         content: +$(this).attr("value")
      });
   });
 
});

Hope that helps clarify things!

[gostbuster]

Hi Craig, you're GREAT ! I passed hours and hours with the first problem ! But now it's okay. Thanks a lot.

However, i'm still in trouble with the other problem.

You suggested me a code that I try, but it's the same. It's a different probleme from the first One.
I'll try to explain again in a better language (excuse me in advance if you did understand !)

Imagine an input field like this :

<input type="text" id="numero" value=""/>

the id is unique (there is only one element (input type) named numero.

Well the problem is (and with your code, it's the same) :

I can't get the content value :

First the input is empty, i get then Nothing...it's normal
I enter something, it should display what I entered, but it doesn't....

That's the matter....
do you see it?

Thankyou in advance !

[napre]

Hi Gostbuster,

Have you tried using the api? There may be an easier option out there but this is what I use.

Hope this helps.

JS Code

$("#numero").qtip({
       content: $(this).attr("value"),
       api: {
      beforeShow: function() {
      var Value = $("#numero").attr("value");                   
       this.updateContent(Value);
      }
   },
   position: { corner: { tooltip: 'leftMiddle', tooltip: 'leftBottom' }}   
  });

[gostbuster]

Hi napre and thank you for this answer.

It's almost what I need, but I'm still in trouble.
I actually want to get the value (that's done) and request a page with this value,

according to what is answered, i need to display the tooltip or not :

exemple :

JS Code

<?php
$value= my value getted;
if (value==Something)
{
return (or echo) true;
else return false
}

I'm still looking for thos, using the doc and tryin stuff, but a little more help would be great.

Thank you very much.

[Craig]

Hi gostbuster,

You can do this quit easily using the API, as napre suggested. So say when you submit the form you want to check the input is valid:

JS Code

$(form).submit(function()
{
   var input = $('.input-with-qtip-attached-selector'); // Find the input yo uwant to validate
   var api = input.qtip('api'); // Access the API of the tooltip
 
   if(input.value !== 'myValue') api.hide(); // Hide the tooltip if the input is invalid!
});

Hope this helps!

[gostbuster]

Hi guys,
thanks to your help, I'm very close to the result I expect.
I tried lot of stuff. Now here is the scenario :

I want to test if a number is already used or not. If it's used, a tooltip appears saying "it's used". Else, it doesn't.
This tooltip appears on blur event.

With this code below,if the number is used, the tooltip appears (as expected :-) ) but, if the number is free, the tooltip appears,and it disappears just a second later. I don't want it to appear when it's okay.
I tryed several things but without success.
Here is my code :

JS Code

$(document).ready(function(){
 
         //just the function to config the qtip with content and position
    $("#numero").qtip({
 content:'Le numéro est déjà utilisé',
      position: { corner: { tooltip: 'leftMiddle', tooltip: 'leftBottom' }},
      show:'blur' ,
      style:
       { tip: 'leftMiddle',
          width: { 
            max:400
          }
       }
     });
 
//the function triggered when i blur the input :
    $("#numero").blur(function()
            {
         //thanks to Craig, I can get the api.
        var input = $('#numero');
        var api = input.qtip('api')
      //i'm doin my ajax request. it answers me 1 when the number is free, nothing if it's not
          $.ajax({
          url: 'emplacements/verifiernumero/numero/'+input.val(),
          success: function(responseText){
           if (responseText == '1')
           {
            //here I ide the api, when it's okay, but it has been displayed just before during 1 second....
              api.hide();
           }
      }, 
 
          error: function(responseText){
          // on error callback
          }
          }); 
            });  
   });

Thank you in advance for you last(i hope) little help.
Thanks a lot !

[Craig]

Try using the beforeShow event and return false if you don't want it to show:

JS Code

$(document).ready(function(){
 
   //just the function to config the qtip with content and position
   $("#numero").qtip({
      content:'Le numéro est déjà utilisé',
      position: { corner: { tooltip: 'leftMiddle', tooltip: 'leftBottom' }},
      show:'blur' ,
      style: { 
         tip: true,
         width: { 
            max:400
         }
      },
 
      // Access the API
      api: {
         beforeShow: function()
         {
            // Use the target element: $("#numero")
            var input = this.elements.target; 
 
            // Do your AJAX request
            $.ajax({
               url: 'emplacements/verifiernumero/numero/'+input.val(),
               success: function(responseText)
               {
                  if (responseText == '1') return false; // Don't show the tooltip if it's successful!
               }, 
               error: function(responseText)
               {
                  // on error callback
               }
            }); 
         }
      }
   });
});

Hope that does what you're looking for! Get back to us with any other queries or help if needed.

[gostbuster]

Hi Craig and thanks for your help !

I'm afraid that returning false doesn't hide the tooltip.
I tryed your code and the tooltip shows whatever the test result....

Do you see where could be the problem?

Thanks...

[gostbuster]

Hi everyone,

I'm still in trouble with this tooltip which show. doesn't somebody have a clue about how could I solve it ?

Thanks a lot in advance.

[Craig]

Sorry about the long delay in replying. In the process of moving over to launchpad for various bug reporting and feature suggestion services!

Could you send a link to a demo page or the code your using? Returning false should definitely work, as I've tested it numerous times.

[gostbuster]

Hi Craig and thank you for replying. Don't be sorry about delay, I know you're should be busy with other stuff and it's normal

Well, Here is My code :

JS Code

$(document).ready(function(){
 
 
    $("#numero").qtip({
       content:'Le numéro est déjà utilisé',
      position: { corner: { tooltip: 'leftMiddle', tooltip: 'leftBottom' }},
      show:'blur' ,
      style:{ tip: 'leftMiddle', width: { max:400 } },
 
        api: {
            beforeShow: function()
            {
 
               // Use the target element: $("#numero")
               var input = this.elements.target; 
 
               // Do your AJAX request
               $.ajax({
                  url: 'emplacements/verifiernumero/numero/'+input.val(),
/* The content returned has been tested (with alert dialogue box. it returns 'yes' if the number is free, 'no' if it isn't or 'empty' if no number has been entered*/                 
 
 success: function(msg)
                  {
 
               if (msg=='yes')
               {
               alert('number is free');//just to see that the number is really free.
               return false; 
               }
               else if(msg=='empty')
               {
                    this.updateContent('The number inputis empty'); //this doesn't work
                                                  //I want to update the content...
 
               }
 
 
                        }, 
                  error: function(responseText)
                  {
                     // on error callback
                  }
               });}}})})

Don't know what's happening....

i tried this :

JS Code

beforeShow: function()
            {
 
               // Use the target element: $("#numero")
               var input = this.elements.target; 
 
               // Do your AJAX request
               $.ajax({
                  url: 'emplacements/verifiernumero/numero/'+input.val(),
                  success: function(msg)
                  {
                     return false;
 
                        }, 
                  error: function(responseText)
                  {
                     // on error callback
                  }
               });

Doesn't work either.

Thank you very much.

[Craig]

Think I found the problem. Try this instead:

JS Code

$(document).ready(function(){
 
   //just the function to config the qtip with content and position
   $("#numero").qtip({
      content:'Le numéro est déjà utilisé',
      position: { corner: { tooltip: 'leftMiddle', tooltip: 'leftBottom' }},
      show: false,
      hide: false,
      style: { 
         tip: true,
         width: { 
            max:400
         }
      }
   })
   .bind('blur', function()
   {
      // Do your AJAX request
      $.ajax({
         url: 'emplacements/verifiernumero/numero/'+$(this).val(),
         success: function(responseText)
         {
            if (responseText == '0') $(this).qtip('show'); // Show the tooltip if its successful
            else $(this).qtip('hide') // Don't show the tooltip if it's successful!
         }, 
         error: function(responseText)
         {
            // on error callback
         }
      }); 
   });
});

[gostbuster]

Hi craig and thanks for your answer,

Unfortunately, it doesn't work,

it makes this error :

$(this).data("qtip") is undefined

but I see what you wanna do :


you wanna trigger the qtip display after the ajax reply.

I'm gonna try something right now :

After the ajax reply, on a blur event :

according the reply, I create a tooltip and display it directly (maybe show:false?).....

I'm gonna try this now and give news

[gostbuster]

Okay, I tried this which doesn't work :

JS Code

$(document).ready(function(){
 
    $("#numero").bind('blur', function(){
       var input = $("#numero").val(); 
       $.ajax({
             url: 'emplacements/verifiernumero/numero/'+input,
             success: function(msg)
             {
 
            if (msg=='yes')
            {
            alert('number is free');//just to see that the number is really free.
 
            }
            else if(msg=='empty')
            {
               alert('number is empty');
 
            }
            else{
               alert('number is not free');
                                  /* here I wanna display the tooltip but no need any event just display it...*/
 
               $("#numero").qtip({
                     content:'Le numéro est déjà utilisé',
                     position: { corner: { tooltip: 'leftMiddle', tooltip: 'leftBottom' }},
                     show: true,
                     hide: false,
                     style: { 
                        tip: true,
                        width: { 
                           max:400
                        }
                     }
                  });
 
            }
 
    }})})

Check out this code, This works with the alert, now I need to display the tooltip (when needed) instead of the alerts. Can do we do this?

Thanks
!