Javascript help required for a custom module.

Events happening in the community are now at Drupal community events on www.drupal.org.
aac's picture

I have created a custom module and using hook_form_alter() to do the following-

<?php
$form
['title']['#prefix'] = '<div id="title-ajax-check-wrapper">';
$form['title']['#suffix'] = '</div><div id="title-ajax-check-message"></div><div id="title-ajax-check-informer" class="title-ajax-check-informer">&nbsp;</div>';
?>

Now in my js file i am using the following-

<?php
// $Id: title_ajax_check.js$

Drupal.behaviors.titleAjaxCheckBehavior = function (context) {
  $(
'#title-ajax-check-wrapper input:not(.titleAjaxCheckBehavior-processed)', context)
    .
addClass('titleAjaxCheckBehavior-processed')
    .
each(function () {
      var
titleField = $(this);

      var
fieldPos = titleField.position();
      var
fieldWidth = titleField.width();

   
Drupal.CheckTitle = '';
    $(
'#title-ajax-check-informer')
      .
css({left: (fieldPos.left+fieldWidth+10)+'px', top: (fieldPos.top)+'px'})
      .
show();

   
titleField
     
.keyup(function () {
        if(
titleField.val() != Drupal.CheckTitle) {
         
clearTimeout(Drupal.title-ajax-check-Timer);
         
Drupal.title-ajax-check-Timer = setTimeout(function () {title_ajax_check(titleField)}, Drupal.settings.TitleAjaxCheck.delay*1000);

          if(!$(
"#title-ajax-check-informer").hasClass('title-ajax-check-informer-progress')) {
            $(
"#title-ajax-check-informer")
              .
removeClass('title-ajax-check-informer-accepted')
              .
removeClass('title-ajax-check-informer-rejected');
          }
           
          $(
"#title-ajax-check-message")
            .
hide();
        }
      })
      .
blur(function () {
        if(
titleField.val() != Drupal.CheckTitle) {
         
title_ajax_check(titleField);
        }
      });
    });
}
?>

But this javascript code is not working. When I inspect source code using firebug i do not see following part of above code being applied-

<?php

$('#title-ajax-check-informer')
      .
css({left: (fieldPos.left+fieldWidth+10)+'px', top: (fieldPos.top)+'px'})
      .
show();
?>

Can anybody help me here to rectify the problem, what i am doing wrong with this script.

Any help would be much appriciated.
Thanks

Comments

Non-standard syntax?

BlackCatWeb's picture

I can't know immediately from what you report, but does the Firebug console report errors?

Also, are you sure that DOM element with id='title-ajax-check-informer' is truly present? Recall that jQuery does not post an error if the element you're querying in the DOM is not available.

Also, why the PHP bracketing for Drupal.behaviors? That's a Javascript file. I assume that's just what you're using to achieve code formatting in the post and not in the actual source.

Thanks BlackCatWeb for your

aac's picture

Thanks BlackCatWeb for your response!!

But i am not able to understand why it is non-standard syntax?

The same type of code is used in http://drupal.org/project/username_check module and it works fine there.
Also you are right that Firebug console shows me following errors-

  1. jQuery is not defined.
  2. Drupal is not defined
  3. $ is not defined.
  4. Invalid assignment left-hand side for Drupal.title-ajax-check-Timer = .....

I do not know how to check whether DOM element with id='title-ajax-check-informer' is truly present?

Also PHP bracketing for Drupal.behaviors is just for code formatting in the post and not in the actual source.

Thanks in advance for your help!!

---~~~***~~~---
aac

Syntax

BlackCatWeb's picture

It looks like you may have a syntax error somewhere in your code that is causing the JS code to fail to fully load. jQuery should be available to every Drupal page by default, so for the parser to complain that it's missing is a red flag of something wrong in your syntax (e.g., failing to close a quote).

Clear your cache, reload the page, and see if you Firebug will report the location of the first error.

Hello BlackCatWeb,

aac's picture

Hello BlackCatWeb,
This is for another similar module. I am using cck link field module in a custom content type in D6. An authenticated user can submit a url through that url field ('field_myurl' say). But what i am doing in this custom module is that the url submitted is checked in the database for duplicacy. In my js file i am using the following code to read the url value typed by the user-

<?php
.......
.....
Drupal.CheckUrl = urlField.val();
$.
ajax({
   
url: Drupal.settings.UrlAjaxCheck.ajaxUrl,
   
data: {
     
urlvalue: Drupal.CheckUrl,
     
type: Drupal.settings.UrlAjaxCheck.type
   
},
   
dataType: 'json',
......
.......
?>

When i see it in firebug, i find that-

GET (i am using $_GET in my module file to get the value of url field) is having the following url

http://www.mywebsite.com/url_ajax_check/isunique?urlvalue
=http%3A%2F%2Fwww.somewebsite.com

("://" is being converted to utf-8 encoding)

In the param tab: it shows correct urlvalue as http://www.somewebsite.com (no utf-8 conversion)
But response tab is empty, as there is some problem.
Could you please tell me is it an issue with js file or there is some problem in my .module file where i am getting the urlfield value as -

$f = $_GET['field_myurl'];

Thanks for any response!!

---~~~***~~~---
aac

Thanks BlackCatWeb for your

aac's picture

Thanks BlackCatWeb for your guidance.
I tried your suggestion by breaking the code and using it block-by-block, It is now working fine.
This code is being used in my first drupal module. The module seems to be working but there are some tweaks required in .module file.
Thanks once again!!

---~~~***~~~---
aac

Javascript

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week