javascript - How do I fill tournament brackets with team names, then make the team names uneditable? -
i'm working on tournament bracketing system, , found library called "jquery bracket" can lot. there problems:
i planning retrieve team names (and possibly match scores) postgresql database , put them on brackets. however, data must in json, , parser in javascript. can't seem figure out workaround.
original code:
<html> <head> <title>jquery bracket editor</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.json-2.2.min.js"></script> <script type="text/javascript" src="jquery.bracket.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.bracket.min.css" /> <style type="text/css"> .empty { background-color: #fcc; } .invalid { background-color: #fc6; } </style> <script type="text/javascript"> function newfields() { return 'bracket name [a-z0-9_] <input type="text" id="bracketid" class="empty" /><input type="submit" value="create" disabled />' } function newbracket() { $('#editor').empty().bracket({ save: function(data){ $('pre').text(jquery.tojson(data)) } }) $('#fields').html(newfields()) } function refreshselect(pick) { var select = $('#bracketselect').empty() $('<option value="">new bracket</option>').appendto(select) $.getjson('rest.php?op=list', function(data) { $.each(data, function(i, e) { select.append('<option value="'+e+'">'+e+'</option>') }) }).success(function() { if (pick) { select.find(':selected').removeattr('seleceted') select.find('option[value="'+pick+'"]').attr('selected','selected') select.change() } }) } function hash() { var bracket = null var parts = window.location.href.replace(/#!([a-z0-9_]+)$/gi, function(m, match) { bracket = match }); return bracket; } $(document).ready(newbracket) $(document).ready(function() { newbracket() $('input#bracketid').live('keyup', function() { var input = $(this) var submit = $('input[value="create"]') if (input.val().length === 0) { input.removeclass('invalid') input.addclass('empty') submit.attr('disabled', 'disabled') } else if (input.val().match(/[^0-9a-z_]+/)) { input.addclass('invalid') submit.attr('disabled', 'disabled') } else { input.removeclass('empty invalid') submit.removeattr('disabled') } }) $('input[value="create"]').live('click', function() { $(this).attr('disabled', 'disabled') var input = $('input#bracketid') var bracketid = input.val() if (bracketid.match(/[^0-9a-z_]+/)) return var data = $('#editor').bracket('data') var json = jquery.tojson(data) $.getjson('rest.php?op=set&id='+bracketid+'&data='+json) .success(function() { refreshselect(bracketid) }) }) refreshselect(hash()) $('#bracketselect').change(function() { var value = $(this).val() location.hash = '#!'+value if (!value) { newbracket() return } $('#fields').empty() $.getjson('rest.php?op=get&id='+value, function(data) { $('#editor').empty().bracket({ init: data, save: function(data){ var json = jquery.tojson(data) $('pre').text(jquery.tojson(data)) $.getjson('rest.php?op=set&id='+value+'&data='+json) } }) }).error(function() { }) }) }) </script> </head> <body> pick bracket: <select id="bracketselect"></select> <div id="main"> <h1>jquery bracket editor</h1> <div id="editor"></div> <div style="clear: both;" id="fields"></div> <pre></pre> </div> </body> </html>
after data retrieved, upon display, going want add disabled html input element. instance:
<input type="text" id="bracketid" class="empty" disabled> this render text field uneditable.
if looking people filling out brackets, suggest either add <button> after each bracket or fire jquery event mouseout() listener adds disabled attribute input fields.
Comments
Post a Comment