Develop Reference

How to update each div element with Ajax function using JQuery

I am new to JQuery and I have an Ajax function to update the select options. The Ajax is working fine on my first Div. But when I clone the div and run the Ajax call it again update the first Div element only not the element of cloned one. I new to closet... etc. Please help me so when I call the Ajax it will update the cloned div(current div) element.
this is my ajax function:
function acct_dbox() {
{#var that = $(this)#}
$.ajax(
{
type: "GET",
url: "/waccounts/getaccounts",
dataType: "json",
data: {
{#'acctlevel': $(this).val(),#}
'csrfmiddlewaretoken': '{{csrf_token}}'
},
success: function (data) {
$.each(data, function(index, item) {
if (item.length > 0){
console.log('test', item[0].AcctCode);
console.log('test', item[0].AcctName);
{#$("#id_accountcode option").remove();#}
$.each(item, function(index1, item1) {
console.log(item1.id);
console.log(item1.AcctCode);
console.log(item1.AcctName);
$("#id_accountcode").append($('<option/>',{
{#$("#id_accountcode").append($('<option/>', {#}
value: item1.AcctCode,
text: item1.AcctName
}));
})
$( document ).ready(function() {
acct_dbox();
var original_external_int_div = document.getElementById('account_list');
//Div to Clone
var clone = original_external_int_div.cloneNode(true); // "deep" clone
original_external_int_div.parentNode.append(clone);
acct_dbox(); # (it is updating the first div again - not cloned one)
});
My html is:
{% extends 'wstore_base_generic.html' %}
{% block content %}
<form action="" method="post" class="w-auto" id="new_trans_form"
xmlns:width="http://www.w3.org/1999/xhtml">
<div class="row mt-1 mb-4" >
<div class="col-md-12">
<div>
<div class="headerctr">
<h3>JV</h3>
<!-- <div> -->
<!-- <h3 > -->
<!-- </h3> -->
</div>
<div class="card-body" >
{% csrf_token %}
<div 38rem class="row style= width:18">
<div class="col">
<label>Transaction Date</label>
<input type="date" class="form-control" name="
{{form.fh_dt.name}}" value="{{current_date}}"
readonly>
{% if form.fh_dt.errors %}
{% for error in form.fh_dt.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col-sm" >
<label>Transaction Number</label>
<input type="number" class="form-control" name="
{{form.fh_no.name}}"
value="{{transaction_number}}" readonly>
{% if form.fh_no.errors %}
{% for error in form.fh_no.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<input type="hidden" class="form-control" name="
{{form.fh_type.name}}" required readonly
value="JV">
{% if form.fh_type.errors %}
{% for error in form.fh_type.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
<label>Transaction Ref.</label>
<input type="text" class="form-control" name="
{{form.fh_ref.name}}" required
value="Ref.">
{% if form.fh_ref.errors %}
{% for error in form.fh_ref.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
</div>
<div class="row mt-0">
<div class="col">
<label>Transaction Code</label>
<input type="text" class="form-control" name="
{{form.fh_code.name}}" required readonly
value="JV">
{% if form.fh_code.errors %}
{% for error in form.fh_code.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<label>Transaction Detail</label>
<input type="text" class="form-control" name="
{{form.fh_detail.name}}" required
value="Detail">
{% if form.fh_detail.errors %}
{% for error in form.fh_detail.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<label>Transaction UserCode</label>
<input type="text" class="form-control" name="
{{form.fh_user_code.name}}" required
value="{% if form.fh_user_code.value %}
{{form.fh_user_code.value}}{% else %}{{request.user.username}}{% endif %}">
{% if form.fh_user_code.errors %}
{% for error in fh_user_code.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-0">
<div class="card shadow">
<div class="card-header text-center">
<h3 class="headerctr">
Item Details
</h3>
</div>
<div class="card-body">
{% csrf_token %}
<table class="">
<thead class="thead-light">
<tr>
<th>Code</th>
<th class = "text-danger">Account</th>
<th class = "text-danger">Debits</th>
<th class="text-success">Credits</th>
<th class = "text-warning">Description</th>
<th class = "text-warning">Tax</th>
</tr>
</thead>
<tbody id="account_list" style="margin-bottom: 0">
<tr>
<td>
<select name="acct_code" class="form-control
fh_code" id="id_accountcode">
<option value="SELECT"
selected="selected">---SELECT---</option>
required></select>
</td>
<td>
<input type="text" name="acct_name"
class="form-control fh_name"
placeholder="Acct Code" readonly>
</td>
<td>
<input type="number" name="acct_debit"
class="form-control fh_debit"
placeholder=" " >
</td>
<td>
<input type="number" class="form-control
fh_credit" name="acct_credit"
placeholder=" ">
</td>
<td>
<input type="text" class="form-control
fh_detail" placeholder="Description"
name="acct_descript" >
</td>
<td>
<input type="number" class="form-control
fh_tax" name="acct_tax"
placeholder=" ">
</td>
<td>
<div class="btn-group">
<button type="button" id="btnadd"
class="btn add_new_row" title="Add">
<i class="fas fa-plus-square"></i>
</button>
<button type="button" class="btn
delete_row" title="Delete">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td class = "text-success">Total Quantity:
<strong id="final_quantity">0</strong></td>
<td></td>
<td class = "text-success"> Total Price: <strong
id="final_price">0</strong></td>
</tr>
</tfoot>
</table>
</div>
<div class="col-md-12 mb-1">
<div class="btn-group">
<a href="{% url 'transactions' transtype='INV'
posted='ALL' %}" class="btn btn-info mr-2" >Cancel</a>
<input type="submit" class="btn btn-info submit_form"
name="save_next" value="Save&Print">
</div>
</div>
</div>
</div>
</div>
</form>
{% endblock %}

{#$("#id_accountcode").append($('<option/>', {#}
value: item1.AcctCode,
text: item1.AcctName
I made a change like:
$("table tbody select[name=acct_code]").append($('<option/>',
the all div selects get updated with option -Thanks to swathi.

How do I keep filter options on second page in php laravel?

I want to filter my table of users on my page. I can do this but only for the first page. When I click on the second page everything gets reverted back to default while it should remember the form inputs. This is my code:
my PHP page:
<h1>users</h1>
{{--message voor als een user wordt aangepast. Forget en save zorgen ervoor dat de message niet heel de tijd opnieuw wordt getoond--}}
#if(Session::has('flash_message'))
<div id="editmessage" class="alert alert-success">
{{ Session::get('flash_message') }}
{{ Session::forget('flash_message') }}
{{ Session::save() }}
</div>
#endif
<form method="get" action="/admin/users" id="searchForm">
<div class="row">
<div class="col-sm-4 mb-2 lg-4">
<input type="text" class="form-control" name="name" id="name"
value="{{ request()->name }}" placeholder="Filter user by name or email">
</div>
<div class="col-sm-4 mb-2 lg-4">
<select class="form-control" name="userfilter" id="userfilter">
<option class="genrekeuze" value="id">Sort By ID (default)</option>
<option class="genrekeuze" {{ request()->name }} value="name">Name</option>
<option class="genrekeuze" {{ request()->email }} value="email">email</option>
<option class="genrekeuze" value="active">active</option>
<option class="genrekeuze" value="admin">admin</option>
</select>
</div>
<div class="col-sm-4 mb-2 lg-4">
<select class="form-control" name="direction" id="direction">
<option id="richtingboven" class="genrekeuze" value="asc">ascending</option>
<option id="richtingonder" class="genrekeuze" value="desc">descending</option>
</select>
</div>
<div class="col-sm-2 mb-2">
<button style="display: inline;" type="submit" class="btn btn-success btn-block">Search</button>
</div>
</div>
</form>
<hr>
{{--Wordt alleen getoond als er geen users zijn (zie script_after)--}}
<div style="display: none;" id="errormessage" class="alert alert-danger alert-dismissible fade show">
Can't find any users
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>
{{ $users->links() }}
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>user</th>
<th>E-mail</th>
<th>active / admin</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="usertable">
#foreach ($users as $user)
<tr>
<td data-id="{{$user->id}}">{{$user->id}}</td>
<td data-name="{{$user->name}}">{{$user->name}}</td>
<td data-mail="{{$user->email}}">{{$user->email}}</td>
#if ($user->active==0 && $user->admin==0)
<td>NO / NO</td>
#endif
#if ($user->active==1 && $user->admin==1)
<td>YES / YES</td>
#endif
#if ($user->active==0 && $user->admin==1)
<td>NO / YES</td>
#endif
#if ($user->active==1 && $user->admin==0)
<td>YES / NO</td>
#endif
{{--edit en delete buttons verwijderen voor admin--}}
#if($user->id!=1)
<td>
<div class="btn-group btn-group-sm">
<a href="/admin/users/{{$user->id}}/edit" class="btn btn-outline-success btn-edit"
data-toggle="tooltip" data-name="{{$user->name}}" title="Edit {{$user->name}}"><i class="fas fa-edit"></i></a>
<a href="#!" class="btn btn-outline-danger btn-delete"
data-toggle="tooltip" data-id="{{$user->id}}" data-name="{{$user->name}}" title="Delete {{$user->name}}">
<i class="fas fa-trash"></i>
</a>
</div>
</td>
#endif
</tr>
#endforeach
</tbody>
</table>
</div>
#endsection
My controller:
public function index(Request $request)
{
//vraag input van zoekbalk en option list
$zoeknaam = '%' . $request->input('name') . '%';
$vallist=$request->input('userfilter','id');
$direction=$request->input('direction','asc');
//users uit database halen, paginate en where functie voor filteren
$users = User::where('name', 'like', $zoeknaam)
->orWhere('email', 'like', $zoeknaam)
->orderBy($vallist,$direction)
->paginate(15);
$result = compact('users');
Json::dump($result);
//naar view met data
return view('admin.users.users', $result);
}
I don't know whether the fault is in my page or in my controller.
Thanks for reading.

you can append parameters to $users->links()
So, you will use something like {{ $users->appends(request()->except('page'))->links() }}
reference: https://github.com/laravel/framework/issues/19441

How to save values to database using AngularJS (Django Frame Work)

Hi my project works on Django framework with some use of AngularJS. What I need to achieve is when I click on submit on my page(html), it should save all the values I entered into the Database. I heard that I just need a simple submit button and main changes are in views.py. I am very new to Django as well as AngularJS. The following is my codes. Thanks in advance.
Html and AngularJS:
{% extends "base.html" %}
{% load static %}
{% block stylesheets %}
<link href="{% static 'css/xxg.css' %}" rel="stylesheet">
{% endblock %}
{% block mainbody %}
<br><br>
<div class="well">
<div class="well" ng-controller="LayerCtrl">
<table>
<tr>
<td>
<div class="input-group">
<span class="input-group-addon">jj</span>
<select class="form-control" name="jj">
{% for f in fab %}
<option value="{{f}}">{{f}}</option>
{% endfor %}
</select>
</div>
</td>
<td>
<div class="input-group">
{% for f in jj%}
{% if f == '1' %}
<span class="input-group-addon">yy</span>
<select class="form-control" ng-model="rr" ng-options="l.value as l.label for l in yyy"></select>
{% endif %}
{% if f == '8' %}
<span class="input-group-addon">tt</span>
<select class="form-control" ng-model="selected_technode" ng-options="l.value as l.label for l in rrr"></select>
{% endif %}
{% endfor %}
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">DD</span>
<!--<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
{%verbatim%}
<select class="form-control" ng-model="selected_dd" ng-options="l as l for l in tt"></select>
{%endverbatim%}
</div>
</td>
</tr>
</table>
</div>
<div><h3>history:</h3></div>
<br/><br/>
<div ng-controller="AlertDemoCtrl">
<table class="table">
{% verbatim %}
<tr>
<td class="input-group" ng-repeat="(k,v) in alerts">
<span class="input-group-addon" ng-hide="v.hide">Check {{ k }}</span>
<span ng-hide="v.hide">
<input type="text" class="form-control" placeholder="Add gg here" ng-model="v.input">
<b>QQQ</b><input type="radio" name="{{ k }}" value="fc" ng-model="v.props">
<b>issue</b><input type="radio" name="{{ k }}" value="rr" ng-model="v.props">
<b>risk</b><input type="radio" name="{{ k }}" value="dr" ng-model="v.props">
<a type="reset" ng-click="reset()">
<span class="glyphicon glyphicon-repeat"></span>
</a>
<a href="" ng-click="remove(v)">
<span class="glyphicon glyphicon-trash"></span></a>
</span>
{% endverbatim %}
<tr>
<td>
<button type="button" class='btn btn-info' ng-click="addAlert()">
<span class="glyphicon glyphicon-plus"></span>
Add</button>
<button type="reset" ng-click="reset()" class="btn btn-danger">
<span class="glyphicon glyphicon-repeat"></span>
Reset All</button>
</td>
</tr>
</table>
</div>
<table class="table">
<!--IMPORT FILE-->
<tr>
<td>
<div style="position:relative;">
<a class='btn btn-primary' href='javascript:;' disabled>
</td>
</tr>
<!--ADD COMMENTS-->
<tr>
<td>
Add Comments*<div class="span5"><textarea name="bugnote_text" placeholder="Add comments here (max=600 characters)" rows="3" class="span10 ng-pristine
ng-valid ng-valid-maxlength" ng-maxlength="600"></textarea></div>
</td>
<td>
Add ftt*<input type="text" class="form-control" placeholder="Add ftthere">
</td>
</tr>
<form ng-submit="submit()" ng-controller="ExampleController">
<tr>
<td>
<button type="submit" id="submit" ngClick="Submit" class="btn btn-small btn-success"><span class="glyphicon glyphicon-pencil"></span> Submit</button>
<button class="btn btn-small btn-grey"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</td>
</tr>
</form>
</table>
</div>
{% endblock %}
{% block extrascript %}
{{ ngapp }}.controller("LayerCtrl", function ($scope, $http, $resource){
var layerresource_url = $resource("{% url 'api_list' 'v1' 'layer' %}");
console.log('initializing....')
$scope.$watch('yy', function () {
<!--alert($scope.yy);-->
$scope.update_layer();
});
$scope.update_layer = function(){;
console.log('Stage1: Initializing Primary Data... ');
layerresource_url.get({techtype__contains: $scope.selected, limit:1500},
function(data){
$scope.list = data['objects'][0]['layer'];
console.log($scope.layerlist);
},function(data, status){
console.log('Stage1: Internal error while loading initial data:'+status );
<!--alert('internal error');-->
}
);
};
});
{{ ngapp }}.controller("AlertDemoCtrl", function ($scope, $http, $resource){
$scope.alerts = [];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!', props : 0, input : ""});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
$scope.reset = function() {
angular.forEach($scope.alerts, function(v){
v.input = "";
v.props = 0;
});
};
$scope.remove = function(v){
v.hide = 1;
}
$scope.reset();
});
{% endblock %}

You can use AJAX if you don't want to use forms. In AngularJS, it would look like this. Note your controller should have the needed arguments:
$scope.addsomething = function() {
token = $window.localStorage.token;
//data to be submitted
$scope.data = {"name": $scope.name,"project": project_id,"some_url": someURL,"status": "1","type": 1};
$http.defaults.headers.common.Authorization = 'token '+$window.localStorage.token;
req = $http({
method: "POST",
url:"your_url/",
data:$scope.data,
headers: {
'Content-Type': 'application/json'
},
});
req.success(function(data,status) {
//do something on success
});
req.error(function(data, status, headers, config) {
//do something on error
});
}
On your backend you just have to point this URL to a view which will save it in the database. Hope this helps.

Why is my value getting appended to the hidden field instead of overwritten?

I have a simple filesector i have made (with links as the file names). When i click a filename the following javascript is run:
<script>
$(function () {
$(".fileSelect").click(function () {
var name = $(this).text(); //gets the name of the clicked file
var id = $(this).attr("id");// gets the id of the clicked file
$("#filehiddenid").val(id); // sets the file id, but wrongly appends
$("#fileDisplayText").val(name); //sets the display name
$("#mySelectFile").modal("hide"); //hides the modal file dialog
});
})
</script>
The value being set in the hidden field is the internal id of my file (database id), and the filename is for display.
My problem is that when i repeatedly select a new file, post the form and then selct and post then form etc. etc. Then the value from the file select is appended to the forms collection, so that when i post the form i get something like: 176, 178, 179,
as the values, instead of just 176 which is the latest value I have selected.
*edit: markup added *
This is the markup, please ignore the Razor variables, i named the id's of the input fields to match the javascript, in my code they are generated server side:
<div class="templateSetting">
<div>
<span>
<strong>
#setting.SettingData.Name
</strong>
</span> <br />
<span>#setting.SettingData.Description</span>
<input type="hidden" id="filehiddenid" name="setting_#setting.SettingData.Alias" value="#setting.Value" />
</div>
<div>
<div style="float: left; width: 40%;">
<input type="text" style="width:545px;" id="fileDisplayText" name="meta_setting_#setting.SettingData.Alias" value="#fileName" class="form-control" /></div>
<div style="width: 60%;">
Select File
</div>
<div class="templatealias">#setting.SettingData.Alias</div>
<div style="clear:both;"></div>
</div>
</div>
edit: This the entire markup, rendered:
<form action="/InteractiveApplications/EditApplication/23" id="editform" method="post" name="editform">
<section id="container">
<div id="wrapping" class="clearfix" style="padding-left:10px;width:100%;">
<div id="WorkContent">
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul>
<li style="display:none"></li>
</ul>
</div>
<input data-val="true" data-val-number="The field CurrentFolderId must be a number." data-val-required="Feltet CurrentFolderId skal udfyldes." id="CurrentFolderId" name="CurrentFolderId" type="hidden" value="0">
<input data-val="true" data-val-number="The field ApplicationId must be a number." data-val-required="Feltet ApplicationId skal udfyldes." id="ApplicationId" name="ApplicationId" type="hidden" value="23">
<table style="width: 50%;padding-left: 20px;" class="tablelist">
<tbody>
<tr>
<td valign="top">
<table width="100%">
<tbody>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="Name">Name</label>:
</td>
<td>
<input class="form-control" id="Name" name="Name" type="text" value="Afstemning">
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="Description">Description</label>:
</td>
<td>
<textarea class="form-control" cols="20" id="Description" name="Description" rows="2">This is a poll to take when entering the library</textarea>
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="Templates">Template</label>:
</td>
<td>
Simple Poll Template
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="ApplicationData">Path</label>:
</td>
<td>
<input class="form-control" id="ApplicationData" name="ApplicationData" type="text" value="http://10.0.0.44:81/">
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="BlockHostExit">Block host exit</label>:
</td>
<td>
<input checked="checked" data-val="true" data-val-required="Feltet Block host exit skal udfyldes." id="BlockHostExit" name="BlockHostExit" type="checkbox" value="true"><input name="BlockHostExit" type="hidden" value="false">
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" style="padding-left: 20px">
<img src="/InteractiveImages/689a492e-7e01-49cc-b0b3-57e23b621706.jpg" width="100%" style="text-align: center;max-width: 200px;"><br>
<input id="ImagePath" name="ImagePath" type="hidden" value="/InteractiveImages/689a492e-7e01-49cc-b0b3-57e23b621706.jpg"> <a style="color: gray" href="/InteractiveApplications/ChangePicture/23">
Change Picture
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<div class="titleBar" style="padding-left:-10px;height:30px;border-bottom:1px solid #307AAB">
<h2> Application configuration</h2>
</div>
<div style="padding: 10px">
<div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div class="templateSettingLeading">
<strong>
Submit Text
</strong><br>
This is the text for the submit button
</div>
<div class="templateSettingInput">
<div style="width:50%;float:left;"> <input type="text" name="setting_submittext" value="qwer" class="form-control"></div>
<div class="templatealias">submittext</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div class="templateSettingLeading">
<strong>
Multiple choice
</strong><br>
This determines if the poll has multiple right answers
</div>
<div class="templateSettingInput">
<input type="hidden" id="setting_ismultiplechoice" name="setting_ismultiplechoice" value="off">
<input id="ismultiplechoice" type="checkbox" name="setting_ismultiplechoice">
<div class="templatealias">
ismultiplechoice
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#checkbox_ismultiplechoice").click(function () {
var settingId = "#setting_ismultiplechoice";
var currentVal = $(settingId).val();
if (currentVal == "off") {
$(settingId).val("on");
}
else {
$(settingId).val("off");
}
});
});
</script>
</div>
<div id="templateSettings" class="templateSettings">
<script type="text/javascript">
var answerCounter = 1;
var trueFalseCounter = 0;
$(document).ready(function () {
$("#addbutton").click(function () {
answerCounter += 1;
trueFalseCounter += 1;
$("#questioninput_question").append("<div id='answer_" + answerCounter + "'>Answer: <input type='text' name='setting_question:" + answerCounter + "' value='' class='form-control' /><input type='checkbox' name='answer_setting_question:" + answerCounter + "' />This is the correct answer <input type='button' value='Delete' class='deleteButton btn btn-warning btn-xs' id='deletebutton_" + answerCounter + "'/></div>");
});
$(".templateSettingInput").on("click", ".deleteButton", function () {
if(confirm("Are you sure you want to delete this answer?"))
{
$(this).parent().remove();
}
});
});
</script>
<div class="templateSetting">
<div class="templateSettingLeading">
<strong> Question</strong>
This is the question and the answers for the poll
</div>
<div class="templatealias">
question
</div>
<div class="templateSettingInput" id="questioninput_question" style="width:50%;">
<textarea cols="40" rows="4" name="setting_question" class="form-control">werwe</textarea>
<input style="vertical-align: top" type="button" id="addbutton" value="Add answer" class="addbutton btn btn-info btn-xs navbar-btn"><br>
<div id="answer_1">
Answer:
<input type="text" name="setting_question:1" value="wer" class="form-control">
<!--<input type='checkbox' name='answer_setting_question:1' />This
is the correct answer-->
<input type="button" value="Delete" id="deletebutton_1" class="deleteButton btn btn-warning btn-xs">
</div>
</div>
</div>
</div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div class="templateSettingLeading">
<strong>
Show Answer to user
</strong><br>
determines if the user should see answers
</div>
<div class="templateSettingInput">
<input type="hidden" id="setting_showanswer" name="setting_showanswer" value="off">
<input id="showanswer" checked="'checked'" type="checkbox" name="setting_showanswer">
<div class="templatealias">
showanswer
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#checkbox_showanswer").click(function () {
var settingId = "#setting_showanswer";
var currentVal = $(settingId).val();
if (currentVal == "off") {
$(settingId).val("on");
}
else {
$(settingId).val("off");
}
});
});
</script>
</div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div>
<span>
<strong>
Background
</strong>
</span> <br>
<span>Please select a background image</span>
<input type="hidden" id="id_background" name="setting_background" value="172,201,173,175,172,178,178,,">
</div>
<div>
<div style="float: left; width: 40%;"><input type="text" style="width:545px;" id="text_background" name="meta_setting_background" value="611a756c4c3d338fc4ffcebf8b1979d6.png" class="form-control"></div>
<div style="width: 60%;">
Select File
</div>
<div class="templatealias">background</div>
<div style="clear:both;"></div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="mySelectFile" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Select file</h4>
</div>
<div class="modal-body">
<div class="foldertree">
<ul>
<li id="0" class="folder">
All
<ul>
<li id="173" class="file">iStock_000032787140Large.jpg</li>
<li id="174" class="file">52_fordele.jpg</li>
<li id="175" class="file">11376047043_a06bed34bd_o.jpg</li>
<li id="177" class="file">DigitalSignage.png</li>
<li id="178" class="file">mediawall_search_br.jpg</li>
</ul>
</li>
<ul>
<li id="59" class="folder">
Test interactive folder
<ul>
<li id="172" class="file">611a756c4c3d338fc4ffcebf8b1979d6.png</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<div class="templateSettingInput">
<input type="text" name="setting_background" value="172,201,173,175,172,178,178,," class="form-control">
<div class="templatealias">background sdhsdsd</div>
</div>
</div>
<script>
$(function () {
$(".fileSelect").click(function () {
var name = $(this).text();
var id = $(this).attr("id");
var elementId = 'id_background';
var elementText = 'text_background';
$("#" + elementId).val(id);
$("#" + elementText).val(name);
$("#mySelectFile").modal("hide");
});
})
</script>
</div>
</div>
</div>
</div>
</form>

Make sure there aren't other hidden inputs on the page with the same id and view the html in your browser and verify that the value on the element is correct before jquery modifies it.
The jquery id selector (http://api.jquery.com/id-selector/) will only select the first element in the DOM that has that id.
If there are multiple hidden input elements with the same name on the form, they will all get posted to the server.

jQuery file upload plugin - Start/Cancel button and Progress bar do not work

On document event ready, the problem is:
TypeError: this.element.find(...).find(...).each(...).end(...).find(...).button(...).end(...).find(...).button(...).end(...).find(...).button(...).end(...).find(...).progressbar is not a function
Line 114 of jquery.fileupload-jquery-ui.js.
When I try to input something I have something like this in the console:
TypeError: $this.find(...).find(...).progressbar is not a function
Line 45 of jquery.fileupload-jquery-ui.js
TypeError: node.find(...).empty(...).progressbar is not a function
Line 60 of jquery.fileupload-jquery-ui.js
I commented the line to not include jquery.fileupload-jquery-ui.js. The upload file works fine with the option autoUpload:true. If autoUpload is false it doesn't show start/cancel button and the progress bar.
Hints?
These are my libraries:
http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js
http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js
js/vendor/jquery.ui.widget.js
js/jquery.iframe-transport.js
js/jquery.fileupload.js
js/jquery.fileupload-process.js
js/libraries/jfu/js/jquery.fileupload-image.js
js/libraries/jfu/js/jquery.fileupload-audio.js
js/libraries/jfu/js/jquery.fileupload-video.js
js/libraries/jfu/js/jquery.fileupload-validate.js
js/libraries/jfu/js/jquery.fileupload-jquery-ui.js
js/main.js
js/libraries/jfu/css/style.css
js/libraries/jfu/css/jquery.fileupload-ui.css -
Of course jquery-1.8.2.min.js and bootstrap.min.js.
This is the code:
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<h3 style="text-align: center;">Upload your 3D model (.3ds, .stl, .obj)</h3>
<div id="fileupload">
<!-- 3D rendering antaning files -->
<div id="fileupload-render">
<div style="text-align: center;" class="fileupload-buttonbar">
<label class="fileinput-button">
<span class="btn btn-primary">Add files...</span>
<form enctype="multipart/form-data">
<input type="file" accept="object/*" name="files[]" multiple>
</form>
</label>
</div>
<table role="presentation" class="table item">
<tbody id="render-files" class="files"></tbody>
</table>
</div>
<!-- i files-->
<div id="fileupload-image">
<h3 style="text-align:center;">Upload your image (.png, .jpeg, .gif)</h3>
<div style="text-align: center;" class="fileupload-buttonbar">
<label class="fileinput-button">
<span class="btn btn-primary">Add files...</span>
<form enctype="multipart/form-data">
<input type="file" accept="image/*" name="files2[]" multiple>
</form>
</label>
<span class="fileupload-process"></span>
</div>
<table role="presentation" class="table item">
<tbody id="image-files" class="files"></tbody>
</table>
</div>
<!-- Multimedia files -->
<div id="fileupload-multimedia">
<h3 style="text-align:center;">Upload your video files (.avi, .mp4, .mpeg)</h3>
<div style="text-align: center;" class="fileupload-buttonbar">
<label class="fileinput-button">
<span class="btn btn-primary">Add files...</span>
<form enctype="multipart/form-data">
<input type="file" accept="video/*" name="files3[]" multiple>
</form>
</label>
</div>
<table role="presentation" class="table item">
<tbody id="multimedia-files" class="files"></tbody>
</table>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<div style="text-align: center;">
<a class="btn btn-success" href="<?=$this->redirect?>"><?=$this->translate("Concludi")?></a>
</div>
</div>
</div>
<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = "/item/upload-file/";
var uploadButton = $('<button/>')
.addClass('btn btn-primary')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|avi|stl|obj|3ds|mpeg)$/i,
// maxFileSize: 50000000, // 5 MB
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true,
})
.on('fileuploadadd', function (e, data) {
//console.log("trigger: " + $(this).attr('id'));
console.log(data.files);
data.context = $('#files');
//console.log(data.context);
$.each(data.files, function (index, file) {
var htmlcheck = $('<tr class="cover_box"></tr><tr style="background-color: #E9E9E9; border: 1px solid #CCC;" class="template-upload"><td style="width: 120px" class="preview"></td><td class="name vertical-aligned"></td><td class="size vertical-aligned"></td><td class="upload-ok vertical-aligned"></td></tr>');
htmlcheck.find('.name').text(file.name);
htmlcheck.find('.size').text(file.size + ' kB');
htmlcheck.find('.preview').text(file.preview);
var html = $('<tr style="background-color: #E9E9E9; border: 1px solid #CCC;" class="template-upload"><td style="width: 120px" class="preview"></td><td class="name vertical-aligned"></td><td class="size vertical-aligned"></td><td class="upload-ok vertical-aligned"></td></tr>');
html.find('.name').text(file.name);
html.find('.size').text(file.size + ' kB');
html.find('.preview').text(file.preview);
if (file.type == 'image/png' || file.type == 'image/gif' || file.type == 'image/jpeg' || file.type == 'image/jpg') {
data.context = $('#image-files');
htmlcheck.appendTo(data.context);
}
else if (file.type == 'video/x-msvideo' || file.type == 'video/mp4' || file.type == 'video/mpeg') {
data.context = $('#multimedia-files');
htmlcheck.appendTo(data.context);
}
// #TODO: find the right file.type for render-files
else if (file.type == 'image/3ds' || file.type == 'image/stl' || file.type == 'image/obj') {
data.context = $('#render-files');
html.appendTo(data.context);
}
else {
alert("Gianni, metti il formato giusto!")
}
});
}).on('fileuploadprocessalways', function (e, data) {
var node = '';
var index = data.index,
file = data.files[index];
if (file.type == 'image/png' || file.type == 'image/gif' || file.type == 'image/jpeg' || file.type == 'image/jpg') {
node = $("#image-files tr:last td:first");
}
else if (file.type == 'video/x-msvideo' || file.type == 'video/mp4' || file.type == 'video/mpeg') {
node = $("#multimedia-files tr:last td:first");
}
//console.log(node);
if (file.preview)
node.prepend(file.preview);
if (file.error) {
node.prepend(file.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
console.log(data);
$('#progress .progress-bar').css('width', progress + '%');
$('#percentage').html(progress + '%');
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
alert(file.type);
$("#files tr:last td:first canvas").wrap(link);
$('.upload-ok').html('Uploaded');
});
}).on('fileuploadfail', function (e, data) {
$.each(data.result.files, function (index, file) {
var error = $('<span/>').text(file.error);
$(data.context.children()[index])
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<label><input type="checkbox" name="delete" value="1" class="unique">marck as cover</label>
</td>
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<script>
$('input.unique').click(function() {
$('input.unique:checked').not(this).removeAttr('checked');
});
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
Thanks for helping.

You're missing jquery.fileupload-ui.js

Obviously, my fault. In my ItemController.php there was a wrong line:
$layoutView->headScript()->appendStylesheet('http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js');
The right one:
$layoutView->headScript()->appendFile('http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js');
and comment this line:
js/libraries/jfu/js/jquery.fileupload-jquery-ui.js