Develop Reference

I cannot figure out how to make the edit button work

This is something I've been working on for a while now, and it's about to be released I just cannot figure out for the life of me on how to make the edit button work. If you can find a way for it to work just leave the java down below and the changes that you've done it would be greatly appreciated.
<div class="container-fluid text-center">
<div class="panel panel-default">
<div class="panel-heading">Vehicle Management</div>
<h2>List of your characters' vehicles</h2>
<table class="table table-responsive table-striped">
<thead>
<th>Vehicle Make</th>
<th>Vehicle Model</th>
<th>Vehicle Color</th>
<th>Vehicle Owner</th>
<th>License Plate</th>
<th>Details</th>
<th>Actions</th>
</thead>
<tr ng-show="vehList.length > 0" class="text-left" ng-repeat="veh in vehList">
<td>{{veh.vehmake}}</td>
<td>{{veh.vehmodel}}</td>
<td>{{veh.vehcolor}}</td>
<td>{{veh.vehowner}}</td>
<td>{{veh.vehplate}}</td>
<td>
<span ng-show="veh.details.stolen" class="text-danger"><i class="glyphicon glyphicon-warning-sign"></i> Stolen<br /></span>
<span ng-show="veh.details.registrationExpired" class="text-warning">Expired Registration<br /></span>
<span ng-show="veh.details.noRegistration" class="text-warning">No Registration<br /></span>
<span ng-show="veh.details.insuranceExpired" class="text-warning">Expired Insurance<br /></span>
<span ng-show="veh.details.noInsurance" class="text-warning">No Insurance<br /></span>
</td>
<td>
<span ng-show="veh.details.active" class="btn btn-primary glyphicon glyphicon-star"><br/></span>
<span ng-show="veh.details.nonactive" class="btn btn-default glyphicon glyphicon-star-empty"><br/></span>
<button ng-click="edit=true" class="btn btn-primary glyphicon glyphicon-edit"></button>
<button ng-click="deleteVehicle($index)" class="btn btn-danger glyphicon glyphicon-trash"></button>
</td>
</tr>
<!-- Only shown when there's no vehicule already created -->
<tr ng-show="vehList.length == 0">
<td colspan="7" class="text-center">
<h4>No Vehicle Found, Please Create One.</h4>
</td>
<tr>
<td colspan="7" class="text-center">
<button class="btn btn-success" data-toggle="modal" data-target="#modalAdNewVehicle"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
</table>
<div class="panel-body">
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalAdNewVehicle" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Vehicle Information
</h4>
</div>
<div class="modal-body">
<div class="container-fluid text-center">
<div class="panel panel-default">
<div class="panel-body">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Make</span>
<input ng-model="newveh.vehmake" autofocus type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Model</span>
<input ng-model="newveh.vehmodel" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Color</span>
<input ng-model="newveh.vehcolor" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Owner</span>
<input ng-model="newveh.vehowner" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Plate</span>
<input ng-model="newveh.vehplate" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="container-fluid text-left">
<div class="checkbox">
<label><input ng-click-"!newveh.details.active" ng-model="newveh.details.active" type="checkbox" value"">Active</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.nonactive" ng-model="newveh.details.nonactive" type="checkbox" value="">Not Active</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.stolen" ng-model="newveh.details.stolen" type="checkbox" value="">Stolen</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.registrationExpired" ng-model="newveh.details.registrationExpired" type="checkbox" value="">Expired Registration</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.noRegistration" ng-model="newveh.details.noRegistration" type="checkbox" value="">No Registration</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.insuranceExpired" ng-model="newveh.details.insuranceExpired" type="checkbox" value="">Expired Insurance</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.noInsurance" ng-model="newveh.details.noInsurance" type="checkbox" value="">No Insurance</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer text-center">
<button ng-click="addNewVehicle()" class="btn btn-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
<script>
$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
</script>
There is java script for everything else to work, i just cannot figure out how to make the edit button work

Angular JS add new row be in editable mode as default

I am creating a grid using the ng-repeat directive, but by clicking on new row , the new row is not in editable mode as a default and user has to click on edit button. how can I make a new row in editable mode ?
<!-- <tr ng-repeat="primaryskill in primarySkills"> -->
<tr ng-repeat="skill in skills">
<td>
<!-- <span editable-text="primaryskill.name" e-name="name" e-form="rowform"> -->
<span editable-text="skill.primarySkill.name" e-name="name" e-form="rowform">
{{ skill.primarySkill.name || 'empty' }}
</span>
</td>
<td >
<tags-input ng-model="skill.primarySkill.skillGroups" display-property="name" replace-spaces-with-dashes="false" on-tag-added="saveSkillGroup($tag,skill.primarySkill,$index)" on-tag-removed="removeSkillGroup(skill.primarySkill)">
<auto-complete source="loadskillGroups($query)" display-property="name" load-on-focus="true" min-length="0" load-on-empty="true"></auto-complete>
</tags-input>
<!-- <p>Model: {{skill.primarySkill.skillGroups}}</p> -->
</td>
<td>
<tags-input ng-model="skill.secondarySkills" display-property="name" on-tag-added="saveSecondarySkill($tag,$tag.id, skill.primarySkill)" on-tag-removed="removeSecondarySkill($tag,skill.secondary)">
<!-- <auto-complete source="loadsecondarySkills($query,skill.primarySkill.id)" display-property="name" min-length="0" load-on-empty="true"></auto-complete> -->
</tags-input>
<!-- <p>Model: {{skill.secondarySkills}}</p> -->
</td>
<td style="white-space: nowrap;text-align: center;" class="col-xs-12 col-xs-offset-3">
<!-- form -->
<form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill.primarySkill, $index)">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary" >
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div >
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button class="btn btn-danger" ng-click="removePrimarySkill(skill.primarySkill)">del</button>
</div>
</div>
</td>
</tr>
</table>
<div id="myprimarySkills">
<button class="btn btn-default" ng-click="addSkill(primaryskill)">Add Skill</button>
</div>
</div>

I believe you're using xeditable forms. Just try to add shown="true" on form element.
Example (just try to replace your form line with this):
<form editable-form name="rowform" shown="true" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">
Also you can do it via ng-init:
<form editable-form name="rowform" ng-init="rowform.$show()" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">
Update:
<form editable-form name="rowform" shown="skill.editable === true" ng-show="rowform.$visible" class="form-buttons form-inline" onaftersave="savePrimarySkill(skill, $index)">
$scope.addSkill = function (someParam) {
$scope.skills.push({
editable: true
//some other staff you're implementing
});
}

How can I pass a variable in mvc method used in jQuery code to call partial view?

I have a dropdown control in my view and if user select a option in dropdown button then I have to pass it to my jQuery code and pass to MVC method which is use in jQuery code to call partial view. I have attached my code image.
this is my working code
#{
ViewBag.Title = "CreateBidSecondStep";
}
<div id="container">
<div class="wrapper white-bg">
<div class="row mar-xsm-b">
<div class="col s12 l12 m12">
<div class="step">
<span class="pull-left">Step 1 ></span>
<span class="active pull-left">Step 2 ></span>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row mar-sm-b">
<div class="col s12 m12 l12">
<form id="form1" name="form1" method="post" action="">
<div class="border-light">
<div class="heading24 mar-sm-l mar-sm-r">Bill of Material</div>
<div class="row">
<div class="col s8 m8 l8" id="billMaterial">
<div class="ProdHeading">Search</div>
<div class="pull-left">
<label class="label pull-left">Item Code</label>
<select class="browser-default pull-left width_120" name="itemcode" id="itemcode" enable>
<option>Item Code</option>
<option>Item Code</option>
<option>Item Code</option>
</select>
</div>
<div class="pull-left mar-lg-l">
<label class="label pull-left">Item Name</label>
<input type="text" class="pull-left" name="cap" />
</div>
<div class="pull-left mar-lg-l">
<button class="btn waves-effect waves-light" type="submit" name="action" id="btnsearch">Search</button>
</div>
<div class="clearfix"></div>
<div class="bdr-gray-b mar-sm-t mar-sm-b"></div>
<div class="pull-left">
<label class="label pull-left width_120">Total Item Quantity</label>
<input type="number" maxlength="5" class="pull-left width_80" name="cap" />
<div class="clearfix"></div>
<label class="label pull-left width_120">Item Quantity</label>
<input type="number" class="pull-left width_80" name="cap" />
<div class="clearfix"></div>
<label class="label pull-left width_120">Location</label>
<input type="text" class="pull-left width_80" name="cap" />
</div>
<div class="pull-left mar-lg-l">
<label>Description</label>
<div class="clearfix"></div>
<textarea></textarea>
</div>
<div class="pull-left mar-lg-l mar-md-t">
<button class="btn waves-effect waves-light" style="bottom:0px" type="submit" name="action">Add to BOM</button>
</div>
</div>
<div class="col s4 m4 l4">
<div class="table_h2" id="SAPdiv">
</div>
</div>
</div>
<div class="row">
<div class="col s12 l12 m12 ">
<div class="table_h2">
<table class="TableID2">
<thead>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Approved Supplied</th>
</tr>
</thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="row border-light mar-sm-t pad-sm">
<div class="col s12 l12 m12">
<div class="pull-left">
</div>
<div class="pull-right">
<button class="btn waves-effect waves-light" type="submit" name="action">PREVIOUS</button>
<button class="btn waves-effect waves-light" type="submit" name="action">SEND TO ADVANCE PURCHASE</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src=" ~/Scripts/JobManager/BiddingSecondStepPartial.js"></script>
<script type="text/javascript">
$(function () {
$('#btnsearch').click(function (data) {
var itemcode = $('#itemcode').value;
$.post("#Url.Action("SAPPartailView", "CreateBid")", function(data) {
if (data) {
$('#SAPdiv').append(data);
}
});
});
});
</script>
</div>

Try This one
$(function () {
$('#btnsearch').click(function (data) {
var itemcode = $('#itemcode').value;
$.post("/SAPPartailView/CreateBid", { itemcode : itemcode }, function(data) {
if (data) {
$('#SAPdiv').append(data);
}
});
});
});
});

i just got a solution ....thanks for giving your efforts.
this is the way by which i can call a partial view from my jquery code passing with a parameter..
<script type="text/javascript">
var url = '#Url.Action("SAPPartailView", "CreateBid")';
$('#btnsearch').click(function () {
var keyWord = $('#itemcodeid').val();
$('#SAPdiv').load(url, { searchText: keyWord });
})
and in partial view i have to take parameter like..
public PartialViewResult SAPPartailView(string searchText)
{
return PartialView("_CreateBidSecondStepSAP",newlist);
}
this is working solution

Take table row hidden field value?

I use Laravel 5, Blade template for build interface. I want to take specific row hidden field value.
This is my data table code.
<table>
<thead>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th><p id='buttons'><strong> Add New Fee Details &nbsp </strong> <span class="glyphicon glyphicon-plus"></span> </p></th>
</tr>
</thead>
<tbody>
<?php $i = 0; ?>
#foreach ($fees as $fee)
<tr>
<td><a href="#" class="" data-toggle="modal" data-target="#myModal" > {{ $fee->feeCode }} </a></td>
<td> {{ $fee->feeName }} </td>
<td>{{$fee->amount}}</td>
<td class="hidden" value="detailId">{{ $i++ }}</td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['fee-detail.destroy',$fee->id]]) !!}
<span class="glyphicon glyphicon-pencil"></span> &nbsp &nbsp
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th></th>
</tr>
</tfoot>
</table>
I want to when click my link in row(click hyper-link ) call this #myModel in same page below code and I want accesses click row hidden field value in this code.
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
</span>
</span>
<h4 class="modal-title">Fee Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
<label>Fee Code</label>
***//access hidden field***
{{$fees[***put hidden field value***]->feeCode }}
<input type="text" class="form-control" placeholder="Fee Code " disabled>
<label>Fee Name</label>
<input type="text" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Amount</label>
<input type="number" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Description</label>
<textarea class="form-control" rows="3" placeholder="Fee Description" disabled></textarea>
<br/><br/><label>Internal Details</label>
<div class="row">
<div class="col-sm-6">
<label>Added By</label>
<input type="text" class="form-control" placeholder="Fee Added By " disabled>
<label>Updated </label>
<div class="form-group">
<div class="input-group date" id="#">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<label>Staff Code</label>
<input type="text" class="form-control" placeholder="Fee Staff Code " disabled>
<label>Added </label>
<div class="form-group">
<div class="input-group date" id="#" >
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Full Code:
#extends('layouts.app')
#section('slide_bar')
#include('layouts.master_entry_slide_bar')
#endsection
#section('content')
<section class="content-header">
<h1>Fee<small> Details</small></h1>
</section>
<br/>
<!-- Main content -->
<section class="content-fluid">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<col width='auto'>
<col width='auto'>
<col width='auto'>
<col width='100'>
<thead>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th><p id='buttons'><strong> Add New Fee Details &nbsp </strong> <span class="glyphicon glyphicon-plus"></span> </p></th>
</tr>
</thead>
<tbody>
<?php $i = 0; ?>
#foreach ($fees as $fee)
<tr>
<td><a href="#" class="" data-toggle="modal" data-target="#myModal" > {{ $fee->feeCode }} </a></td>
<td> {{ $fee->feeName }} </td>
<td>{{$fee->amount}}</td>
<td class="hidden" value="detailId">{{ $i++ }}</td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['fee-detail.destroy',$fee->id]]) !!}
<span class="glyphicon glyphicon-pencil"></span> &nbsp &nbsp
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>Fee Code</th>
<th>Fee Name</th>
<th>Amount</th>
<th class="hidden"></th>
<th></th>
</tr>
</tfoot>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
</span>
</span>
<h4 class="modal-title">Fee Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
<label>Fee Code</label>
{{$fees[0]->feeCode }}
<input type="text" class="form-control" placeholder="Fee Code " disabled>
<label>Fee Name</label>
<input type="text" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Amount</label>
<input type="number" class="form-control" placeholder="Fee Name" disabled >
<label>Fee Description</label>
<textarea class="form-control" rows="3" placeholder="Fee Description" disabled></textarea>
<br/><br/><label>Internal Details</label>
<div class="row">
<div class="col-sm-6">
<label>Added By</label>
<input type="text" class="form-control" placeholder="Fee Added By " disabled>
<label>Updated </label>
<div class="form-group">
<div class="input-group date" id="#">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<label>Staff Code</label>
<input type="text" class="form-control" placeholder="Fee Staff Code " disabled>
<label>Added </label>
<div class="form-group">
<div class="input-group date" id="#" >
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var name = document.getElementById("master_entry");
document.getElementById("master_entry").className = "active";
var slide_bar_element = document.getElementById("fd_menu");
document.getElementById("fd_menu").className = "active";
</script>
#endsection

You can put input with readonly attribute true and apply some style to it ( border:none; ) to remove input appearance!
After that make JavaScript function in onclick of href tag get value of that inputs! you can open modal with JavaScript too!
function test(){
$('#myModal').modal('toggle');
$('#rowValue').empty().append($("#inputID").val());
}
.inputStyle{
border:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tr>
<td><a onclick="test()" ><input type="text" readonly="true" class="inputStyle" id="inputID" value="your value " /> </a></td>
</tr>
</table>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<p id="rowValue"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

form submit don't recognize dynamically added input (using JavaScript)

I have html code with form:
<tr>
<form action="/some_action/" method="POST" id="send_form" class="test-form">
{% csrf_token %}
</div>
<button type="button" class="btn-add btn btn-info" aria-label="Left Align">
add <span class="glyphicon glyphicon-plus-sign"/>
</button>
</td>
<td>
<div class="courier-date-from-data">
</div>
</td>
<td>
<div class="courier-date-to-data">
</div>
</td>
<td>
<div class="start-km-data">
</div>
</td>
<td>
<div class="end-km-data">
</div>
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-options btn-default dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li type="submit" class="btn-options-save"><a onclick="">save</a></li>
<li class="btn-options-cancel"><a onclick="">cancel</a></li>
</ul>
</div>
</td>
</form>
and input templates on the bottom:
<input type="number" class="form-control start-km-template" style="display: none;" name="" id="">
<input type="number" class="form-control end-km-template" style="display: none;" name="" id="">
JavaScript:
var selector2 = "start-km-0";
$( ".start-km-template" )
.clone()
.removeClass("start-km-template")
.css("display","block")
.addClass(selector2)
.attr("id", selector2)
.attr("name", selector2)
.appendTo(".start-km-data");
When I want to submit request (using just input with type="submit"), form don't recognize new input field in form tag.
How to fix this ?