What I use and what I did
I have SyntaxHighlighter (alexgorbatchev.com/SyntaxHighlighter)
<div class="question-text">
<pre width="300px" class="brush: xml">
<?= //php generated text ?>
</pre>
</div>
And it perfectly works when I just write following code bellow:
$(document).ready(function(){
SyntaxHighlighter.all();
});
What I've tried to do
But there's an issue: I want to change brush dynamicaly when user selects it from the select :
<div class="nameselect">
<select name="language">
<option value=" ">Text</option>
<option value="cpp">C++</option>
<option value="csharp">C#</option>
<option value="css">CSS</option>
<option value="java">Java</option>
<option value="js">JScript</option>
<option value="php">PHP</option>
<option value="py">Python</option>
<option value="ruby">Ruby</option>
<option value="sql">Sql</option>
<option value="xml">HTML/XML</option>
</select>
</div>
I wrote some code:
$(document).on('change', 'select[name=language]', function () {
var code = $(this).parent().parent().find("pre");
code.addClass('brush: ' + $(this).val());
SyntaxHighlighter.all();
});
But it doesn't work.
What I think
Actually I found that this library changes my <pre> tag at all.
Any suggestions?
Changed <pre class="brush: xml"> with value <body>HTML's here</body> is looks like:
<div>
<div id="highlighter_860958" class="syntaxhighlighter xml">
<div class="toolbar">
<span>
?
</span>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
<code class="xml plain"><</code>
<code class="xml keyword">body</code>
<code class="xml plain">>HTML's here </</code>
<code class="xml keyword">body</code>
<code class="xml plain">></code>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
I am using Select2 Multiple Selection
Clicking on x I want ID of table row.
This is a code snippet to see the real problem.
https://jsfiddle.net/ja1omn9x/
I am using this code:
But it's giving me undefined
What should be the way?
$(document).on('click', '.select2-selection__choice__remove', function(e) {
console.log("YES: ", $(this).closest('tr').attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr id="row1">
<td data-select2-id="4">
<select name="product_id[]" class="invoiceProducts">
<option value="12" data-select2-id="19">Orange</option>
<option value="14" data-select2-id="20">Apple</option>
</select>
<span class="select2>
<span class=" selection ">
<span class="select2-selection select2-selection--multiple ">
<ul class="select2-selection__rendered ">
<li class="select2-selection__choice " title="Apple " data-select2-id="23 ">
<span class="select2-selection__choice__remove " role="presentation ">×</span>Apple</li>
</ul>
</span>
</span>
<span class="dropdown-wrapper " aria-hidden="true ">
</span>
</span>
</td>
</tr>
You can use select2:unselecting this will get called whenever you click on x button then you can use .closest("tr").prop("id") to get id of row.
Demo Code :
$(".js-example-basic-multiple-limit").select2({
maximumSelectionLength: 2
});
$('.js-example-basic-multiple-limit').on('select2:unselecting', function(e) {
console.log('I am in :)');
console.log("YES: ", $(this).closest('tr').prop('id'));
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<table>
<tr id="row1">
<td>
<select class="form-control js-example-basic-multiple-limit" multiple="multiple">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>
</td>
</tr>
<tr id="row2">
<td>
<select class="form-control js-example-basic-multiple-limit" multiple="multiple">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>
</td>
</tr>
</table>
I have a screenshot as shown below:
The screenshot above belongs to the following code:
<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>
<div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<!-- Date START -->
<div class="select-date" style="margin-right:30px;">
<h4 style="text-align:center;">Select Date</h4>
<input type="date" id="house-sitting-date" name="house_sitting_date" value="<?php if($data->{" house_sitting_date "}<>''){echo $data->{"house_sitting_date "};}?>">
</div>
<!-- Date END -->
<!-- Yes/No Dropdown START -->
<div class="yes-no">
<h4 style="text-align:center;">Yes/No</h4>
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" <?php if($data->{"house_sitting_date_yes_no"}=="nada"){echo 'selected';} ?>>Please choose an option</option>
<option value="yes" <?php if($data->{"house_sitting_date_yes_no"}=="yes"){echo 'selected';} ?>>Yes</option>
<option value="no" <?php if($data->{"house_sitting_date_yes_no"}=="no"){echo 'selected';} ?>>No</option>
</select>
</div>
<!-- Yes/No Dropdown END -->
<!-- Add new row button START -->
<div class="add-new-row-button">
<input type="button" id="addRow" value="Add New Row" onclick="rowAdd()"/>
</div>
<!-- Add new row button END -->
</div>
<!-- Javascript Code START -->
<script>
function rowAdd() {
}
</script>
<!-- Javascript Code END -->
On hitting save button, the above form (as shown in the screenshot) gets saved in the following JSON file:
$output['house_sitting_date']=$_POST['house_sitting_date'];
$output['house_sitting_date_yes_no']=$_POST['house_sitting_date_yes_no'];
if(file_exists('../feeds/ptp-ess_landing_house.json')){
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_house.json'));
}
Problem Statement:
I am wondering what JavaScript code I need to add so that it add another select of rows. When I say Select of Rows, I meant to say the following. I added an onclick event on input tag.
You'll need to change some minor things, but this is the general idea:
<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>
<div class="add-new-row-button">
<input type="button" id="addRow" value="Add New Row" onclick="rowAdd()" />
</div>
<div id="rows">
<div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="select-date" style="margin-right:30px;">
<h4 style="text-align:center;">Select Date</h4>
<input type="date" id="house-sitting-date" name="house_sitting_date" value="">
</div>
<div class="yes-no">
<h4 style="text-align:center;">Yes/No</h4>
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" selected>Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
</div>
<script>
function rowAdd(event) {
document.getElementById("rows")
.insertAdjacentHTML('beforeend', newRow());
}
function newRow() {
return `
<div id="default-node" class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="select-date" style="margin-right:30px;">
<input type="date" id="house-sitting-date" name="house_sitting_date" value="">
</div>
<div class="yes-no">
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" selected>Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
`
}
</script>
I want to add an extra option value "9" to both Afghanistan and Albania. Example: SO when i apply filter Albania and 1 Pound, I get both both results: $41 and $22.
HTML:
<p>Filter: </p>
<select class="filterby">
<option value="L"><h5>Afghanistan</h5></option>
<option value="E"><h5>Albania</h5></option>
</select>
<p>Location: </p>
<select class="filterby">
<option value="1"><h5>1 Pound</h5></option>
<option value="2"><h5>2 Pound</h5></option>
</select>
<div id="FilterContainer">
<div class="E 1">$41</div>
<div class="E 2">$48</div>
<div class="L 1">$28</div>
<div class="L 2">$33</div>
<div class="9 1">$22</div>
<div class="9 2">$25</div>
</div>
JAVASCRIPT:
<script type="text/javascript">//<![CDATA[
window.onload=function(){
$('#FilterContainer').hide();
$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#FilterContainer").find("div").hide();
$('#FilterContainer').show();
$("div#FilterContainer").find("div." + filters).show();
});
}//]]>
</script>
i added attribute to the options of first select which we can consider that attribute as the second value you want to add :
<p>Filter: </p>
<select class="filterby" id="allCountries">
<option value="L" dataSec="8"><h5>Afghanistan</h5></option>
<option value="E" dataSec="9"><h5>Albania</h5></option>
</select>
<p>Location: </p>
<select class="filterby">
<option value="1"><h5>1 Pound</h5></option>
<option value="2"><h5>2 Pound</h5></option>
</select>
<div id="FilterContainer">
<div class="E 1">$41</div>
<div class="E 2">$48</div>
<div class="L 1">$28</div>
<div class="L 2">$33</div>
<div class="9 1">$22</div>
<div class="9 2">$25</div>
</div>
and js:
$('#FilterContainer').hide();
$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
});
var secondVal = $("#allCountries option:selected").attr('dataSec');
$("div#FilterContainer").find("div").hide();
$('#FilterContainer').show();
$("div#FilterContainer").find("div." + filters.join('.')).show();
$("div#FilterContainer").find("div." + secondVal + "." + filters[1]).show();
});
demo here: https://jsfiddle.net/IA7medd/bwhrj68r/1/
I need to append some number of rows(say 10) in a table using javascript. The row will be fetched from a separate static html page(i guess using the id can fetch them ). The html will be static, so it is been used like a template. How can it be done. since im a beginner am unable to think beyond the below code.
var myTableDiv = document.getElementById("DivTable");
var tableBody = document.getElementById("tBody");
var table = document.getElementById('Table');
for (var i = 0; i < 3; i++) {
var tr = document.getElementById('tableRow');
var TD1= document.getElementById('FirstColumn');
var TD2= document.getElementById('ScondColumn');
var TD3= document.getElementById('ThirdColumn');
var TD4= document.getElementById('FourthColumn');
var TD5= document.getElementById('FifthColumn');
tr.appendChild(TD1);
tr.appendChild(TD2);
tr.appendChild(TD3);
tr.appendChild(TD4);
tr.appendChild(TD5);
tableBody.appendChild(tr);
myTableDiv.appendChild(table);
}
I guess this ll result in overlapping of rows. Not sure. Kindly correct it.
HTML here...
<div class="MgmtView" id="DivTable">
<table class="projectMgmtTable" width="100%" id="Table">
<thead>
<tr>
<th><h4>Review</h4></th>
<th>Sort
<select>
<option>Sample 1</option>
<option>Sample 2</option>
</select>
<div>
<div class="sortUpArrow"></div>
<div class="sortDownArrow"></div>
</div>
</th>
</tr>
</thead>
<tbody id="tBody">
<tr class="rowTable" id="tableRow">
<td id="FirstColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">ID</div>
<div class="labelRight">1</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelHead">Address</div>
<div class="labelLeft">
<textarea placeholder="Risk Description Here" rows="11"></textarea>
</div>
</div>
</div>
</td>
<td id="ScondColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Location</div>
<div class="labelRight">
<select disabled="disabled">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Country</div>
<div class="labelRight">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Division</div>
<div class="labelRight">
<select class="showRpn">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
<div class="table-row rpnSection dispNone">
<div class="table-cell">
<div class="labelLeft">Amount</div>
<div class="labelRight">
<input value="123" class="greenBg" type="text" />
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">date of birth</div>
<div class="labelRight">
<input type="text" disabled="disabled" class="calendar" />
</div>
</div>
</div>
</td>
<td id="ThirdColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelHead">Relationship</div>
<div class="labelLeft">
<textarea disabled="disabled" placeholder="Risk Description Here" rows="8"></textarea>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Date</div>
<div class="labelRight">
<input disabled="disabled" type="text" class="calendar" />
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">MStatus</div>
<div class="labelRight">
<select>
<option>Open</option>
<option>Active</option>
<option>Closed</option>
<option>Resolved</option>
</select>
</div>
</div>
</div>
</td>
<td id="FourthColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelHead">Plan</div>
<div class="labelLeft">
<textarea placeholder="Risk Description Here" rows="8"></textarea>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Target Date</div>
<div class="labelRight">
<input type="text" class="calendar" />
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Status</div>
<div class="labelRight">
<select>
<option>Open</option>
<option>Active</option>
<option>Closed</option>
<option>Resolved</option>
</select>
</div>
</div>
</div>
</td>
<td id="FifthColumn">
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Status</div>
<div class="labelRight">
<select>
<option>Open</option>
<option>Active</option>
<option>Closed</option>
<option>Resolved</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Category</div>
<div class="labelRight">
<select>
<option>Sample 1</option>
<option>Sample 2</option>
<option>Sample 3</option>
<option>Sample 4</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Status</div>
<div class="labelRight">
<select>
<option>Sample 1</option>
<option>Sample 2</option>
<option>Sample 3</option>
<option>Sample 4</option>
</select>
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="labelLeft">Action</div>
<div class="labelRight">
<select>
<option>Sample 1</option>
<option>Sample 2</option>
<option>Sample 3</option>
<option>Sample 4</option>
</select>
</div>
</div>
</div>
</td>
</tr>
<tr class="noBorder">
<td colspan="5"> </td>
</tr>
</tbody>
</table>
Try this Code :
With the help of append() function you will add it Like that way :
check the fiddle link also for demo
$(document).ready(function(){
$("table tbody").append("<tr><td>asdf</td><td>asasdsdf</td></tr>");
});
JSFIDDLE
The javascript appendChild() function append the content to the selected elements. Here, if you want to add the rows to existing table then you have to create the string of the table row with require content. Then you can append it.
So, Consider this is your HTML table.
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody id="tBody">
<tr><td>Sam</td>India</tr>
</tbody>
</table>
If you want to add new row, create row element (string) in javascript
var str="<tr><td>Bob</td><td>India Maharashtra</td></tr>";
var tableBody = document.getElementById("tBody");
tableBody.appendChild(str);
If you want to add blank row then only pass blank td like,
var str="<tr><td></td><td></td></tr>";
Try this.
check this demo --- fiddle
var myTable = document.getElementById("tableID");
var appenDiv = document.getElementById("wrap");
var newTable = document.createElement("table");
appenDiv.appendChild(newTable);
for(var i=0;i<2;i++){
var tr = myTable.rows[i];
var cln = tr.cloneNode(true);
newTable.appendChild(cln);
}
I believe that it will help you to understand how to append an html table rows.
I made a button which is showing and hiding div on click by using jQuery. But IE showing another extra div and rest of the browsers showing it properly.
<div class="hide-search-button">
<div class="l-f-w" id="locate">
<h1> Location </h1>
<input type="hidden" value="" id="loc_hidden"/>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><h1>State</h1></td>
<td> <select onChange="selectCity(this.options[this.selectedIndex].value)" name="state_name" id="state_name">
<option value="Choose">Choose</option>
<?php
//connect with database
$sqlCountry="select DISTINCT state from sheet1
order by state asc ";
$resCountry=mysql_query($sqlCountry);
$checkCountry=mysql_num_rows($resCountry);
// fetch all country
while($rowCountry=mysql_fetch_array($resCountry)){
?>
<option value="<?php echo $rowCountry['state']?>">
<?php echo $rowCountry['state']?>
</option>
<?php
}
?>
</select></td>
</tr>
<tr>
<td><h1>Region</h1></td>
<td><select id="region_name" name="region_name"
onchange="selectState(this.options[this.selectedIndex].value)">
<option value="Choose">Choose</option>
</select>
</td>
</tr>
<!--<tr>
<td><h1>Suburb</h1></td>
<td><select id="suburb_name" name="suburb_name">
<option value="Choose">Choose</option>
</select></td>
</tr>-->
<tr>
<td><h1>Pin Code</h1></td>
<td> <input type="text"value=" " name="pin" id="pin"></td>
</tr>
</table>
<input type="hidden" value="2" name="searchform" />
<script>
function span_go()
{
//var locate = document.getElementById("menuSelection").innerHTML;
var service = document.getElementById("sertype").innerHTML;
//document.getElementById("locatetext").value = locate;
document.getElementById("servicetext").value = service;
//alert (service);
}
</script>
<input type="hidden" value="" id="servicetext" name="servicetext"/>
<?php /*?><a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><div class="arrow_wrap"><span class="ui-icon ui-icon-triangle-1-s"></span> </div> <span id="menuSelection"> <?php echo $location ?></span></a><?php */?>
</div> <!-- location field wrapper ends here -->
<div class="service_type_wrap s-t-w">
<h1> Service Type </h1>
<select multiple="multiple" label="choose" style="margin-left:8px;" name="tex_value" id="worktype">
<option value="Long Day Care">Long Day Care</option>
<option value="Occasional Care">Occasional Care</option>
<option value="In Home Care">In Home Care</option>
<option value="Before School Care">Before School Care</option>
<option value="After School Care">After School Care</option>
<option value="Vacation">Vacation Care</option>
<option value="Special Care">Special Care</option>
<option value="Permanent / Contract">Permanent / Contract</option>
<option value="Part time">Part time</option>
</select>
</div> <!-- service type wrapper ends here -->
<div class="f-r-w" style="margin-left:10px;">
<h1> Filter Results </h1>
<select data-placeholder="<?php echo $sorting; ?>" class="chzn-select" style="width:200px;" tabindex="2"name="q_state" id="jobsort">
<option value="title">Sort by job title</option>
<option value="date">Sort by date</option>
</select>
</div> <!-- filter results wrapper ends here -->
<div class="go_button_wrap">
<input name="submit" type="submit" value="Go" id="custum_button" onclick="span_go();">
</div> <!-- go button ends here -->
</form>
</div>
JS:
$(document).ready(function() {
$("#button").toggle(function() {
//$(this).text('Hide Advance Search');
}, function() {
//$(this).text('Show Advance Search');
}).click(function(){
$(".hide-search-button").slideToggle("slow");
event.preventDefault();
});
});
Screenshot shown below:
Try to change click part of your code. You need to pass event object into the handler. In IE actually there is window.event object. Maybe it causes the issue:
.click(function(event) {
$(".hide-search-button").slideToggle("slow");
event.preventDefault();
});