Hi, I have a page like this
<!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>
<!-- http://www.sitepoint.com/forums/showthread.php?1173132-Get-data-from-2-comboboxes-and-add-to-a-list -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
div{ padding: 10px; }
#addButton
{
background-image:url(add_btn.png);
width:18px;
height:18px;
}
</style>
</head>
<body>
<div>
<select class="category-select" name="localprojects">
<option value="1">mca 1</option>
<option value="2">mca 2</option>
</select>
<===>
<select class="category-select" name="remoteprojects">
<option value="z1">zoho 1</option>
<option value="z2">zoho 2</option>
</select>
<a id="addButton" href="#" style="display: inline-block;"></a>
</div>
<ul id="sortable">
</ul>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function elementAlreadyExists(val){
var elementAlreadyExists = false;
$("#sortable > li").each(function(){
var currVal = $(this).data("value");
if(currVal === val){
elementAlreadyExists = true;
return;
}
});
return elementAlreadyExists;
}
$("#sortable").sortable({ placeholder: "ui-state-highlight" }).disableSelection();
$("#addButton").on("click", function(){
var s1 = $(".category-select").eq(0).find("option:selected"),
s2 = $(".category-select").eq(1).find("option:selected"),
newText = s1.text() + " - " + s2.text();
newValue = s1.val() + "-" + s2.val();
listElement = $("<li>", {class: "ui-state-default", text: newText, 'data-value': newValue});
if (elementAlreadyExists(newValue)){
alert("Already Exists!");
} else {
$("#sortable").append(listElement);
}
});
</script>
</body>
</html>
Now I want create a form just like that.
Here is the code of the function test_form
$css = "
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
div{ padding: 10px; }
#addButton
{
background-image:url(add_btn.png);
width:18px;
height:18px;
}
";
$js = "
function elementAlreadyExists(val){
var elementAlreadyExists = false;
$(\\"#sortable > li\\").each(function(){
var currVal = $(this).data(\\"value\\");
if(currVal === val){
elementAlreadyExists = true;
return;
}
});
return elementAlreadyExists;
}
$(\\"#sortable\\").sortable({ placeholder: \\"ui-state-highlight\\" }).disableSelection();
$(\\"#addButton\\").on(\\"click\\", function(){
var s1 = $(\\".category-select\\").eq(0).find(\\"option:selected\\"),
s2 = $(\\".category-select\\").eq(1).find(\\"option:selected\\"),
newText = s1.text() + \\" - \\" + s2.text();
newValue = s1.val() + \\"-\\" + s2.val();
listElement = $(\\"<li>\\", {class: \\"ui-state-default\\", text: newText, 'data-value': newValue});
if (elementAlreadyExists(newValue)){
alert(\\"Already Exists!\\");
} else {
$(\\"#sortable\\").append(listElement);
}
});
";
drupal_add_css("http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css", array('type' => 'external', 'group' => CSS_DEFAULT));
drupal_add_css($css, array('type' => 'inline'));
drupal_add_js("http://code.jquery.com/jquery-1.9.1.js", array('type' => 'external', 'scope' => 'footer'));
drupal_add_js("http://code.jquery.com/ui/1.10.3/jquery-ui.js", array('type' => 'external', 'scope' => 'footer'));
//drupal_add_js($module_path . $js_dir . "/list.js", array('type' => 'inline', 'scope' => 'footer'));
drupal_add_js($js, array('type' => 'inline', 'scope' => 'footer', 'group' => JS_LIBRARY));
$form['local_projects'] = array(
'#type' => 'select',
'#title' => t('Local Projects'),
'#options' => $local_projects, //local_projects contains many key=>value pairs
//'#default_value' => $category['selected'],
'#description' => t('Choose a Local project'),
'#attributes' => array('class' => array('category-select')),
);
$form['remote_projects'] = array(
'#type' => 'select',
'#title' => t('Remote Projects'),
'#options' => $remote_projects, //remote_projects contains many key=>value pairs
//'#default_value' => $category['selected'],
'#description' => t('Choose a Remote project'),
'#attributes' => array('class' => array('category-select')),
);
$form['addButton'] = array(
'#attributes' => array('style' => 'display: inline-block;'),
'#type' => 'link',
'#title' => t(''),
'#href' => "#",
'#id' => 'addButton',
);
$form['sortable'] = array(
'#id' => 'sortable',
'#type' => '#ul',
);
return system_settings_form($form);
5 issues occurred:
- The style code is wrapped in CDATA tag.
- The js code is wrapped in CDATA tag.
- The add button image (file add_btn.png) can not show, despite it already existing in both the folders of the module and the site’s root directory.
- The comboboxes display in 2 different rows, instead of only one row.
- The hash character of the add button image’s href property turns to “%23” when the page loads.
Please tell me what should I do to fix these problems? What change should I make to the code? It seems to me that my css and js script could not work.