Hi I am trying in my AngularJS code, I am trying to show just the appropriate currency based on which currency is chosen from the select . I simplified my code down to just the barebones of what I accomplished so far. I appreciate the help. Thank you. See below http://jsbin.com/najih/1/edit
UPDATE: I have gotten the code to show one value but now the drop down doesn't update the list see the code. http://jsbin.com/najih/3/edit
UPDATE: Ok so I found that on my fiddle it works in IE and Firefox but not Chrome and Safari. Anyone know a reason why?
First you should use ng-options="rate.Name for rate in shots. Then attach a model on the select:
<select ng-model="rate" ng-options="rate.Name for rate in shots"></select>
Now you have the selected rate available and based on your question, which i dont realy understand from this point, you could create a radio button:
<label>
<input type="radio" ng-model="radiorate" ng-value="rate"> {{ radiorate.name }}
</label>
But this doesn't make much sense to me.
Related
I'm having a bit of a mare with jQuery and I was hoping someone could clarify some bits for me. I'm under no illusion any of this is elegant or optimal, and I have NEVER got on with Javascript in any form so please don't judge me too harshly!
Basically, I've got a Wordpress plugin that works very well for most things I want it to do. The main thing is that it offers the ability to select the delivery method from the Woocommerce product menu page. But I've been asked for the available menu options to be filtered by delivery method and I can't see a way of doing this live on the page, so what I've come up with is a "simpler" solution. I'm intending to set up three different page implementations of the menu, one for each of the delivery options (deliver, pick up and eat in), each with categories filtered via shortcode for that delivery method. When the page loads I've got jQuery setting the default option for the dropdown to match that page and then whenever the dropdown is changed from this option it can trigger a redirect to one of the other relevant pages.
I know this is a messy way of doing it, but I have no idea how or even if I could filter the products on the menu any other way, but if someone has a suggestion I'd love to hear it!
Anyway, I've got this partially working. I can set the dropdown default on page load easily enough, and I've managed to get an if statement kind of working, but it only seems to work for the first option and no others. I also can briefly see ifelse undefined in the console before the page changes on a redirect. I've also tried to use a variable, but whenever I've tried using it in the if condition checks it just comes up as undefined or null even though I can view it on the previous line like this:
jQuery("#fdoe_delivery_dropdown").on("change",function(){//Getting Value
var selValue = $("#fdoe_delivery_dropdown").val();
console.log ("Variable delivery method is - " + selValue);
Obviously, I know a variable would be a better way to go, but because I can't get it to work (and I know it's me being dumb but I just gave up on it), here's what I've got so far:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
//Set opening delivery method for "Delivery" page
jQuery("#fdoe_delivery_dropdown").val("delivery").change();
//Check initial delivery method
console.log ("Opening delivery method is - " + jQuery('#fdoe_delivery_dropdown').val());
if($("#fdoe_delivery_dropdown option:selected").val() == "pickup") {
//Log success to console and redirect
console.log ("New delivery method is - " + jQuery('#fdoe_delivery_dropdown').val());
window.location.replace("{site_url}/pickup/"); }
elseif($("#fdoe_delivery_dropdown option:selected").val() == "eatin") {
//Log success to console and redirect
console.log ("New delivery method is - " + jQuery('#fdoe_delivery_dropdown').val());
window.location.replace("{site_url}/eatin/"); }
});
});
</script>
HTML:
<select id="fdoe_delivery_dropdown" class="form-control input-lg"><option value="pickup" selected="">Pick Up</option><option value="delivery">Delivery</option></select>
Note: I have used the WordPress variable {site_url} instead of publishing the website on here, I have no idea if this would actually work in the jQuery, but it would be much better to use a dynamic URL like this rather than a hard-coded one, so if anyone knows the best way of doing that as well it'd be great to know.
As I've said, this script partially works and I've had to put it in a HTML block on the individual pages to get it to trigger at present. So if anyone could help me tidy this up, point out the millions of ways I'm going wrong and help me get this working fully, it would be MASSIVELY appreciated!
Thanks in advance!
I think you want to achieve redirect based on the select option. check below code.
$('#fdoe_delivery_dropdown').on('change', function(){
window.location = 'https://exmaple.com/'+$(this).val();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="fdoe_delivery_dropdown" class="form-control input-lg">
<option value="pickup" selected="">Pick Up</option>
<option value="delivery">Delivery</option
</select>
I want to start by saying I am not a coder but I am trying to edit code in Zendesk to auto fill and hide the required subject and description fields. Here is the code I put in the script.js at the top:
$(document).ready(function() {
$('#request_subject').val("vaccine request");
$('.request_subject').hide();
$('#request_description').val("vaccine");
$('.request_description').hide();
$('.form-field label:contains("Attachments")').hide();
$('#upload-dropzone').hide();
});
The request subject auto fills on the form but the request description will not populate. Once the form is submitted it returns an error that description cannot be blank. If anyone has any suggestions I would be most grateful. We are trying to launch this today to start pushing out vaccines next week but I cannot get this to work.
I'm sure I've made a simple mistake because I don't know enough about coding but after spending hours trying to decipher the problem I am taking a chance that someone on here can help. Thank you in advance for any assistance.
We need more information to answer your question, mainly a chunk of HTML with the form you are trying to manipulate.
$(document).ready(function() {
$('#request_subject').val("vaccine request");
$('.request_subject').hide();
$('#request_description').val("vaccine");
$('.request_description').hide();
$('.form-field label:contains("Attachments")').hide();
$('#upload-dropzone').hide();
});
In your code snippet, you have $('#request_subject').val("...") which would imply that there is a form element, probably something like this:
<input id="request_subject" type="text" value=""></input>
Right after that you have $('.request_subject').hide() which implies a different element. One with a class. Maybe this is intentional?
<div class="request_subject">
<input id="request_subject" type="text" value=""></input>
</div>
It's hard to know.
If the selectors are correct, then your code should work. Here is a Stack Overflow question about setting the values of text areas.
Based on the information in the question, this is pure speculation, though.
I am starting with Bootstrap switch.
I have used the demos from http://www.jque.re/plugins/version3/bootstrap.switch/
The problem is that the switch doesn´t shows. It shows only a standard checkbox.
<div class="make-switch" data-on="primary" data-off="info">
<input type="checkbox" checked>
</div>
I also have included the css and js staff.
JSFiddle:
http://jsfiddle.net/crtLwdg4/
What am I missing here?
I just added this to the fiddle and it seems the appearance has changed.
$(function() {
$('.make-switch').bootstrapSwitch();
});
It seems you need to initialize the switch manually. I have only taken a glance at the docs but this actually changed the appearance of the checkbox.
UPDATE
I was able to get it working by adding a name property to the input and changing the jquery accordingly. see this updated fiddle.
I'm kinda new to js/php programming and have to jump into someone elses code. :/
I have a page with 2 different divs that contains each a table:
<div location="A"...><table location="A"...><input type="text" id="SomeID"...>
<div location="B"...><table location="B"...><input type="text" id="SomeID"...>
On a click of a btn, it uses Ajax to get values to populate these fields. Once I have the values, the following code updates the input box
$('#SomeID').val('Obtained value').trigger('change');
All this works kinda ok except for one thing... How can I specify which $('#SomeID') to update (the one from location A or location B)?
If you want the value of location, you can use :
$('#SomeID').attr('location').val();
Use attribute selector:
$('div[location="A"]').val('Obtained value').trigger('change');//for location A
and
$('div[location="A"]').val('Obtained value').trigger('change');//for location B
Please update your question if you didn't mean to ask this so that it can be more clear.
I hope it helps
I need to find a away to insert/add a <select> (dropdown) box on click of a button. I want each click of the button to keep adding a new <select>.
Tested out some javascript/jquery functions and as I don't have much background in it, I'm having no luck!
Edit:
Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks
You can create a <select> element (or any other element) with $("<select/>");
The append function can be used to append html into an item.
Combining them yields:
$("#buttonToAddDD").click(function () {
var newDD = $("<select/>");
$(newDD).append("<option>New Option 1</option>");
$(newDD).append("<option>New Option 2</option>");
$("#whereYouWantToAddNewDD").append(newDD);
});
<div id="whereYouWantToAddNewDD"></div>
<input type="button" id="buttonToAddDD" value="Add DD" />
Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks
Dynamically creating/removing a html code is easy with JQuery as explained above by Adam. However keep caution to provide users with facility to remove them as well.
Best way would be adding a id to the select box and provide a span/div with a close 'X' on clicking which either it could be removed completely
$(document).ready(function(){
{
$("#close").click({function(){
$("#selectid").remove(); // to remove the select
$("#selectid").hide(); //this would hide it but when submitted, the default/selected option shall still be submitted
$("#close").remove();
}):
});