i have 2 files
- index.php
- code.js
i have code in index.php contains forms , of code.js. replacing pre tag form. runs fine. understand problem have see code. first of giving code
index.php file:
<html> <head> <link rel="stylesheet" href="http://code.guru99.com/css/1140.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://code.guru99.com/css/styles.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://codemirror.net/doc/docs.css" type="text/css" media="screen" /> <script src="http://code.guru99.com/php/lib/codemirror.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">></script> <link rel="stylesheet" href="http://code.guru99.com/sanjay/lib/codemirror.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://code.guru99.com/perl/perl.js"></script> <script type="text/javascript" src="cperl.js"></script> <script src="code.js"></script> </head> <body> <style type="text/css"> .codemirror { border: 1px solid #eee; height: auto; width : 630px; } .codemirror-scroll { height: auto; overflow-y: hidden; overflow-x: auto; } </style> <p>integer : whole numbers e.g. -3, 0, 69. maximum value of integer platform-dependent. on 32 bit machine, around 2 billion. 64 bit machines have larger values. constant php_int_max used determine maximum value.</p> <pre class="codeguru">say 'hi';</pre> let @ how php determines data type depending on attributes of supplied data. <pre class="codeguru">say 'hello';</pre> floating point numbers <pre class="codeguru">say 'you r amazing';</pre> character strings <pre class="codenrun">say 'i fine';</pre> <form class="hidden code-box" method="get" name="sample"> <div dir="ltr"> <textarea class="php" name="codeguru"></textarea> </div> <input type="button" value="run" /> <br/> <br/>output: <br/> <br/> <textarea id="print-result4" disabled="true" cols="77"></textarea> <br/> </form> <form class="hidden code-box" method="get" name="nosample"> <div dir="ltr"> <textarea class="php" name="codenrun"></textarea> </div> </form> </body> </html> code.js file:
$(document).ready(function () { var idindex = 0; $('pre.codeguru').each(function () { var pre = this; var form = $('form[name=sample]').clone(); $(form).removeattr('name'); $(form).removeclass('hidden'); $($(form).find('textarea')[0]).val($(pre).text()); var id = $(pre).attr('id'); $(form).find('div textarea[name=code]').first().attr('id', id); $(form).find('#print-result4').first().attr('id', 'print-result' + idindex++); $(pre).replacewith(form); }); var n = 0; $('input[type=button]').each(function () { $(this).click(function (x) { return function () { execute(x); }; }(n++)) }); window.editors = []; $('textarea[name=codeguru]').each(function () { window.editor = codemirror.fromtextarea(this, { linenumbers: true, matchbrackets: true, mode: "perl", tabmode: "shift" }); editors.push(editor); }); $('pre.codenrun').each(function () { var pre = this; var form = $('form[name=nosample]').clone(); $(form).removeattr('name'); $(form).removeclass('hidden'); $($(form).find('textarea')[0]).val($(pre).text()); var id = $(pre).attr('id'); $(form).find('div textarea[name=codenrun]').first().attr('id', id); $(pre).replacewith(form); }); window.editors = []; $('textarea[name=codenrun]').each(function () { window.editor = codemirror.fromtextarea(this, { linenumbers: true, matchbrackets: true, mode: "perl", tabmode: "shift" }); editors.push(editor); }); }); function execute(idx) { p5pkg.core.print = function (list__) { var i; (i = 0; < list__.length; i++) { document.getelementbyid('print-result' + idx).value += p5str(list__[i]) } return true; }; p5pkg["main"]["v_^o"] = "browser"; p5pkg["main"]["hash_inc"]["perlito5/strict.pm"] = "perlito5/strict.pm"; p5pkg["main"]["hash_inc"]["perlito5/warnings.pm"] = "perlito5/warnings.pm"; var source = editors[idx].getvalue(); var pos = 0; var ast; var match; document.getelementbyid('print-result' + idx).value = ""; try { var start = new date().gettime(); var js_source = p5pkg["perlito5"].compile_p5_to_js([source]); var end = new date().gettime(); var time = end - start; // run start = new date().gettime(); eval(js_source); end = new date().gettime(); time = end - start; } catch (err) { //document.getelementbyid('log-result').value += "error:\n"; } } so can see there 2 forms names sample , nosample this
<form class="hidden code-box" method="get" name="sample"> and
<form class="hidden code-box" method="get" name="nosample"> and there 2 types of pre tags codeguru , codenrun this
<pre class="codeguru">say 'you r amazing';</pre> and
<pre class="codenrun">say 'i fine';</pre> so when replaced pre code form when trying run output print in textarea cant understand why can happened.
there's window.editors = []; in code.
at first create editors array, push codemirror objects, redefine editors empty array again... remove second window.editors = []; line.
secondly: value of id variable here?
$(form).find('div textarea[name=code]').first().attr('id', id); you're reading id of textarea, looks it's undefined, since there no ids in html.
a similar mistake in line:
$(form).find('div textarea[name=codenrun]').first().attr('id', id); i guess id should 'print-result3' here, undefined now.
notice, additional digit id's bodies added in order $('input[type=button]').each() provides. supposed order elements in document have. notice, original button last can see on screen.
i think there lack of explanation in answer, how target button editor , corresponding print-resultx. i'll try explain here:
in original <input id="print-resultx" ... /> x should number of total print-result inputs i.e. number of codemirror objects, since when you're cloning form, clones placed before original form. during cloning corresponding xs added body of each id value.
this x value passed execute(idx) function argument idx, i.e. clicked button "knows", editor should handled in execute(), since x represents index in editors array.
when adding idx body (= 'print-result') of id, can target actions specific print-result field.
Comments
Post a Comment