I apply FineUploader to an element, then clone it. The new element will open the file upload dialog, but won't upload a file. How can this be accomplished?
http://jsfiddle.net/o4z7mtrd/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<!-- <script src="/lib/plugins_3rd/fine-uploader-5.2.1/fine-uploader.js" type="text/javascript"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/fineuploader.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#mytable').find('tr div.upload').each(function(i,v){
console.log(this)
new qq.FineUploaderBasic({
button: this,
request: {
endpoint: 'update.php'
},
});
});
$('#add').click(function(){
$('#clone').clone(true).removeAttr('id').appendTo('#mytable');
});
});
</script>
<style type="text/css">
#clone {display:none;}
</style>
</head>
<body>
<table id="mytable">
<tr id="clone">
<td class="proposal-td">
<div class="upload" title="Upload">
<img src="/lib/templates/back/images/upload.png" alt="Upload">
</div>
</td>
</tr>
<tr>
<td class="proposal-td">
<div class="upload" title="Upload">
<img src="/lib/templates/back/images/upload.png" alt="Upload">
</div>
</td>
</tr>
</table>
<button id="add">Add new</button>
</body>
</html>
The cloned element needs to be binded to the file upload button since this refers to that specific element only. You also don't need to have duplicated HTML code. See this working example.
HTML
<table id="mytable">
<tr class="row">
<td class="proposal-td">
<div class="upload" title="Upload">Upload</div>
</td>
</tr>
</table>
<button id="add">Add new</button>
JS
function bindUploader($element) {
new qq.FineUploaderBasic({
button: $element[0],
request: {
endpoint: '/echo/json/'
},
callbacks: {
onUpload: function (id, name) {
alert('uploaded');
}
}
});
return $element;
}
$(function () {
bindUploader($('#mytable').find('.upload'));
var $row = $('#mytable .row').clone(true);
$('#add').click(function () {
var $clone = $row.clone(true);
bindUploader($clone.find('.upload'));
$clone.appendTo('#mytable');
});
});
http://jsfiddle.net/moogs/o4z7mtrd/5/
Related
When I run the code nothings changes and nothing works, the JavaScript does not do anything not even run the alerts. The ranges in the HTML are supposed to go into a function that gets their value and outputs it to a <div>. That does not happen
This is the JavaScript
$(startup);
function startup(){
$("#speedRange").change(srange);
$("#LimitRange").change(lrange);
$("#ticketbtn").cick(findfine);
$("#ticketreset").click(reset);
}
var speed;
var limit;
function srange() {
speed = $("#speedRange").val();
speed = Number(speed);
$("#YourSpeed").html(speed);
function lrange() {
limit = $("#LimitRange").val();
limit = Number(limit);
$("#OverSpeed").html(limit);
function findfine() {
alert("ll")
}
function reset() {
alert("ll")
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Speeding Ticket Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Speeding Ticket Calculator</h1>
<table id="speedtable">
<tr>
<td>Select Your Speed<br>40 <input type="range" id="speedRange"> 160 </td>
<td><div id="YourSpeed"></div></td>
</tr>
<tr>
<td>Select The Speed Limit<br>40 <input type="range" id="limitRange"> 100 </td>
<td><div id="OverSpeed"></div></td>
</tr>
</table><br>
<a id="ticketbtn" class="button1">Calculate Penalty</a>
<a id="ticketreset" class="button1">Reset</a><br>
<br><br><br>
<div id="finebox">
</div>
<script src="script.js">
<p id="demo"></p>
</script>
</body>
</html>
This is the Html
Jquery On API to be used in latest version of jquery.
and some function braces where missing,
find the working snippet below.
$(document).ready(function(){
debugger;
startup();
});
function startup(){
debugger;
$("#speedRange").on('change',srange);
$("#limitRange").on('change',lrange);
$("#ticketbtn").on('click',findfine);
$("#ticketreset").on('click',reset);
}
var speed;
var limit;
function srange() {
debugger
speed = $("#speedRange").val();
speed = Number(speed);
$("#yourSpeed").html(speed);
}
function lrange() {
debugger
limit = $("#limitRange").val();
limit = Number(limit);
$("#overSpeed").html(limit);
}
function findfine() {
debugger
alert("ll")
}
function reset() {
debugger;
alert("ll");
$("#overSpeed").html('');
$("#yourSpeed").html('');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Speeding Ticket Calculator</h1>
<table id="speedtable">
<tr>
<td>Select Your Speed<br>40 <input type="range" id="speedRange"> 160 </td>
<td><div id="yourSpeed"></div></td>
</tr>
<tr>
<td>Select The Speed Limit<br>40 <input type="range" id="limitRange"> 100 </td>
<td><div id="overSpeed"></div></td>
</tr>
</table><br>
<a id="ticketbtn" class="button1">Calculate Penalty</a>
<a id="ticketreset" class="button1">Reset</a><br>
<br><br><br>
<div id="finebox">
</div>
<p id="demo"></p>
I want to extract the header row of the csv files i upload and display them as checkbox options. Currently, I split based on "\n", then on "," to get the individual column names. However, it does not work for all csv files and some do not get split properly (eg, data cells are returned as column headers). Is there any functions I can use instead? Thanks! My code is shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script>
<script type="text/javascript">
/*---CSV FUNCTION---*/
function getColumns_csv() {
var reader = new FileReader();
reader.onload = function(e){
var data = e.target.result;
var header = data.split("\n")[0] //<--- is there a better way to split columns?
header = header.split(",");
var cnt = 1;
$('#columnCheckbox').empty();
header.forEach(function(y){
$('#columnCheckbox').append('<td><input type="checkbox" name='+y+' id="columnSelect'+cnt+'" class="chkbx">'+y+'</td>');
cnt++;
});
$('.chkbx').on('click',function(){
if($('.chkbx:checked').length == $('.chkbx').length){
$('#checkall').prop('checked',true);
}else{
$('#checkall').prop('checked',false);
}
});
$('.hiddeninputs').show();
$('#submission').show();
}
reader.readAsText($('#datafile')[0].files[0]);
}
/*---//CSV FUNCTION---*/
</script>
<script type="text/javascript">
//select all button
$(document).ready(function(){
$('#checkall').on('click',function(){
if(this.checked){
$('.chkbx').each(function(){
this.checked = true;
});
}else{
$('.chkbx').each(function(){
this.checked = false;
});
}
});
});
</script>
</head>
<body>
<div>
<h3>Upload File</h3>
<!-- form to post file -->
<form method="post" enctype="multipart/form-data" id="fileform">
<input type="file" name="datafile" id="datafile">
<button type="button" class="btn btn-info" name="upload" id="upload" onclick="getColumns_csv()">Upload File</button>
<br></br>
<table class="hiddeninputs" hidden="hidden">
<tr>
<td><input type="checkbox" id="checkall">Select all</td>
</tr>
<tr id="columnCheckbox"></tr>
</table>
<br>
<input type="submit" class="btn btn-info" value="submit" id="submission">
</form>
</div>
</body>
</html>
Try with this:
var header = data.split(/[\r\n]+/)[0];
If your problem is with line splitting, this will cover more possible end of line character.
I'm generating a table using PHP that will retrieve records from a MySQL database. I'm new to DataTables, and my problem is that the "View Products" button that generates along with the table doesn't work. Clicking the button should redirect to a new page with an entirely different table.
here's a screenshot of what it looks like, just in case I'm not making any sense
Here's the entire code for the page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\reset.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\stylesheet.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\og_stylesheet.css">
<style type="text/css">
thead {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<!-- HEADER -->
<?php include "includes/header.php" ?>
<?php session_start();
?>
<!-- END HEADER -->
<table class="table table-striped" id="table_id">
<thead>
<tr>
<th>Supplier ID</th>
<th>Name</th>
<th>Address</th>
<th>Contact Number</th>
<th>Supplier Details</th>
</tr>
</thead>
<tbody>
<?php
$conn = mysqli_connect("localhost", "root", "", "web_db");
$query = "SELECT * FROM Suppliers";
$search = mysqli_query($conn, $query);
if(mysqli_num_rows($search) > 0 ){
while($row = mysqli_fetch_array($search)){
?>
<form action="supplierdetails.php" method="POST">
<tr>
<td>
<?= $row['supplier_id']?>
</td>
<input type="hidden" value=< ?=$row[ 'supplier_id']?> name = "sup_id">
<input type="hidden" value=< ?=$row[ 'name']?> name = "name">
<td>
<?= $row['name']?>
</td>
<td>
<?= $row['address']?>
</td>
<td>
<?= $row['contactnumber']?>
</td>
<td><input type="submit" name="sub" value="View Products" class="btn btn-info" onclick="sample()"></td>
</tr>
</form>
<?php
}
}
?>
</tbody>
</table>
<script>
$(document).ready(function() {
$(".alert").delay(3000).fadeOut();
});
</script>
<script>
function sample() {
window.alert(document.getElementById("name").getAttribute("value"));
}
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
$('#table_id').DataTable();
});
</script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.range.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#table_id').DataTable();
/* Add event listeners to the two range filtering inputs */
$('#min, #max').keyup(function() {
table.draw();
});
});
</script>
</body>
</html>
The buttons work perfectly before I added DataTables, by the way. I also found out that a table with hard-coded data (as in without PHP) also have buttons that work fine. I'm pretty much at my wits end here. Any help will be appreciated.
Remove the onclick="sample()"
Add this in a document.ready
$(".btn-info").on("click", function() {
window.alert(document.getElementById("name").getAttribute("value"));
});
Maybe use a window.alert('test');
since I dont see the element with the id name anywhere
i want do script can use more than textarea with tinymce
this :
and don't have any problem with add button
But the problem when I delete the last line
Then I do add new line disappears tinymce in textarea
I tried to do I solve this problem but using hide() function instead of remove()
However, many problems occur number IDs
and this all code for this
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function ()
{
$(document).on("click", ".RemoveBottun", function()
{
var numItemsLiens = $('.trLines').length;
if (numItemsLiens > 1)
{
$('#addHereItem .trLines:last').remove();
tinyMCE.execCommand('mceAddControl', false, $("#addHereItem tbody textarea"));
}else
{
return false;
}
})
tinymce.init({
selector: "textarea",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
var max_fieldstable = 500; //maximum input boxes allowed
var add_button = $(".addNewBottun"); //Add button ID
var two = 1;
$(document).on("click", ".addNewBottun", function(e){ //on add input button click
var xtable = $('#addHereItem tbody .trLines:last').attr('dir');
e.preventDefault();
if(xtable < max_fieldstable){ //max input box allowed
xtable++; //text box increment
$("#addHereItem tbody").append('<tr class="trLines showItem" id="remove_'+xtable+'" dir="'+xtable+'"><td>'+(two + xtable)+'</td><td><textarea class="areatexting" style="width: 250px;height: 81px;" id="details_'+xtable+'" name="display_price[content]['+xtable+'][details]"></textarea></td></tr>'); //add input box
}else
{
$(this).hide();
}
tinymce.init({
selector: ".areatexting",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
return false;
});
})
</script>
</head>
<body>
<table style="" id="addHereItem" class="table table-bordered">
<thead>
<tr>
<td style="width: 1%;">NO</td>
<td style="width: 30%;">Details</td>
</tr>
</thead>
<tbody>
<tr class="trLines showItem" id="remove_0" dir="0">
<td>1</td>
<td>
<textarea required="required" name="display_price[content][0][details]"></textarea>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><input type="button" class="addNewBottun btn btn-primary btn-xs" value="+ Add New Item" />
<input type="button" class=" btn btn-danger btn-xs RemoveBottun" value="- Remove Item" />
</td>
</tr>
</tfoot>
</table>
</body>
</html>
i found the answer for this question
add this line when remove item
tinymce.execCommand('mceRemoveEditor', true, id_text_area_without#);
and add this line when add a new item
tinyMCE.execCommand('mceAddControl', true, id_text_area_without#);
and this all solv thuisa problem
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function ()
{
$(document).on("click", ".RemoveBottun", function()
{
var numItemsLiens = $('.trLines').length;
if (numItemsLiens > 1)
{
var realId = Number(numItemsLiens - 1);
// console.log(realId);
$('#addHereItem .trLines:last').remove();
tinymce.execCommand('mceRemoveEditor', true, "details_"+realId);
}else
{
return false;
}
})
tinymce.init({
mode : "exact",
selector: "textarea",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
var max_fieldstable = 500; //maximum input boxes allowed
var add_button = $(".addNewBottun"); //Add button ID
var two = 1;
$(document).on("click", ".addNewBottun", function(e){ //on add input button click
var xtable = $('#addHereItem tbody .trLines:last').attr('dir');
e.preventDefault();
if(xtable < max_fieldstable){ //max input box allowed
xtable++; //text box increment
$("#addHereItem tbody").append('<tr class="trLines showItem" id="remove_'+xtable+'" dir="'+xtable+'"><td>'+(two + xtable)+'</td><td><textarea class="areatexting" style="width: 250px;height: 81px;" id="details_'+xtable+'" name="display_price[content]['+xtable+'][details]"></textarea></td></tr>'); //add input box
}else
{
$(this).hide();
}
tinymce.init({
mode : "exact",
selector: ".areatexting",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
tinyMCE.execCommand('mceAddControl', true, "details_"+xtable);
return false;
});
})
</script>
</head>
<body>
<table style="" id="addHereItem" class="table table-bordered">
<thead>
<tr>
<td style="width: 1%;">NO</td>
<td style="width: 30%;">Details</td>
</tr>
</thead>
<tbody>
<tr class="trLines showItem" id="remove_0" dir="0">
<td>1</td>
<td>
<textarea required="required" name="display_price[content][0][details]"></textarea>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><input type="button" class="addNewBottun btn btn-primary btn-xs" value="+ Add New Item" />
<input type="button" class=" btn btn-danger btn-xs RemoveBottun" value="- Remove Item" />
</td>
</tr>
</tfoot>
</table>
</body>
</html>
I am working on a history search function.
I have managed to get a working code to save the value from the textbox but I do not know how to load them into a listbox.
I want a listbox with clickable items so that I can click on a previous search value and load that value as I do from the textbox.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="jquery.js"></script>
<script src="j.js"></script>
</head>
<body>
<center>
<table>
<tr>
<td style="text-align: center">
<font size="22">Sök order</font>
</td>
</tr>
<tr>
<td>
<form action="test.php" method="post">
<input style="font-size: 44pt; text-align: center" size="9" type="text" name="txtSearch" id="txtSearch"/>
<input type="submit" id="submit" value="submit">
</form>
</td>
</tr>
</table>
</center>
</body>
</html>
And the j.js that handles the local storage function.
$(function () {
$("#submit").click(function () {
var txtSearch = $("#txtSearch").val();
localStorage.setItem('searchvalue',txtSearch);
});
});
And last my test.php that handles the post search request
<?php
$txtSearch = $_REQUEST['txtSearch'];
header('Location: '.'https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr='.$txtSearch);
?>
How can I achieve this?
Thank you.
by js, you can
window.location = "https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr="+localStorage.getItem('searchvalue');
to save in listbox or any other
document.getElementById("id").value=localStorage.getItem('searchvalue');
to save in array
var a = [];
a[0]=localStorage.getItem('searchvalue');