Populate mulitple select box jquery mobile via php

Question

Populate mulitple select box jquery mobile via php

616 Views Asked by Steven Kinnear At 05 April 2025 at 18:43

I found this link which works with jquery but not with jquery-mobile multiselect

Any ideas where i might be going wrong. As soon as i add multiple="multiple" i get no results showing. Also if i have it missing i dont get the jquery mobile theme but i do get my list populated

html

<!DOCTYPE HTML>
<html>
<head>
      <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <title>
        </title>
        <link rel="stylesheet" href="css/logout-button.min.css" />
         <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
        <link rel="stylesheet" href="css/my.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        </script>
        <script src="js/jquery.mobile-1.3.0.min.js"></script>
        <script src="js/jquery.cookies.2.2.0.min.js"></script>
</head>

<body>
<div data-role="page" id="index4">

           <div data-theme="a" data-role="header">
        <a data-role="button" data-direction="reverse" data-rel="back" data-transition="slide"
         data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
            Back
        </a>
        <h3>
           Event Details
        </h3>
    </div>

         <div data-role="content">
             <form id="eventForm" name="eventForm">

                    <div data-role="fieldcontain">
<script type="text/javascript">
$(document).on("pagebeforeshow", "#index4", function() {
$(function(){
      var items="";
      $.getJSON("event-details.php",function(data){
        $.each(data,function(index,item) 
        {
          items+="<option value='"+item.email+"'>"+item.username+"</option>";
        });

        $("#a1_title").html(items); 
        $("#a1_title").trigger("change");
      });
    });
  });  
</script>
        <select id="a1_title"  multiple="multiple">
        </select>
            </div>
                    <div data-role="fieldcontain">
                        <label for="manual">Add Emails</label>
                        <textarea cols="40" rows="8" name="emails" id="emails"></textarea>
                    </div>
                        <input type="submit" value="Submit" id="submitEventButton">
                </form>
        </div>
</div>  
</body>
</html>

my php

require_once("../backend/functions.php");
dbconn();
                            $id = $CURUSER["id"];
                            $res = "SELECT email,username FROM users left join cal_contacts on cal_contacts.contactid = users.id WHERE cal_contacts.userid = $id";
                            $res1 = mysql_query($res);
                        $data = array();
                            while($row = mysql_fetch_array($res1))
                            { 
                            $data[] = $row;

                            }
                            echo json_encode($data);

Original Q&A

There are 1 best solutions below

**Gajotres** · Answer 1

jQuery Mobile is a little bit different the a classic multiple select box.

You didn't do anything wrong, you were lacking one additional attribute. Without it jQuery Mobile multiple select can't be created successfully.

Additional needed attribute is this one:

data-native-menu="false"

Working example: http://jsfiddle.net/Gajotres/dEXac/

$(document).on('pagebeforeshow', '#index', function(){    
    // Add a new select element    
    $('<select>').attr({'name':'select-choice-1','id':'select-choice-1','multiple':'multiple', 'data-native-menu':'false'}).appendTo('[data-role="content"]');
    $('<option>').html('Select option!').appendTo('#select-choice-1');
    $('<option>').attr({'value':'1'}).html('Value 1').appendTo('#select-choice-1');
    $('<option>').attr({'value':'2'}).html('Value 2').appendTo('#select-choice-1');    
    // Enhance new select element
    $('select').selectmenu();
});

One more thing, you don't need to use:

$("#a1_title").trigger("change");

It is a overkill in your case, you only need to enhance one dynamic select, do it like this:

 $('select').selectmenu();

To find out more take a look at my other article: jQuery Mobile: Markup Enhancement of dynamically added content

Populate mulitple select box jquery mobile via php

There are 1 best solutions below

Related Questions in PHP

Related Questions in JQUERY

Related Questions in JSON

Related Questions in JQUERY-MOBILE

Related Questions in JQUERY-MOBILE-SELECT

Trending Questions

Popular # Hahtags

Popular Questions