Search code examples
javascripthtmljqueryjquery-mobileradio-button

Getting Radio Button in Line With Dynamic Text Insertion

I am building a form consisting of radio buttons. I the test that is beside the radio buttons is dynamic, meaning that it is being loaded from an sql database based on user input from before. I am using jQuery to insert the test into HTML however, when I do that the jQuery Mobile GUI stops working properly. What is the problem. Here is the code.

HTML FIlE:

<input class="optionsBox" type='radio' name='answer' id="option-1" checked="checked">
<label for="option-1" id="option-label-1"></label>

Keep in mind there are five of these input and label tags with id's being option2, option3, etc and option-label-2, option-label-3, etc. That is why there is a for loop in the Javascript.

JAVASCRIPT FILE: 

for(rowNum=1; rowNum <= 5; rowNum++) {
    $("#option-"+rowNum).val(options[rowNum]);
    $("#option-label-"+rowNum).text(options[rowNum]);
}

Now the problem is that the jQuery Mobile radio buttons disappear and only the text remains. Why is this happening ?

Solution

  • I found a workaround. You can use the jQuery grid features to get the two items in the same line. http://view.jquerymobile.com/1.3.0/docs/widgets/grids/.

    I made a two column and 5 row grid. One column is for the radio buttons and the other column is for the answers. The rows are there to separate the radio buttons and answers.