Hey all I can not seem to get this to work in jQuery even though I know that it can:
my HTML code:
<div class="cd-panel from-right" id="va">
<header class="cd-panel-header" style="max-width: 600px;">
<h1 style="margin-top: 5px;" id="panHeading"></h1>
</header>
<div class="cd-panel-container" style="max-width: 600px; width: 600px;">
[more html code here...]
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<div class="col-sm-10">
<input name="RequestID" disabled="True" class="form-control input-sm"
id="RequestID" style="width: 520px; max-width: 520px;" type="text">
</div>
</div>
[more html code here...]
</div>
<div class="cd-panel from-right" id="VDA">
<header class="cd-panel-header" style="max-width: 600px;">
<h1 style="margin-top: 5px;" id="panHeading"></h1>
</header>
<div class="cd-panel-container" style="max-width: 600px; width: 600px;">
[more html code here...]
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<div class="col-sm-10">
<input name="RequestID" disabled="True" class="form-control input-sm"
id="RequestID" style="width: 520px; max-width: 520px;" type="text">
</div>
</div>
[more html code here...]
</div>
And this is my jQuery code:
if (responce["personData1"][0].RequestID != 1) {
$('#va > #RequestID').val(responce["personData1"][0].RequestID);
}
But it never puts the value inside that RequestID text box for VA even though it does have a value for RequestID. If I do this:
$('#RequestID').val(responce["personData1"][0].RequestID);
Then it has the value inside the text box.
What would I be missing?
You need to use, get rid of > it looks for immediate child and RequestID is not the child of va element.
$('#va #RequestID').val(responce["personData1"][0].RequestID)
Also note Identifiers in HTML must be unique. You can assign a class and then use it like
<input name="RequestID" disabled="True" class="form-control input-sm RequestID" style="width: 520px; max-width: 520px;" type="text">
and then
$('#va .RequestID').val(responce["personData1"][0].RequestID)
Try this:
$("#va [name='RequestID']").val(responce["personData1"][0].RequestID);
I think the problem is that you're trying to get an ID child of an ID, which should be unique, but you're using "RequestID" as ID on multiple elements.
ID are designed to be a unique selector on the page. So the search would stop after the first match
If you'd like to select multiple elements on the page based on a common pattern you should go for class selectors.
Now, to answer your question :
HTML:
<input name="RequestID" disabled="True" class="some-input-class form-control input-sm" id="RequestID" style="width: 520px; max-width: 520px;" type="text">
and JS:
if (responce["personData1"][0].RequestID != 1) {
$('#va .some-input-class').val(responce["personData1"][0].RequestID);
}
jsFiddle example here
References:
W3C docs
Is selecting by class or id faster than selecting by some other attribute?
Related
I write a method that called in change event of text input.
When i click on + and - buttons change event dont called but when i change value of input manually change event called.
What is problem?
js
$("#wraper-frequency input[type=text]").change(function (e) {
alert("frequency change");
});
html
<div id="wraper-frequency">
<input id="frequency" class="form-control" type="number" value="0" min="0" max="50" step="1" style="display: none;">
<div class="input-group ">
<div class="input-group-prepend">
<button style="min-width: 2.5rem" class="btn btn-decrement btn-outline-secondary" type="button"><strong>-</strong></button>
</div>
<input type="text" style="text-align: center" class="form-control " placeholder="">
<div class="input-group-append">
<button style="min-width: 2.5rem" class="btn btn-increment btn-outline-secondary" type="button"><strong>+</strong></button>
</div>
</div>
<label style="top: 7px; position: relative; margin-right: 5px;">Hz</label>
You didn't bind the event to any of the buttons. You can trigger the change event of the input element on button click like the following way:
$("#wraper-frequency input[type=text]").change(function (e) {
alert("frequency change");
});
$("button").click(function(){
$("#wraper-frequency input[type=text]").trigger('change')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wraper-frequency">
<input id="output-pressure" disabled001="" class="form-control" type="number" value="0.0" data-decimals="1" min="0" max="50" step="0.1" style="display: none;">
<div class="input-group ">
<div class="input-group-prepend">
<button style="min-width: 2.5rem" class="btn btn-decrement btn-outline-secondary" type="button"><strong>-</strong></button>
</div>
<input type="text" style="text-align: center" class="form-control " placeholder="">
<div class="input-group-append">
<button style="min-width: 2.5rem" class="btn btn-increment btn-outline-secondary" type="button"><strong>+</strong></button>
</div>
</div>
<label style="top: 7px; position: relative; margin-right: 5px;">Bar</label>
As I mentioned in the comments to the original post:
You do not have an input[type=text] field with Id wrapper-frequency.
Also in the text field type, there were spaces. Remove spaces.
If you want the event to be triggered on button click as well, trigger the event manually.
Lastly, a selector combining Id and input[type=text] is not doing any good. Id is anyway unique. If you mean wrapper-frequency and input[ type=text] both selection use comma in between.
Here is the modified code that works:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#wrapper-frequency, input[type=text]").change(function (e) {
alert("frequency change");
});
});
</script>
<div id="wraper-output-pressure">
<input id="output-pressure" disabled001="" class="form-control" type="number" value="0.0" data-decimals="1" min="0"
max="50" step="0.1" style="display: none;">
<div class="input-group ">
<div class="input-group-prepend">
<button style="min-width: 2.5rem" class="btn btn-decrement btn-outline-secondary"
type="button"><strong>-</strong></button>
</div>
<input type="text" style="text-align: center" class="form-control " placeholder="">
<div class="input-group-append">
<button style="min-width: 2.5rem" class="btn btn-increment btn-outline-secondary"
type="button"><strong>+</strong></button>
</div>
</div>
<label style="top: 7px; position: relative; margin-right: 5px;">Bar</label>
You are trying to attach an event listener to an element that doesn't exist in your example.
In your example you are targeting #wraper-frequency. I only see the id's #wraper-output-pressure and #output-pressure in your HTML.
This is my view please have a look :
<div class="form-group target" id="tools" >
<div class="input-group">
<div class="col-lg-6"> <select class="form-control" style="width: 100%" name="tool_id[]" id="toolss" onchange="tool(this)" required>
<option value="">Select</option>
</select></div>
<div class="col-lg-3">
<input type="text" class="form-control" required name="quantity[]" id="quantity" placeholder="Quantity">
</div>
<div class="col-lg-3" id="avail">
<p class="available">0 available</p>
</div>
<span class="input-group-btn">
<button type="button" class="btn btn-danger addel-delete"><i class="fa fa-remove"></i>
</button>
</span>
</div>
</div>
This is my script :
function tool(sel)
{
var tools=sel.value;
alert(tools);
var url='<?php echo base_url(); ?>admin/tool/ajax_available';
$.post(url, {tools:tools}, function(data){
alert("Value: " + $(".available").html(data));
});
}
The problem is whenever I goes on selecting values from the select box the corresponding value and all the previously selected values are becoming same.
the image am showing here.
Valid XHTML http://spdc.in/demo/spectra/assets/images/s-tool1.PNG.
Working fiddle.
Problem : When you use .available selector it will affect all the element with class available in your document.
Suggested solution :
The id should be unique in the same document so if you've multiple tools you should replace the id with a class for the valid structure :
<div class="form-group target tools">
Then you should refer to the current element in your selector, so use :
$(sel).closest('.tools').find('.available').html(data);
Hope this helps.
Basically I would like to have all form inputs disabled until the "Edit Profile" button is clicked, then once the "Save Changes" button is clicked, have the disabled attribute reapplied.
I have tried a bunch of solutions from this site, with no luck. Any help would be appreciated, even if it's just guiding me int he right directions.
Here is the code, which is using bootstrap and contains Django (not shown, obviously). Thanks in advance.
<div class="main">
<div class="container">
<section class="hgroup">
<h1>My Profile</h1>
<h2>View and edit your profile.</h2>
<ul class="breadcrumb pull-right">
<li>Dashboard </li>
<li class="active">Profile</li>
</ul>
</section>
<section>
<div class="row">
<div class="contact_form col-sm-12 col-md-12">
<form name="contact_form" id="contact_form" method="post">
<div class="row">
<div class="col-sm-4 col-md-4">
<label>First Name</label>
<input name="first_name" id="name" class="form-control" type="text" value="">
</div>
<div class="col-sm-4 col-md-4">
<label>Middle Name</label>
<input name="middle_name" id="email" class="form-control" type="text" value="">
</div>
<div class="col-sm-4 col-md-4">
<label>Last Name</label>
<input name="last_name" id="email" class="form-control" type="text" value="">
</div>
</div>
<div class="col-sm-12 col-md-12">
<br/>
<a id="submit_btn" class="btn btn-primary" name="submit">Edit Profile</a>
<a id="submit_btn" class="btn btn-primary" name="submit">Save Changes</a>
<!--<span id="notice" class="alert alert-warning alert-dismissable hidden" style="margin-left:20px;"></span>-->
</div>
</form>
</div>
</div>
</section>
</div>
</div>
Add some selectors to link -
Edit Profile
Save Changes
Disable all the input fields -
$('input').attr('disabled', true);
Alter the attributes of input fields -
$('#edit_profile').on('click', function(e) {
e.preventDefault();
$('input').attr('disabled', false);
});
$('#save_button').on('click', function(e) {
e.preventDefault();
$('input').attr('disabled', true);
});
Dont forget to include jquery. And e.preventDefault() for preventing the default action of the as.
Working Demo
You also have two elements that have the id submit_btn, id's should be unique.
I would change them to be different and then try:
$("#edit_btn").on('click', function() {
$("input[type='text']").removeAttr('disabled');
});
Then to re-disable:
$("#submit_btn").on('click', function() {
$("input[type='text']").attr('disabled', 'disabled');
});
You may wish to change the input[type='text'] selector if you have more inputs on the page you don't want disabled.
Maybe change your <input> elements to include the js-disable class, then target the $(".js-disable") selector instead of input[type='text']
I would use jQuery. Here's an example.
html:
<form>
<p>Edit the form</p>
<input type="text" placeholder="one" disabled>
<input type="text" placeholder="two" disabled>
<input type="text" placeholder="three" disabled>
<div id="saveForm">Save Form</div>
<div id="editForm">Edit Form</div>
</form>
jQuery:
$("#editForm").click(function(){
$("p").show(0);
$("#saveForm").show(0);
$("form input").prop('disabled', false);
$(this).hide(0);
});
$("#saveForm").click(function(){
$("p").hide(0);
$("#editForm").show(0);
$("form input").prop('disabled', true);
$(this).hide(0);
});
CSS:
div,input{
padding: 10px;
display: block;
margin: 10px;
border-radius: 5px;
border: 2px solid #000;
}
#saveForm{display: none;color:#ff0000;}
p{display:none;color:#ff0000;}
div{cursor:pointer;}
div:hover{opacity: 0.7;}
Here's a fiddle: http://jsfiddle.net/92ng2hs0/2/
Is it possible to assign multiple ui-blocks to one element?
I want to use a five-column layout with 4 being assigned to one input and the spare to an image. I have tried just adding multiple ui-blocks to one element but no joy.
<fieldset class="ui-grid-d">
<div class="ui-block-a ui-block-b ui-block-c ui-block-d ">
<input type="text" id="item" placeholder="Error/Part number">
</div>
<div class="ui-block-e">
<img src="img/scan_button.png" alt="scan button">
</div>
</fieldset>
No, you can't.
What you can do is use a 2-column layout with custom width setting (not 50/50):
CSS:
.width-80 { width: 80% !important; }
.width-20 { width: 20% !important; }
HTML:
<div class="ui-grid-a">
<div class="ui-block-a width-80">
<input type="text" id="item" placeholder="Error/Part number">
</div>
<div class="ui-block-b width-20">
<img src="img/scan_button.png" alt="scan button">
</div>
</div>
JSFiddle
so this is a problem I'm having:
I want to style the height of the select to that of my input. The select uses the ui-btn-inner class which has padding, and when changed, the height of the select changes.
Here's the padding created by ui-btn-inner:
Here is my code:
<div class="ui-grid-a">
<div class="ui-block-a" style="width: 80%;">
<div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
Amount:
</div>
<input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/>
</div>
<div class="ui-block-b" style="width: 20%; padding-left: 15px;">
<div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
Amount:
</div>
<select name="select-choice-1" id="select-choice-1" data-theme="a" style="height: 40%; padding: 0; margin: 0;">
<option value="" style="padding: 0;">CAD</option>
<option value="" style="padding: 0;"></option>
</select>
</div>
</div>
Notice wherever I put style="padding: 0;" it still doesn't affect the padding? jQuery Mobile generates code and I am unable to attach classes to that code.
I'm a complete noob at jQuery and have no idea how to simply change the height of this select..
You are missing the obvious.
Your original select is not longer visible. Also as you can see new one is just custom combination of <div>'s and <span>'s. New custom select box will not inherit css from the old one. New select box CSS structure needs to be changed in order for this to work.
Working example: http://jsfiddle.net/Gajotres/PMrDn/107/
HTML:
<div class="ui-grid-a">
<div class="ui-block-a" style="width: 80%;">
<div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
Amount:
</div>
<input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/>
</div>
<div class="ui-block-b" style="width: 20%; padding-left: 15px;" id="grid-container">
<div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
Amount:
</div>
<select name="select-choice-1" id="select-choice-1" data-theme="a">
<option value="" style="padding: 0;">CAD</option>
<option value="" style="padding: 0;"></option>
</select>
</div>
</div>
CSS:
#grid-container .ui-select div span {
padding-bottom: 0.14em !important;
}
Or if you want for select box text to be perfectly centered take a look at this example: http://jsfiddle.net/Gajotres/PMrDn/108/
CSS:
#grid-container .ui-select div span {
padding-top: 0.2em !important;
padding-bottom: 0.2em !important;
}
grid-container is just an id given to the grid container, so we can affect only this select box. If we change .ui-select it will affect every single select box.