Hi I am succeeded to remove classes on edit button click, but I am having an issue to adding classes back.
Here is the code given below.
Any help would be appreciated.
$(document).ready(function() {
$(".edit").click(function() {
$(this).parent().find('.edit-field-area').removeClass('edit-field-area');
$(this).removeClass('edit-button');
$(this).parent().find('.transparent-control').prop('disabled', false);
$(this).parent().find('.transparent-control').focus();
});
$(".transparent-control").focusout(function() {
debugger;
$(this).parent().find('.row').find('.edit').addClass('edit-button');
$(this).prop('disabled', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row">
<div class="col-md-3">
<img src="Images/side-border.png" width="100" height="20" />
<img src="http://localhost:49606/img/Thumbnail5.jpg" class="img-circle" width="100" height="100" alt="Muhammad Essa" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-10 edit-field-area heading-one">
<input type="text" id="name" disabled="disabled" class="transparent-control" value="Muhammad Essa Rind" />
</div>
<div class="col-md-1 col-md-offset-1 edit-button heading-one edit" style="margin-left: 10px;">
<h3 style="margin-top: 9px"><i class="glyphicon glyphicon-pencil"></i></h3>
</div>
</div>
<div class="row">
<div class="col-md-10 edit-field-area">
<input type="text" id="job" class="transparent-control" value="Software Developer at United Marine Agencies PVT LTD" />
</div>
<div class="col-md-1 col-md-offset-1 edit-button edit" style="margin-left: 10px;">
<h5><i class="glyphicon glyphicon-pencil"></i></h5>
</div>
</div>
<div class="row">
<div class="col-md-10 edit-field-area">
<input type="text" id="country" class="transparent-control" value="Pakistan" />
</div>
<div class="col-md-1 col-md-offset-1 edit-button edit" style="margin-left: 10px;">
<h6><i class="glyphicon glyphicon-pencil"></i></h6>
</div>
</div>
</div>
</div>
The simple idea about the adding class on textbox focus out is in this Demo, Please click to see
Replace
$(this).parent().find('.row').find('.edit').addClass('edit-button');
With
$(this).addClass('edit-button');
Try this...
$(".transparent-control").onblur(function () {
debugger;
$(this).parent().parent().find('.edit').addClass('edit-button');
$(this).prop('disabled', true);
});
onblur event is triggered when input loses focus.
Related
Dropzone and Javascript isn't working on bootstrap Modal i'm calling Modal through ajax.Because i have hundreds of records i don't want to place Modal in foreach so i used ajax on button click controller method hits and return a new view and that view i'm calling and main view where modal will be displayed. Modal is working fine but i have used dropzone plugin which isn't working and even no other js code is working neither css.
MainView.blade.php
On button Click the following script hits
this the my main view where i am calling Bootstrap Modal
<div class="modal" id="Edit-SpecsModal-products">
<div class="modal-dialog modal-max ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body text-center">
<span class="f-24 black bold">Edit Product</span>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body p0">
<div class="product_details" id="product_details"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn-bg2" data-dismiss="modal">Cancel</button>
<input type="button" class="btn-bg1" data-dismiss="modal" onclick="submitForms()">Add to Project</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.edit_product_model').click(function(){
var product_id = $(this).attr("id");
$.ajax({
url:"{{url('architecture-edit-product')}}/" + product_id ,
method:"post",
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
data:{product_id:product_id},
success:function(data){
$('#product_details').html(data.html);
$('#Edit-SpecsModal-products').modal("show");
}
});
});
});
</script>
Controller
public function editArchitectureProductSave(Request $request, $id){
$data['products'] = Product::with('productImages')->where('id',$id)->get();
$returnHTML = view('manufacturer::projects.includes.ajaxhtmlviews.edit-product-Bootstrap-modal', $data)->render();
return response()->json( ['html'=> $returnHTML], 200);
edit-product-Bootstrap-modal.blade.php
<div class="max-wid">
<div class="pl-3 pr-3 mb-5 p0">
<div class="">
<div class=" f-column in">
<div class="">
<ul class="nav nav-tabs nav-border-producttab">
<li class="nav-item ">
<a class="nav-link active" data-toggle="tab" href="#add_new_products2">Add New Product</a>
</li>
</ul>
</div>
<div class="">
<div >
<div class=" mt-3">
<!-- Nav tabs -->
<!-- Tab panes -->
<div class="tab-content model-hit">
<div id="add_new_products2" class="container tab-pane active">
<br>
<div class=" row">
<div class="col-sm-6">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">
Product Documents
<div class="clearfix"></div>
<div class="gry f-13">(Specs, CHPS Certificate, Product Data Sheet)</div>
</div>
<div class="my-form1 text-center" id="my-for2">
<?php echo Form::open(array('route' => 'architecture-product-file-save', 'files' => true, 'method' => 'PUT', 'id' => 'product-file-form', 'class' => 'dropzone', 'name' => 'formName')); ?>
<input type="hidden" name="last_product_inserted_id" id="last_product_inserted_id" value="">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div id="preview-template" style="display: none;">
<div class="dz-preview dz-file-preview" style="width: 20% ;">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-file-type">
<br />
<select name="file_type" class="dz-file-type-select" id="file_type">
<option value="">Select File Type</option>
<option value="datasheet_file">Datasheet</option>
<option value="cad_file">CAD file</option>
<option value="bim_file">BIM file</option>
<option value="leed_file">LEED Statement</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">Product Images</div>
<div class="my-form1 text-center" id="my-for3">
<input form="product-form" id="file-input" name="product_images[]" type="file" multiple>
<div id="preview"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<?php echo Form::open(array('route' => 'architecture-product-save', 'files' => true, 'id' => 'product-form')) ?>
<input type="hidden" name="method_type" value="PUT">
<input type="hidden" name="id" value="{{$products['0']->id}}">
<div class="col-sm-12 p-0 mrg_modal_produt">
<input name="name" type="text" class="form-control input_product_modal" value="{{$products['0']->name}}">
<input name="" type="text" class="form-control input_product_modal" value="Manufacturer Name">
<input type="hidden" name="project_slug" value="{{Request::segment(2)}}">
<textarea name="description" class="form-control input_product_modal" cols="" rows="">{{$products['0']->description}}</textarea>
<input name="leed_file_url" type="text" class="form-control input_product_modal" value="{{$products['0']->leed_file_url}}">
</div>
<div id="product_images_div"></div>
<input type="submit" class="btn btn-info" value="Save" id="save-product-form-submit" style="display:hidden;">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code is working fine modal is calling but problem is only when modal from edit-product-Bootstrap-modal.blade.php is called through the script used in mainView.blade.php for Bootstrap Modal is not working
Check if you have disabled autoDiscvoer for dropzone.js on Dropzone.autoDiscover
if its false set its value as true (Dropzone.autoDiscover = true;).
If thats also not working try manually initializing the dropzone by attaching it to the model.
myDropDown = new Dropzone('#product_details', {<options>})
I had a similar problem with modals, where my datepicker.js input field wouldn't work when I click it, but id didn't show any errors. I did some digging, and apparently, modals don't properly load scripts defined in your view (or wherever). I managed to do this, by initializing the same script again, but with another name, in my app.js, something like this:
$(document).ready(function () {
$('.datepickerCustom').datepicker({
//datepicker logic
}).on('changeDate', function (e) {
$(this).parent().find('.datePickerInput').val(e);
});
});
After compiling my views again (webpack), date picker was working fine. There's also another solution. Seems like sometimes js scripts "hide" behind the modal, so you need to set their z-index the modal's z-index which is 1050. This could be done inside your modal view:
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>
If this still doesn't work, there's actually one more solution, where you need to initiate the date picker on the Modal shown event, something like this:
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
Hope that any of those solutions can solve your problem. Good luck.
so here is the code i use this for me to show/hide the comment box it works actually but the problem i encounter when i make multiple comments when i tried to click the reply on the 1st comment the comment box show/hide but when i tried to click other comments it doesnt work anymore it only works on the first one.... is there any way to fix this?..
HTML code
<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12" id="reply" style="background:#eff9c7;margin-left:50px;margin-top:-20px;display:none;" >
<img src="img/icons/no-icon-available.png" class="pull-left" style=" border-radius:50%;margin-bottom:3px;width:30px;height:30px;" />
<p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br>
<div class="btn4 disabled" style="margin-top:-25px;margin-left:-10px;">
<span style="margin-left:5px;font-size:12px;color:gray;"><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>
JAVASCRIPT
<script type="text/javascript">
$(document).ready(function(){
$('#replybutton').click(function(){
$('#reply').toggle();
});
});
</script>
id must be unique in a HTML Page, you should change id to class replybutton and reply and jquery code would be,
$(document).ready(function(){
$('.replybutton').click(function(){
$(this).next('.reply').toggle();
});
});
Snippet,
$(document).ready(function() {
$('.replybutton').click(function() {
$(this).next('.reply').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
I have a simple prototype. I want to keep updating the value of Balance as payments are made. I want to ask how can I maintain the value of 'Balance' variable using HTML, CSS, Javascript, and Bootstrap. Once I click Submit, the value returns to the initial value of $10. I have tried to do this using javascript. The simple code is as follows:
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="default.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var output=10;
function payment(){
var amount= document.getElementById ("amountID");
var merchant= document.getElementById("merchantID");
output = output - amount.value;
amount.value=" ";
var balance=document.getElementById("balance");
balance.innerHTML = output ;
}
</script>
</head><body>
<div class="row">
<div class="col-md-12">
<div class="headline">
<h1>Payment</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3">
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a data-toggle="tab" href="#pay">Pay</a>
</li>
<li>
<a data-toggle="tab" href="#send">Send</a>
</li>
</ul>
</div>
<div class="col-xs-9 col-lg-9 col-md-9">
<div class="tab-content">
<div id="pay" class="tab-pane fade in active">
<div class="row">
<label class="col-md-4" style="text-align:right ;"> Available Balance:</label>
<label class="col-md-4" id="balance" > 10$</label>
</div>
<form action="#" class="form-horizontal">
<fieldset>
<div class="form-group">
</div>
<div class="form-group">
<label class="control-label col-md-4 col-xs-4" for="merchantID" > Merchant ID: </label>
<div class="col-md-4 col-xs-4">
<input type="text" class="form-control" id="merchantID" autofocus/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 col-xs-4" for="amountID" > Amount:</label>
<div class="col-md-4 col-xs-4">
<input type="text" class="form-control" id="amountID" autofocus/>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4 col-xs-8 col-xs-offset-4">
<button class="btn btn-primary" onclick="payment()" > Submit </button>
</div>
</div>
</fieldset>
</form>
Just a silly mistake. Change the following line:
<button class="btn btn-primary" onclick="payment()" > Submit </button>
to like below:
<button type="button" class="btn btn-primary" onclick="payment()" > Submit </button>
Which means you have to explicitly mention the type of the button. Because, in HTML5 button has a default behavior of submit. So, without this declaration, the form was being submitted and your page was being reloaded.
The problem you are having as that clicking a button in a form causes the page to submit. When this happens your browser will attempt to send the form data to the server. Because you haven't set a target attribute to your form that means it basically just refreshes the page. You just need to prevent the submit action in your javascript.
function payment(e) {
var amount = document.getElementById("amountID");
var merchant = document.getElementById("merchantID");
output = output - amount.value;
amount.value = " ";
var balance = document.getElementById("balance");
balance.innerHTML = output;
e.preventDefault(); //add
return false; //add
}
I want a checkbox in this code. Only if the checkbox is checked it should be possible to press upload / or to allow a upload.
Could you give me a hint how it's possible to change this?
Actually I can insert a checkbox but it's always uploading if the checkbox is unchecked.
#extends('master/index')
#section('custom')
<!-- Main page -->
<div id="content-wrapper" class="snap-content">
<!-- Progress bar -->
<div class="container progress-holder">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="progress-rate">--%</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">--% Complete</span>
</div>
</div>
</div>
</div>
</div>
<!-- Drag zone -->
#if($limitReached == true)
<div class="container text-center start-zone">
<p>{{ t('You have reached daily upload limit') }}</p>
</div>
#else
<div class="container text-center start-zone">
<form id="fileupload" action="{{ route('images.upload') }}" method="POST" enctype="multipart/form-data" accept="image/gif, image/jpeg, image/jpg, image/png">
<input type="file" id="input-browse" class="block-hide" multiple="multiple" name="files">
<p>{{ t('Drag photos from your computer in here. Select maximum 10 images') }}</p>
<div class="help-block">{{ t('Maximum file size allowed is') }} {{ maxUploadSize()*1024 < (int)siteSettings('maxImageSize')*(1024) ? maxUploadSize() : (int)siteSettings('maxImageSize') }}MB (o.O)</div>
<p>{{ t('You can also') }} <a class="browse_files" href="#">{{ t('browse') }}</a> {{ t('for photos to upload') }}.</p>
</form>
</div>
#endif
<div class="uploader block-hide">
<!-- Preview zone -->
<div class="container preview-zone">
<img src="{{ asset('static/img/mask-tran.png') }}"/>
</div>
<!-- Thumbnail zone -->
<div class="container thumbnail-zone">
<div class="row">
<div class="col-md-9">
<ul class="thumbnails-holder nav nav-tabs" id="myTab"></ul>
</div>
<div class="actions col-md-3 text-right">
<button type="button" class="btn btn-danger btn-remove"><i class="glyphicon glyphicon-trash"></i> remove</button>
<button type="button" class="btn btn-primary btn-upload"><i class="glyphicon glyphicon-open"></i> upload</button>
<p class="help-block"><span class="readyphoto"></span>/<span class="totalphoto"></span> photos are ready</p>
</div>
</div>
</div>
<!-- Edit zone -->
<div class="container-fluid tab-content edit-zone-holder"></div>
</div>
</div>
You can do this with JavaScript using the onchangeevent event to enable/disable button based on checked value
<input type="checkbox" onchange="document.getElementById('uploadButton').disabled = !this.checked;" />
<input type="submit" id="uploadButton" value=" Upload " />
you can disable and enable buttons with jQuery depending on the checkbox selection.
If you have:
<input type="checkbox" id="checkbox"/>
<button id="upload">Upload</button>
Then in your jQuery:
$("#upload").prop('disabled', true);
$("#checkbox").bind('change', function(){
var checked = this.checked;
if(checked){
$("#upload").prop('disabled', false);
} else {
$("#upload").prop('disabled', true);
}
});
JSFiddle
add a checkbox
<input type="checkbox" name="chk" id="chk" value="yourvalue">
add onclick event in your upload button
<button type="button" onclick="selected()">upload</button>
<script>
function selected()
{
if(document.getElementById('chk').checked) {
document.getElementById("fileupload").submit();
} else {
alert('YOUR CUSTOM MESSAGE');
}
}
</script>
Try this:
Add this in your html form.
<input type="checkbox" name="writeSomeName" value="value">
Then after that write some php code:
if ($_POST['writeSomeName'] == 'value')
{
//Add code for upload file here
}
else
{
echo "You have not checked the checkbox. Please make it check first"
}
just need some help on how to change the font color of the title for the current div being selected.
See my code below:
HTML
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="photography" class="photography">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="photography-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="graphics" class="graphics">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="graphics-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
JS
$("#hideshow1").click(function(){
$("#photography").slideToggle("slow");
$("#graphics").slideUp("slow");
});
$("#hideshow2").click(function(){
$("#graphics").slideToggle("slow");
$("#photography").slideUp("slow");
});
What I'm trying to do is when I click Photography, it will change the font color and when I click Graphics, the photography color would go back to black and graphics would now be the colored font.
function chgfont(type){
// document.write("<input type=\"button\" id=\"hideshow2\" name=\"hideshow2\" value=\"red\" class=\"btn\" onclick=\"chgfont('B');\"><input type=\"button\" id=\"hideshow1\" name=\"hideshow1\" value=\"blue\" class=\"btn\" onclick=\"chgfont('A');\"> ");
if(type=="A"){
document.getElementById("colorA").style.color ="blue";
// document.write("<font color=\"blue\">Font colors is blue</font>");
}else{
document.getElementById("colorA").style.color ="red";
// document.write("<font color=\"red\">Font colors is red</font>");
}
}
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<input type="button" id="hideshow1" name="hideshow1" value="blue" class="btn" onclick="chgfont('A');">
<input type="button" id="hideshow2" name="hideshow2" value="red" class="btn" onclick="chgfont('B');">
<hr class="small">
<div id="colorA">
Colored By Santa
</div>
</div>
</div>
</div>
</div>
I hope i can help you.
I would suggest a little different formation of your function. Select the .btn elements and, depending on the clicked element, get the id and perform your actions.
As for the font color, write up a css rule giving the desired color and simply add, or remove this class form the respective elements:
jQuery
$('.btn').on('click', function() {
var that = $(this);
var id = that.attr('id');
//Remove .colored class form all .btn elements
$('.btn').removeClass('colored');
//Add .colored class to the clicked element
that.addClass('colored');
var ph = $("#photography");
var gr = $("#graphics");
//Permorm the appropriate action depending on the clicked id
if (id == '#hideshow1') {
ph.slideToggle("slow");
gr.slideUp("slow");
} else if (id == '#hideshow2') {
gr.slideToggle("slow");
ph.slideUp("slow");
}
});
CSS
.colored { color:red }