I want to change the "Search" text content next to the filter input.
I use a table template and the search filter is generated, I want to change the search text because I want to use a different language.
Using development tool I found the div id is user_data_filter and it is under a label element.
I can change this by copying out the input form and changing the search text
$('#user_data_filter label').html('Keresés: <input type="search" class="form-control input-sm" placeholder aria-controls="user_data">');
but after my change the filter doesn't work and I don't know why..
Here is the HTML:
<html>
<head>
<title>Iskola Tábla</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<style>
body
{
margin:0;
padding:0;
background-color:#f1f1f1;
}
.box
{
width:1270px;
padding:20px;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
margin-top:25px;
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="container box">
<h1 align="center">Iskola Tábla</h1>
<br />
<div class="table-responsive">
<br />
<div align="right">
<button type="button" name="add" id="add" class="btn btn-info">Hozzáadás</button>
</div>
<br />
<div id="alert_message"></div>
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Ügyfél neve</th>
<th>Termék</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
fetch_data();
function fetch_data()
{
var dataTable = $('#user_data').DataTable({
});
}
});
</script>
Can somebody help me to change the search text content with working filter?
These labels and controls are part of the datatables and are not available until initialized. You can use a callback function if you really want to continue with this approach:
var dataTable = $ ('#user_data').DataTable({
"initComplete": function (settings, json){
$('# user_data_filter label').html('Keresés: <input type = "search" class = "form-control input-sm" placeholder aria-controls="user_data">');
}
});
However, If I understood you correctly, you would like to display the datatable in a different language. Therefore, instead of trying to reinvent the wheel, I would strongly recommend that you take a closer look at the many options the datatable already brings to you.
https://datatables.net/reference/option/language
https://datatables.net/manual/i18n
Your code seems to work fine, was your $('#user_data_filter label').html('...'); line put in the $(document).ready function? That worked for me.
If you'd like to make the replacement a little more dynamic, you could replace only the "Search" word. That code would look like this, and also be placed in the $(document).ready function.
var labelElem = $("#user_data_filter > label");
var newText = labelElem.html().replace("Search", "Keresés");
labelElem.html(newText);
JSFiddle Example.
Related
I have a JS table generated by the data entered in textareas by users on my web site (so the data is not there when you first load the page: your have to enter something in the textarea and then generate the table). Now I'm trying to get that data (from the generated table) and show it in a (h2/) for exemple.
So I made a script to get that information:
<script type="text/javascript">
function buttonTEST()
{
document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;
}
</script>
and a Button to use that script:
<input id=GetTest type="button" onclick="buttonTEST()" value="TEST ME"/>
When I enter the "document.getElementById....etc" in the console, it shows the data that I want so I think the script is fine.
But how can I get it to SHOW that data (alphanumeric) in a (h2) plain text?
Can someone help? :)
EDIT! I tried this:
<div>
<script type="text/javascript">function buttonTEST(){document.getElementById("yourID").innerHTML="document.getElementById('excel_table1').getElementsByTagName('tr').
[0].cells[1]";
}
</script>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>
</div>
But when I click, I just get "document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1]" as a H2.
The problem in your case, seems to be the extra " around your expression to get the value.
If a value is already a string, you don't need to wrap it in quotes, since doing so makes javascript think that you want to litteraly write that piece of code to the h2 output
<div>
<script type="text/javascript">
function buttonTEST() {
document.getElementById("yourID").innerHTML = document.getElementById('excel_table1').getElementsByTagName('tr').
[0].cells[1].innerHTML;
}
</script>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>
</div>
Ok, solved it ! Thanks everybody for putting me in the right track :D
So, what worked for me:
<script type="text/javascript">
function buttonTEST()
{
document.getElementById('yourID').innerHTML=document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;
}
</script>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>
</div>
#vhoyer was right, I needed to take off the extra " otherwise JS thinks that I want to litteraly write that piece of code to the h2 output.
And the other think is that I needed to put ".innerHTML" again after all my tr and cells (yes, it makes a .innerHTML inside another .innerHTML xD )
Hope that might help someone!
Cheers
You need to create a <h2> element in your html file to replace its value (which should be empty in your html file) using javascript.
Make sure you have assigned that <h2> an id.
Then, using document.getElementById, access it in your script and change it.
An example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTest()" value="TEST ME"/>
<script>
function buttonTest() {
//Grab the ID and change it
document.getElementById("yourID").innerHTML = "whatever you want it to display";
}
</script>
</body>
</html>
Also, make sure to surround the html attributes' values in single or double quotes.
Edit:
Here is an example for your use case:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTest()" value="TEST ME" />
<p>Press me to find out the second cell in the second row</p>
<table id="table">
<tr>
<th>Color</th>
<th>Object</th>
</tr>
<tr>
<td>Red</td>
<td>Poppy</td>
</tr>
</table>
<script>
function buttonTest() {
//Here we grab the value of the second cell in the second row in a variable called value. You can change the row and cell index to access specific values.
var value = document.getElementById("table").rows[1].cells[1].innerHTML;
//Then we display it
document.getElementById("yourID").innerHTML = value;
}
</script>
</body>
</html>
Iam appending a form from desktop view and adding it to mobile view (including scripts) using append() . Since Iam appending same class name and ID for form elements., on submitting form., it is identifying the mobile layout form and passing empty value on trying to get value using document.getElementsByClassName('txtbox').value.
As per my requirement., I need to give index to identify each form while appending. like document.getElementsByClassName('txtbox')[0].value. I have done an approach for same. But not getting how to increment index value on appneding. I have created plunker for same. Please let me know what I have missed.
Here is the sample code
$(document).ready(function(){
var data = $(".div1").html();
$(".div2").append(data);
$("form").submit(function(){
console.log(document.getElementsByClassName('txtbox').value);
/*console.log(document.getElementsByClassName('txtbox')[0].value);
console.log(document.getElementsByClassName('txtbox')[1].value) ; */
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="div1">
// data to be copied
<form class="search-container" onsubmit="event.preventDefault();window.open(abc/cde/+'?q='+document.getElementsByClassName('txtbox').value),'_self');">
<input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
<input type="submit" name="submit" /></form>
</div>
<div class="div2">
//data to be appended
</div>
</body>
</html>
You may use $(this).find() to select .txtbox inside the form.
$("form").submit(function() {
console.log($(this).find('.txtbox').val());
return false; // for debugging
});
Also, please note that id should be unique in the documnt.
I have passed form object inside function call and used that param to identify current form.
$(document).ready(function(){
var data = $(".div1").html();
$(".div2").append(data);
});
function submitForm(form){
var txtValue = $(form).find('.txtbox').val();
console.log(txtValue);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="div1">
// data to be copied
<form class="search-container" onsubmit="event.preventDefault();submitForm(this);">
<input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
<input type="submit" name="submit" /></form>
</div>
<div class="div2">
//data to be appended
</div>
</body>
</html>
You can iterate through you class list like so:
var txtboxes = document.getElementsByClassName("txtbox");
for(var i = 0; i < txtboxes.length; i++){
// ... process each element here
$(txtboxes[i]).append(data);
}
I am trying to figure out how to take user button clicks from buttons.html to dynamically toggle column visibility on a second userinput.html. I'm using DataTables for the userinput.html table and thought I had the solution with column.visible. In the DataTables manual there is an example of clicking a <a> and toggling column visibility. I am trying to apply that logic across html files. Unfortunately, the code I've tried is not working. Here's what I've got:
BUTTON PAGE
<!DOCTYPE html>
<html>
<head>
<title>buttons</title>
<link rel="stylesheet" type="text/css" href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
<link rel="stylesheet" type="text/css" href="designscratchpad.css">
</head>
<body>
<h1>Button page</h1>
<button id='id1' class='class1' data-column="1">Clickme</button>
<button id='id2' class='class1' data-column="2">Clickme</button>
<button id='id3' class='class1' data-column="3">Clickme</button>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js">
</script>
<script type="text/javascript" src='stackexample.js'>
</script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
USER INPUT PAGE
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.css"/>
<body>
<table id="userinput" class="display" cellspacing="1" width="100%">
<thead>
<tr>
<th>A</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr class="ac">
<td>
<input type="text" autofocus placeholder="e.g; " name="input" >
</td>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<td>
<input type="text" placeholder="" name="P" class="h"></td>
</tr>
</tbody>
</table>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js"></script>
<script type="text/javascript" src='stackexample.js'></script>
</body>
</html>
</body>
</html>
JS
$(document).ready( function () {
var table = $('#userinput').DataTable( {
"paging": false,
"ordering": false,
"scrollX" : true,
"scrollY" : true,
"scrollCollapse" : true,
"searching" : false,
// "stateSave" : true,
});
$('button.class1').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
});
;
There are no errors in the console on either html page. I think the error may be the use of the this keyword, but I'm not sure how to adjust the code to apply across html files.
It's not required to have the buttons on a separate page, in fact, I'd gratefully accept any constructive criticism.
Thank you in advance.
You can click button on one page to toggle (or any effect) on your another page ? So you can use webStorage(localstorage, sessionstorga) or cookies (read aboit this) or somthing like this. You click button and use script on first page but when you skip to another your js is restarting so you want to somthing to storage your data.
So I am currently using google picker, and once the user selects the proper file I want a much smaller html box to appear on top of the picker.
// A simple callback implementation.
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
window.document.location.href = 'metadata.html';
}
}
Obviously the last line is wrong I was just testing. The issue's that the picker is disappearing once the action is performed and I don't know how to format the html to make it appear as a smaller window, i think its a container but I dont know. It makes sense as to why I just don't know a way around it. I want to mention that the other html is in a separate file and looks like this.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<img src="https://www.artusmode.com/wp- content/uploads/2014/06/geotabC7EC4363A3736759998B3CE5.jpg" alt="Geotab Logo" style="width:250px; height:75px; position: relative; bottom: 9px; left: 70px;">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
<script>
//When the metadata has been successfully saved as document properties
// close the metadata form panel
function onSave() {google.script.host.close()}
</script>
<div>
Department ID: <select id = "drop" style="margin-bottom: 0.25cm;">
<option value="#001">#001---Law</option>
<option value="#002">#002---Sales</option>
<option value="#003">#003---Tech</option>
</select>
<input
type="button"
style="position:relative; left:60px;"
id="set_dep"
value="Set Department"
onclick=" google.script.run.description(document.getElementById('drop').value)"
/>
</div>
<div style="overflow: hidden; padding-right: .5em;">
Date:<input type="text" id = "date" style="margin-left: 60px; margin-bottom: 0.25cm;"/>
<input
type="button"
id="set_date"
value="Set Date"
onclick=" google.script.run.submitDates(document.getElementById('date').value)"
/>
</div>
<div>
Additional Tag: <input type="text" id="metadata" style="overflow: hidden; padding-right: .5em; margin-bottom: 0.25cm;" onkeydown="if(event.keyCode == 13) document.getElementById('set_tag').click();"/>
<input
type="button"
id="set_tag"
value="Set Tag"
onclick="google.script.run.submitDates(document.getElementById('metadata').value ); clearFields();"
/>
<input
type="button"
value="Close"
onclick="google.script.host.close()"
/>
<input
type="button"
value="Clear"
onclick="google.script.run.clear()"
/>
</div>
<script type="text/javascript">
function clearFields() {
document.getElementById("metadata").value="";
}
</script>
<script>
$("#date").datepicker({
showWeek: true,
firstDay: 0,
});
</script>
</body>
</html>
Basically i just want this to appear as a little pop-up that can receive users information. Ignore the methods as those are fine and were used for a previous project. I'm sure it's super obvious but im not used to working with Javascript.
Thanks everyone.
Opening a Bootstrap modal with JQuery can be done with the following
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
Example
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
$('#myModal').modal('show')
}
}
Source
I insert fields on my page using the JQuery .html() function. The fields have a class attribute, but it seems like the CSS, which is declared in the header part of the page doesn't apply to the element.
I believe it just impact class selector, since I have a #editZone input selector that work like a charm.
Here's a code sample:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
#editZone input, #editZone textarea, #editZone select{
border:0px;
}
#editZone .dependant {
background-color:#CCC;
border-bottom:1px solid #333;
}
#editZone .original {
background-color:#FFF;
border-bottom:1px solid #300;
}
</style>
</head>
<body>
<div id="headZone">
Template:
<select id="template">
</select>
<input type="button" id="generateTpl" value="Go" />
</div>
<div id="editZone" style="background-color:#ccc;">content will be filled here upon template selection</div>
<div id="previewZone">final</div>
</body>
</html>
Here's a content sample (from firebug):
<div style="background-color:#ccc;" id="editZone"><br>
<br>
Name - <input type="" class="original" value="" name="first_name" id="first_name_1"> <input type="" class="original" value="" name="last_name" id="last_name_1"><br>
Title<br>
...
You should close the html tags and I think it should work then. Close the tags like "<tagname />" or "<tagname></tagname>". I mean input, br and all the opened tags are not closed.
Hope it helps.
Cheers
In the style declaration, I had a weird space between the class name and the {.