submit an ajax form in javascript winth Rails3 and Prototype

So there is a Rails 3 problem, when you want to submit a form in javascript (without a submit button), it is working on normal way, not ajax. But we can do creating a hidden submit button and then initializing a click event on it what is exactly doing ajax submission. The submit(); is not working anymore because it doesn't call the rails.js functions. It just works when you simple want to create a not ajax post without any confirmation. Let's see an ajax example in view's index.html.erb file:

<%= javascript_tag <<-RUBY

function procedure_init()

{

var submit_button="procedure_submit_button";

var form_name="some_procedure";

// here you can build the form, or modify form parameters

$(submit_button).click();

}

RUBY

%>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<%= form_tag "some_url", :remote => true, :method => :post, :name => "some_procedure", :id => "some_procedure" %> <%= submit_tag 'procedure_submit_button', :id =>"procedure_submit_button" , :style => "display: none" %> You can add here your html code for form and create some element what is doing the submission inside a table, for a td:

"javascript: procedure_init();" style="cursor: pointer;"> put here an image for example

That's all. Questions?

Deigning a Simple HTML Menu-Bar Using CSS

In this post I’m going to show how you can create a menu-bar (list of hyperlinks) using CSS styling. This requires that you at least have some basic knowledge of HTML and preferably CSS too. If you can’t figure out what a menu-bar looks like, scroll to the bottom.

Seen! Though pretty much the same can be implemented using tables but that is not web developers prefer.

In HTML there is not standard tag for creating a menu like item therefore we would be customized or style a standard tag. We’ll be using the ‘unordered list’

tag to do so, in this case every item i.e.
will be items in the menu.

Let us first start by creating an unordered list as follows:




• Item 1



• Item 2




It shows up something like below:

• Item 1
• Item 2

Obviously this is not what we want; items here are displaying Bullets and are one below the other while we want them to be in one line, one after the other. To achieve this we’ll style his ‘unordered list’ by defining a CSS class, then applying it to this tag.



















• Item 1



• Item 2










Here we have defined a CSS class in between the tags. It contains the property list-style: none for the

tag, this would make the unordered list classified by menu class to NOT to display the bullets beside each item.
• Item 1
• Item 2

Great! And by the way if you don’t know what a CSS class is, for now you can think of it as a way of defining properties in CSS which could be used in HTML to classify different parts or tags to have properties as defined. You can see in the above code we have used

to classify that portion and all the tags between it to have the special property defined in CSS.

Coming to the menu bar, it still has a big problem that it doesn’t look like a Menu. Well the same list would look like a menu if we style it, for this we would have to define display: inline for the

• tag of the unordered list. This would make the items in the list to be in ONE line hence look like a Menu.

  











  



  
  
  
  • Item 1
  
  
  
  • Item 2
  
  
  
  • Item 3
  
  
  
  • Item 4
  
  
  

  


  



  Menu bar would look like:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

  Ok now our menu bar is almost done, now we just have to make it more attractive and to react to mouse activity. For this we’ll add some more code to the CSS (style sheet):

  Added stuff is self explanatory, padding is used to increase the clickable are of the menu items. Now the Menu Bar would look like:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

  NOTE: Hover effect is not working here, because Icannot add stylesheet for seperate pages in Blogger and I don't want to mess up the CSS Validity of this page.

  Below is the complete code listing:

     >   >    >Menu Bar Using CSS>    >   .menu ul   {     list-style: none;   }    .menu ul li   {     display: inline;   }    .menu ul li a   {     /*Increase Clickable Area*/     padding: 8px;     padding-left: 15px;     padding-right: 15px;      /*Remove the Underline for the Link*/     text-decoration: none;      color: #000;     background: #ccc;   }    /*On Mouse Over the Link*/   .menu ul li a:hover   {     color: #fff;     background: #000;   }   >    >    >    class="menu">      >        > href="#">Item 1>>       > href="#">Item 2>>       > href="#">Item 3>>       > href="#">Item 4>>      >   >   >   >  

Creating Tool-Tip Text for WebPages Using CSS Only

[You might also be interseted in Deigning a Simple HTML Menu-Bar Using CSS]

All right, so today we are going to use CSS along with some HTML to create Tooltip text for WebPages without using JavaScript. Yeah, you heard it right using only CSS and of course HTML. Do I need to explain what a Tooltip is, BTW? Nah, you guys already know it. I do not think many sites use tooltips or anything of that sort on their websites but in case you do or you just want to learn, read on…

Well, the first thing that I want to tell is that the basic technique I’ll be using to create tooltips is not mine, I saw someone using it for a slightly different purpose, I changes it to suite mine. As I said earlier we’d be using CSS and HTML only, I guess HTML is easier so here it is:

href="#" class="tooltip">Hover Here>This is the Tool-Tip Text>>

As you can see there is nothing special, a plain simple link but wait what is that for? Good question! Well the text under the tag wouldn’t be visible unless you hover the mouse over the link. When you do so that’d become visible, neatly formatted to look just like a real Tooltip text. But how? You might ask. It has been classified (class="tooltip") to do so.

The heart of all this is the CSS:

   a.tooltip{     /* for postioning the tool-tip box relative to the link */     position:relative;      /* no underline needed */     text-decoration: none;   }    a.tooltip span{     /* tool-tip text will not be visible initially */     display: none;   }    a.tooltip:hover span{     /* make tool-tip text visible */     display:block;      /* for postioning */     position:absolute;     top:20px; left:20px;     padding: 5px;      /* width of the tool-tip box     if text is longer, it will be     made into two lines */     width:150px;      /* style the box to look like a tool-tip box */     border:1px solid #000;     background-color:#FFFFAA;     color:#000;   }  

Now to make it more clear, I’d break the whole code into smaller pieces and discuss what that does:

1.

a.tooltip { position:relative; }

This would make the tooltip (whenever) it appears to be positioned relatively to where the link is.

2.

a.tooltip span { display: none; }

It’d (as you might have guessed) make the tooltip text (or the tag) to be invisible.

3.

  a.tooltip:hover span {       display:block;      position:absolute;      top:20px;      left:20px;      padding: 5px;      width:150px;     border:1px solid #000;      background-color:#FFFFAA;      color:#000;    }

This defines what the tag would be when mouse is hovered over the link.

First it’d make the visible (thus the tooltip text) by using display: block;. Next it’d position and style the text to look like a “Real” tooltip.

Easy! Now it is…

Here is the complete code:

   >   >    >ToolTip Text Example>