SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up having problem with listbox. please help asap

    hi,

    i am tring to stroe the two tables in a single table. but i store in different 2 row in a table. actually i am new to ruby . so i don't know what to do? please any one help me asap.

    controller table:

    class AjaxtestController < ApplicationController



    def test

    @panels = Panel.findall, rder => 'name');

    @demographic_categories = Demographic_category.findall, rder => 'name');

    if request.get?
    @panel_question = Panel_question.new

    else
    @panel_question = Panel_question.new(params[anel])

    @panel_demo = Panel_question.new(params[:demographic_category])

    if @panel_question.save and @panel_demo.save

    flash[:notice] = "saved"
    #redirect_tocontroller => "ajaxtest", :action => "test")

    end




    end
    end

    end


    test.rhtml file

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">


    .multipleSelectBoxControl span{ /* Labels above select boxes*/
    font-family:arial;
    font-size:11px;
    font-weight:bold;
    }
    .multipleSelectBoxControl div select{ /* Select box layout */
    font-family:arial;
    height:100%;
    }
    .multipleSelectBoxControl input{ /* Small butons */
    width:25px;
    }

    .multipleSelectBoxControl div{
    float:left;
    }

    .multipleSelectBoxDiv
    </style>
    <script type="text/javascript">



    var demographic_category_demographic_category_idArray = new Array();
    var demographic_categoryArray = new Array();
    var selectBoxIndex = 0;
    var arrayOfItemsToSelect = new Array();


    function moveSingleElement()
    {
    var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
    var tmpdemographic_category_demographic_category_id;
    var tmpdemographic_category;
    if(this.tagName.toLowerCase()=='select'){
    tmpdemographic_category_demographic_category_id = this;
    if(tmpdemographic_category_demographic_category_id==demographic_category_demographic_category_idArray[selectBoxIndex])tmpdemographic_category = demographic_categoryArray[selectBoxIndex]; else tmpdemographic_category = demographic_category_demographic_category_idArray[selectBoxIndex];
    }else{

    if(this.value.indexOf('>')>=0){

    tmpdemographic_category_demographic_category_id = demographic_category_demographic_category_idArray[selectBoxIndex];

    tmpdemographic_category = demographic_categoryArray[selectBoxIndex];
    //alert(tmpdemographic_category );
    }else{
    tmpdemographic_category_demographic_category_id = demographic_categoryArray[selectBoxIndex];
    tmpdemographic_category = demographic_category_demographic_category_idArray[selectBoxIndex];
    //tmpdemographic_category.text=null;
    //alert(tmpdemographic_category);
    }
    }

    for(var no=0;no<tmpdemographic_category_demographic_category_id.options.length;no++){
    if(tmpdemographic_category_demographic_category_id.options[no].selected){
    tmpdemographic_category_demographic_category_id.options[no].selected = false;
    tmpdemographic_category.options[tmpdemographic_category.options.length] = new Option(tmpdemographic_category_demographic_category_id.options[no].text,tmpdemographic_category_demographic_category_id.options[no].value);

    for(var no2=no;no2<(tmpdemographic_category_demographic_category_id.options.length-1);no2++){
    tmpdemographic_category_demographic_category_id.options[no2].value = tmpdemographic_category_demographic_category_id.options[no2].value;
    tmpdemographic_category_demographic_category_id.options[no2].text = tmpdemographic_category_demographic_category_id.options[no2].text;
    tmpdemographic_category_demographic_category_id.options[no2].selected = tmpdemographic_category_demographic_category_id.options[no2].selected;
    }
    no = no -1;
    tmpdemographic_category_demographic_category_id.options.length = tmpdemographic_category_demographic_category_id.options.length;
    //alert(tmpdemographic_category_demographic_category_id.options.length);

    }
    }


    var tmpTextArray = new Array();
    for(var no=0;no<tmpdemographic_category_demographic_category_id.options.length;no++){
    tmpTextArray.push(tmpdemographic_category_demographic_category_id.options[no].text + '___' + tmpdemographic_category_demographic_category_id.options[no].value);
    }
    tmpTextArray.sort();
    var tmpTextArray2 = new Array();
    for(var no=0;no<tmpdemographic_category.options.length;no++){
    tmpTextArray2.push(tmpdemographic_category.options[no].text + '___' + tmpdemographic_category.options[no].value);

    }
    tmpTextArray2.sort();

    for(var no=0;no<tmpTextArray.length;no++){
    var items = tmpTextArray[no].split('___');
    tmpdemographic_category_demographic_category_id.options[no] = new Option(items[0],items[1]);

    }
    //alert(tmpTextArray2.length);
    for(var no=0;no<tmpTextArray2.length;no++){
    var items = tmpTextArray2[no].split('___');
    //alert(items);
    tmpdemographic_category.options[no] = new Option(items[0],items[1]);
    //alert(items[1]);
    }
    }

    function sortAllElement(boxRef)
    {
    var tmpTextArray2 = new Array();
    for(var no=0;no<boxRef.options.length;no++){
    tmpTextArray2.push(boxRef.options[no].text + '___' + boxRef.options[no].value);
    }
    tmpTextArray2.sort();
    for(var no=0;no<tmpTextArray2.length;no++){
    var items = tmpTextArray2[no].split('___');
    boxRef.options[no] = new Option(items[0],items[1]);
    }

    }
    function moveAllElements()
    {
    var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
    var tmpdemographic_category_demographic_category_id;
    var tmpdemographic_category;
    if(this.value.indexOf('>')>=0){
    tmpdemographic_category_demographic_category_id = demographic_category_demographic_category_idArray[selectBoxIndex];
    tmpdemographic_category = demographic_categoryArray[selectBoxIndex];

    }else{
    //tmpdemographic_category_demographic_category_id = demographic_categoryArray[selectBoxIndex];
    //tmpdemographic_category = demographic_category_demographic_category_idArray[selectBoxIndex];
    }

    for(var no=0;no<tmpdemographic_category_demographic_category_id.options.length;no++){
    tmpdemographic_category.options[tmpdemographic_category.options.length] = new Option(tmpdemographic_category_demographic_category_id.options[no].text,tmpdemographic_category_demographic_category_id.options[no].value);
    }

    //tmpdemographic_category_demographic_category_id.options.length=0;
    sortAllElement(tmpdemographic_category);

    }


    /* This function highlights options in the "to-boxes". It is needed if the values should be remembered after submit. Call this function onsubmit for your form */
    function multipleSelectOnSubmit()
    {
    for(var no=0;no<arrayOfItemsToSelect.length;no++){
    var obj = arrayOfItemsToSelect[no];
    for(var no2=0;no2<obj.options.length;no2++){
    obj.options[no2].selected = true;
    }
    }

    }

    function createMovableOptions(demographic_category_demographic_category_id,demographic_category,totalWidth,totalHeight,labelLeft,labelRight)
    {
    fromObj = document.getElementById(demographic_category_demographic_category_id);
    toObj = document.getElementById(demographic_category);

    arrayOfItemsToSelect[arrayOfItemsToSelect.length] = toObj;


    fromObj.ondblclick = moveSingleElement;
    toObj.ondblclick = moveSingleElement;


    demographic_category_demographic_category_idArray.push(fromObj);
    demographic_categoryArray.push(toObj);


    var parentEl = fromObj.parentNode;

    var parentDiv = document.createElement('DIV');
    parentDiv.className='multipleSelectBoxControl';
    parentDiv.id = 'selectBoxGroup' + selectBoxIndex;
    parentDiv.style.width = totalWidth + 'px';
    parentDiv.style.height = totalHeight + 'px';
    parentEl.insertBefore(parentDiv,fromObj);


    var subDiv = document.createElement('DIV');
    subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
    fromObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

    var label = document.createElement('SPAN');
    label.innerHTML = labelLeft;
    subDiv.appendChild(label);

    subDiv.appendChild(fromObj);
    subDiv.className = 'multipleSelectBoxDiv';
    parentDiv.appendChild(subDiv);


    var buttonDiv = document.createElement('DIV');
    buttonDiv.style.verticalAlign = 'middle';
    buttonDiv.style.paddingTop = (totalHeight/2) - 50 + 'px';
    buttonDiv.style.width = '30px';
    buttonDiv.style.textAlign = 'center';
    parentDiv.appendChild(buttonDiv);

    var buttonRight = document.createElement('INPUT');
    buttonRight.type='button';
    buttonRight.value = '>';
    buttonDiv.appendChild(buttonRight);
    buttonRight.onclick = moveSingleElement;

    var buttonAllRight = document.createElement('INPUT');
    buttonAllRight.type='button';
    buttonAllRight.value = '>>';
    buttonAllRight.onclick = moveAllElements;
    buttonDiv.appendChild(buttonAllRight);

    var buttonLeft = document.createElement('INPUT');
    buttonLeft.style.marginTop='10px';
    buttonLeft.type='button';
    buttonLeft.value = '<';
    buttonLeft.onclick = moveSingleElement;
    buttonDiv.appendChild(buttonLeft);

    var buttonAllLeft = document.createElement('INPUT');
    buttonAllLeft.type='button';
    buttonAllLeft.value = '<<';
    buttonAllLeft.onclick = moveAllElements;
    buttonDiv.appendChild(buttonAllLeft);

    var subDiv = document.createElement('DIV');
    subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
    toObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

    var label = document.createElement('SPAN');
    label.innerHTML = labelRight;
    subDiv.appendChild(label);

    subDiv.appendChild(toObj);
    parentDiv.appendChild(subDiv);

    toObj.style.height = (totalHeight - label.offsetHeight) + 'px';
    fromObj.style.height = (totalHeight - label.offsetHeight) + 'px';


    selectBoxIndex++;

    }



    </script>
    <title>Untitled Document</title>
    </head>

    <body>
    <%= form_tag %>
    <DIV id=u0 style="position:absolute; left:50px; top:34px; width:250px; height:22px; ; ; text-align: left ; font-family:Arial; text-align:left;">
    <DIV><span style=" font-family:'Arial'; color:#000000; font-size:14pt;">Panel Demographics</span></DIV>
    </div>
    <div>
    <span style="position:absolute; left:50px; top:70px; width:175px; height:22px; ; ; text-align: left ; font-family:'Arial'; font-size: 10pt; color:#000000; font-style:normal; font-weight:normal; text-decoration:none">



    </span>

    </div>
    <form method="post" action="AjaxtestController/test" onsubmit="multipleSelectOnSubmit()">
    <%= collection_select('panel', 'panel_id', @panels, :id, :name) %>
    <DIV id=u5 style="position:absolute; left:50px; top:120px; width:190px; height:16px; ; ; text-align: left ; font-family:Arial; text-align:left;">

    <%= collection_select('demographic_category', 'demographic_category_id', @demographic_categories, :id, :name, {},
    {:multiple => 'multiple'}) %>

    <select multiple name="demographic_category" id="demographic_category_id">

    </select>
    <input type="submit" value=" SAVE " />
    </form>
    <script type="text/javascript">
    createMovableOptions("demographic_category_demographic_category_id","demographic_category",500,300,'Available Demographic Categories',' Current Demographic Categories');
    </script>

    <% end_form_tag %>
    </body>
    </html>

    ------------------

    my database tables are:

    panels - id, name

    demographic_categories - id, name

    panel_questions - id,panel_id,demographic_id


    ----------------

    actally when i click panel combo box and moved another list box(it contains 2 or 3 & more also). so i want to add panelid is 1 means and list box is 2,1, 3 means , it should be stoer in database like

    id panel_id demographic_id
    1 1 2

    2 1 1

    3 1 3


    Like this. please can anyone correct my code.

  2. #2
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Ruby way to name classes is PanelQuestion instead of Panel_question. This is what Rails expects.

    Now you should be able to:

    Code:
    @q = PanelQuestion.create(:panel => the_panel, :demographic => the_demographic)
    If you just want a link table you could use has_and_belongs_to_many instead of a separate PanelQuestion model.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •