I had an idea to help me work better and create tools for myself to work faster.
I intend to make documents to save my QA work to the db and to my server.
All that works so far on my local, but the problem im sitting with is that the TinyMCE editor i want to use is not working.
I have a dynamic table added to my form that helps me add and delete rows in my form. In one of the columns i have added the TinyMCE editor in to describe the process i did with my qa testing. I have added the tag "", but when i want to add another row, the editor has stopped working. I would like to know what can i do to create a new row but still be able to have the editor work in eack column/ row
<fieldset class="row2">
<legend>Process</legend>
<p>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Remove Row" onClick="deleteRow('dataTable')" />
<p>(All acions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="dataTable" class="form" border="1">
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_STEP[]">
</td>
<td>
<label for="BX_process">Age</label>
<textarea type="text" required="required" class="small" name="BX_process[]"></textarea>
</td>
<td>
<label for="BX_pass-fail">Gender</label>
<select id="BX_pass-fail" name="BX_pass-fail" required="required">
<option>....</option>
<option>Pass</option>
<option>Fail</option>
</select>
</td>
<td>
<label for="BX_comment">Berth Pre</label>
<input id="BX_comment" name="BX_comment" required="required">
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<script>tinymce.init({selector:'textarea'});</script>
I would just like to know how to generate a new text editor for every row i add?
I think you need to initialize each of the textareas independently. For example:
<script>
tinymce.init({selector:'#ta1'});
tinymce.init({selector:'#ta2'});
</script>
<h1>My First Text Area</h1>
<textarea id="ta1">Hello! Look at me, I'm an editable textarea!</textarea>
<h1>My Other Text Area</h1>
<textarea id="ta2">Whoa! Now there are two of us!</textarea>
See my jsfiddle: https://jsfiddle.net/wr8rh6b8/
You might also want to read up on selectors. The same selector syntax is used for CSS and for identifying DOM elements from your JavaScript code. See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors
Related
I have a webpage with three buttons, two of the buttons action the form submitting data to the server, it then sends back the appropriate page.
The third button is meant to just open a new webpage in a new tab, the current page does not need to be reloaded so this button is just a button element with some onclick() code, its is not part of an input element
The trouble is that when I click on the third button it actions the form action the form even though its not an input type, why does it do this ?
<main>
<form action="/license.process" name="process" id="process" method="post">
<label>
Please enter your license information as provided in your license email
</label>
<table>
<tr>
<td><label title="Email">Email</label></td><td><input type="text" name="licenseEmail" value="paultaylor#jthink.net" class="licenseinputfield"></td>
</tr>
<tr>
<td>
<label title="License Key 1">
License Key 1
</label>
</td>
<td>
<input type="text" name="licenseKey1" value="50302c02147f23ed809a8f2579338121a2b1594f967bb18" class="licenseinputfield">
</td>
</tr>
<tr>
<td>
<label title="License Key 2">
License Key 2
</label>
</td>
<td>
<input type="text" name="licenseKey2" value="0ff02146cd1777d7e0890e659b10218761869212d7b0d60" class="licenseinputfield">
</td>
</tr>
</table>
<input type="submit" name="cancel" value="Cancel">
<input type="submit" name="save" value="Save">
<button onclick="window.open('http://www.jthink.net/songkong/buy.jsp','_blank');">
Get License
</button>
</form>
</main>
I can make it work properly by moving this third button outside of the form. But then I get formatting problem because button is shown on next line, regardless I want to understand why having the butto within the form triggers the form.
The default type of a <button> is submit.
If you want it to be type=button then you have to say so explicitly.
You need to add the type="button" attribute to prevent the form from being submitted.
I'm not entirely sure why but came across this last week.
I'm running into an odd issue while trying to set ng-disabled on my 'Save' button in the code below. I want my input field to be required and to be a non-negative number. This code works great as structured, but when I remove that second form below my table ng-disabled no longer works. Why does ng-disabled depend on this completely unnecessary additional form which I purely added for temporary testing purposes?
<div>
<table>
<tr>
<td><p>Limit</p></td>
<td><p>1,000,000</p></td>
<form class="form-inline" name="form">
<td>
<div class="form-group">
<input type="text" ng-pattern="/^[0-9][0-9]*$/" class="form-control" ng-if="limit.saveAllowed" ng-model="limit.user.points"
ng-required="true"></input>
</div>
<p ng-if="!limit.saveAllowed">{{limit.user.points}}</p>
</td>
<td ng-if="limit.saveAllowed">
<div class="form-group">
<button class="btn btn-success" type="submit" ng-click='limit.setLimit(limit.user.points)' ng-disabled="form.$invalid">Save</button>
</div>
</td>
</form>
</tr>
</table>
<form class="form-inline" name="form">
<input type="text" ng-model="limit.user.points"
ng-required="true"></input>
</form>
</div>
Note: I am using the controllerAs syntax so limit refers to my controller. Further, this HTML all resides within a custom directive's template. I don't know if that additional info is helpful, but I'm stumped.
Forms can not be nested directly inside a <tr>(see this).
Simply wrap the form with a <td> (or just move it outside the <table>) and things should work.
Currently I have a table form I am using for submit. This is a small excerpt from the chunk of code I am working with.
<tr class="draggable even">
<td class="choice-flag">
<a title="Drag to re-order" href="#" class="tabledrag-handle">
<div class="handle"> </div>
</a>
</td>
<td>
<input name="recipe_ingredients[ing][1][ri_id]" data-thmr="thmr_141" type="hidden">
<div class="form-item form-type-textfield form-item-recipe-ingredients-ing-1-quantity" data-thmr="thmr_143">
<label for="edit-recipe-ingredients-ing-1-quantity" data-thmr="thmr_144">Quantity</label>
<input class="form-item-recipe-ingredients-quantity form-text" id="edit-recipe-ingredients-ing-1-quantity" name="recipe_ingredients[ing][1][quantity]" value="" size="8" maxlength="8" data-thmr="thmr_142" type="text">
</div>
</td>
<td>
<div class="form-item form-type-select form-item-recipe-ingredients-ing-1-unit-key" data-thmr="thmr_146">
<label for="edit-recipe-ingredients-ing-1-unit-key" data-thmr="thmr_147">Unit</label>
<select class="form-item-recipe-ingredients-unit-key form-select" id="edit-recipe-ingredients-ing-1-unit-key" name="recipe_ingredients[ing][1][unit_key]" data-thmr="thmr_145">
Now the problem is, each row has a unique 1, 2, 3, 4, 5 identifier in the name of certain attributes. When clicking a button, I want it to add the next row, which would need to change a name like
edit-recipe-ingredients-ing-1-unit-key
to
edit-recipe-ingredients-ing-2-unit-key
Is there a way that I can select and change all attributes in an element that match a string and replace each of those occurrences with my new names? I plan to add new rows by using the jquery clone command.
Thank you for any help!
You could clone your row, then change it inner HTML with RegExp.
But in fact you should have some kind of template here. Please, consider using Handlebars, or something like this.
I have a table and I want to wrap table rows , but the problem is I don't know with what to wrap those those guys up... If I use <div>,<span>,<tr>,<td>...they all break my validation. So with what can I wrap my table-rows without breaking validation?
This is how I want it to look only problem is that my HTML is not valid.
Fiddle Here
I am generating my wrappers using following Jquery
$(document).ready(function(){
$('tr:first').nextUntil('.section2').andSelf().addClass('section1');
$('tr:nth-child(3)').removeClass('section1').addClass('section2');
$('.section2').nextUntil('.section3').removeClass('section1').addClass('section2');
//Lets wrap those two sections inside divs ...
//This will obviously break my validation:(
$('tr.section1').wrapAll('<div class="section_box1"></div>');
$('tr.section2').wrapAll('<div class="section_box2"></div>');
});
As #KevinB writes in a comment, a tbody element is really the only way to group table rows in a wrapper element. In static markup, this could be:
<table class="form-table">
<tbody class="bg">
<tr valign="top">
<th scope="row">Hide Menu Background:</th>
<td>
<input type="checkbox" value="value1" name="name1"/>
</td>
</tr>
<tr valign="top">
<th scope="row">
Menu Background:
</th>
<td>
<input type="file" name=""/>
</td>
</tr>
</tbody>
<tbody class="other">
<tr valign="top">
<th scope="row">Hide Sidebar:</th>
<td>
<input type="checkbox" value="value2" name="name2"/>
</td>
</tr>
<tr valign="top">
<th scope="row">Hide Site Title:</th>
<td>
<input type="checkbox" value="value3" name="name3" />
</td>
</tr>
</tbody>
</table>
The class attributes on tbody elements are really not needed, but they can be used to make styling a little easier.
Alternatively, you might decide that the two parts are not really logically parts of the same table, and use two separate table elements. This is really the only way if you want column 2 to start at different positions.
I would first start by just removing the table to begin with. It is really only best practice to use a table when actual 'tabular data' is being shown.
<h3 class="title">General Settings:</h3>
<div class="section_box1">
Hide Menu Background: <input type="checkbox" value="value1" name="name1"/><br />
Menu Background: <input type="file" name=""/>
</div>
<div class="section_box2">
Hide Sidebar: <input type="checkbox" value="value2" name="name2"/><br />
Hide Site Title: <input type="checkbox" value="value3" name="name3" />
</div>
See the jsfiddle.
This way you can more freely add classes / wrappers as needed and still be HTML compliant.
I am writing a browser plug-in for Firefox(Greasemonkey), Opera and Chrome in Javascript for a website. The issue is, when I load the document.innerHTML into a variable,
<form name="foo" action="foo.php" method="get">
<td id="td">text:
<input name="k" type="text" />
</td>
</form>
... the original code above of the website(which I am writing the plug-in for) is converted into
<form name="foo" action="foo.php" method="get">
<td id="td">text:
**<input name="k" type="text">**
</td>
... this one. As you can see, the self-closing <input /> tag is not closed anymore, and the </form> tag also disappeared. I have googled almost all the internet but none of the solutions I read did not solve my problem.
The closing </form> tags show up for me in Firefox when getting .innerHTML.
I'd suggest that the missing tag is due to your markup which I'm pretty sure is invalid:
<!-- A <form> wrapping a <td> ? -->
<form name="foo" action="foo.php" method="get">
<td id="td">text:
<input name="k" type="text" />
</td>
</form>
The parent of a <td> element should be a <tr>, not a <form>.
Given this markup:
<table>
<tr>
<form name="foo" action="foo.php" method="get">
<td id="td">text:
<input name="k" type="text" />
</td>
</form>
</tr>
</table>
...Firefox gives me this innerHTML for the <table>:
<tbody>
<tr>
<form name="foo" action="foo.php" method="get"></form>
<td id="td">text:
<input name="k" type="text">
</td>
</tr>
</tbody>
It attempts a correction of the invalid markup.
DEMO: http://jsfiddle.net/grM4c/
Well, taking a look on your code, you care creating a form with a unclosed TD in the middle.
<form name="foo" action="foo.php" method="get">
<td id="td"><span>text:<input name="k" type="text" /></span></td>
</form>
Try this way.