user2538755 user2538755 - 6 months ago 30
Javascript Question

Retrieving Id from outside of click event

I am trying to pass an user id from a click event function to the fileinput function(as shown below) so that the users image can be uploaded to the database. However, when attempting to perform this action, I am returned with undefined.

HTML



Table

<tbody>
@foreach($users as $key => $u)
<tr class="id-here" data-id="{{$u->id}}">
<td class="firstname">{{$u->firstname}}</td>
<td class="lastname">{{$u->lastname}}</td>
<td class="email">{{$u->email}}</td>
<td class="project">{{$project->countProject($u->id)}}</td>
<td class="level">{{ucfirst($u->level)}}</td>
<td class="status"><span class="label label-{{$u->confirmed_email==0?'default':'success'}}">{{$u->confirmed_email==0?'unconfirmed':'confirmed'}}</span></td>
<td class="register">{{date("M j, Y g:i a", strtotime($u->created_at))}}</td>
<td>
{!!$u->level=='regular'?'<button class="btn btn-round btn-info edit get-id" title="edit" data-toggle="modal" data-target="#editModal"><i class="glyphicon glyphicon-edit"></i></button>':''!!}
<a href="{{ROOT}}myprojects/{{$u->id}}" title="view projects" class="view btn btn-round btn-info"><i class="glyphicon glyphicon-eye-open"></i></a>
{!!$u->level=='regular'?'<a href="#" title="delete" class="btn btn-round btn-danger delete-user"><i class="glyphicon glyphicon-trash"></i></a>':''!!}
</td>
</tr>
@endforeach







Modal

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="user-form" method="POST" action="{{ROOT}}users/edit">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Edit user</h4>
</div>
<div class="modal-body">
@if(Session::has('type')&&Session::get('type')=='edit')
@if (count($errors) > 0)
<div class="alert alert-danger" role="alert">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul class="error-container">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@endif
<div class="row">
<div class="form-group col-xs-6">
<label class="" for="user-name">Firstname</label>
<input class="form-control input-area" id="edit-first-name" type="text" placeholder="Firstname" value="{{ old('firstname') }}" name="firstname"/>
</div>
<div class="form-group col-xs-6">
<label class="" for="user-name">Lastname</label>
<input class="form-control input-area" id="edit-last-name" type="text" placeholder="Lastname" value="{{ old('lastname') }}" name="lastname"/>
</div>
<div class="form-group col-xs-6">
<label class="" for="user-name">Account type</label>
<select name="level" id="edit-level" class="form-control input-area" {{Auth::user()->level=='admin'?'disabled':''}}>
<option value="regular">Regular</option>
<option value="admin">Admin</option>
<option value="supervisor">Supervisor</option>
</select>
</div>
<div class="form-group col-xs-6">

<div class="uploader pull-right">
<div class="pic-uploader">
<input id="file-1" type="file" multiple="true" value="">
</div>
<div style="margin-top:-45px;width:350px;margin-left:-70px;">
<small>File types allowed: <b>JPG</b>, <b>JPEG</b>, <b>PNG</b> or <b>GIF</b> • <b>1MB</b> file limit</small><br>
<small>At least 1024x768 pixels • 4:3 aspect ratio</small>
</div>
</div>
<input type="hidden" name="type" id="upload-type" value="avatar">

</div>
<div class="form-group col-xs-12">
<input name="email_confirm" id="edit-status" type="checkbox"/>
<label>Email confirmation</label>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" id="uid">
<div class="row user-final">
<div class="col-xs-12">
<input class="button-submit button-block" type="submit" value="Save changes" id="edit-button" />
</div>
</div>
</div>
</form>
</div>
</div>




JAVASCRIPT



<script type="text/javascript">

var trid;
$('.id-here' ).click(function() {
trid = $(this).closest('tr').data('id');
});

$("#file-1").fileinput({
uploadUrl: '{{ROOT}}fileuploads',
uploadAsync: true,
showUpload: false,
showCaption: false,
showCancel: false,
showRemove: true,
browseClass: "btn btn-default btn-sm",
allowedFileExtensions : ['jpg', 'png','gif'],
maxFileSize:1000,
uploadExtraData: {
other_user_id: trid,
type: 'user_avatar'
},
});
</script>

Answer

You can use refresh method to update the uploadExtraData

Refreshes the file input plugin based on options provided. You can supply an array of plugin options as a parameter. This method returns the file input element as a jQuery object and can thus be chained with other methods.

Use

$('.id-here' ).click(function() {
   trid = $(this).closest('tr').data('id');
   $("#file-1").fileinput('refresh', {uploadExtraData: {
        other_user_id: trid,
        type: 'user_avatar'
    }})
});

$("#file-1").fileinput({
    uploadUrl: '{{ROOT}}fileuploads',
    uploadAsync: true,
    showUpload: false,
    showCaption: false,
    showCancel: false,
    showRemove: true,
    browseClass: "btn btn-default btn-sm",
    allowedFileExtensions : ['jpg', 'png','gif'],
    maxFileSize:1000
});