Created a select tag using jquery tail module: https://github.com/pytesNET/tail.select
I want to append a new option input taken from the user.
Using nodejs for this local server to automate file movement.
tail.select(".selectBox_custom",{placeholder:"Add custom"});
$("#idofselect")[0].options.add("New Option",true);
I expect to see the newly added option post this action. Whereas, the html source shows the new option but is not visible on tail select element on browser. Also, I don't believe that the functionality of multiple select is also added if somehow I could get the element to be displayed.
Also tried with following documentation, but could not get a clear demo:
https://github.com/pytesNET/tail.select/wiki/public-methods#addkey-value-group-selected-disabled-description-rebuild
As can be seen in documention you had provided:
This function will NOT rebuild the dropdown field, unless you pass
true as last argument!
So. it means that you have to provide true to your add() method call. Smth like this:
$("#idofselect")[0].options.add("New Option",true, false, false, false, '', true);
---==== EDIT ===---
I was able to add new option to tail select following documentation you had provided. I would suggest you to use for all select manipulations instance variable, it is going to save your debugging time and your code became more cleaner and readable. Here the sample fiddle.
Hellow,
It's not documented, but it's highly recommended to fill in the first both arguments on the options.add() method (so the key and value, even if it is the same). To update the dropdown field, you can use the tail.select.query() method on your own.
I wrote a small CodePen to demonstrate this.
Sincerely,
Sam, Developer of tail.select.
Related
The code im working on first makes a call to the database. Through this call, it is determined wether there are available workstations in the office or not.
If there are available workstations, "option" elements are added to a "select" element. This is achieved via jquery:
$('#idofselectelement').html(data)
Where "data" represents the markup to be inserted into the "select" element.
Now, my problem is that I'm trying to implement some code which checks wether your "favorite workstation" is available in the selected timeframe and then automatically preselects the respective workstation from the dropdownmenu in the "select" element. Everything is working so far, except for the selection of the workstation from the dropdown menu :/
The part of
I'm rather new to programming with javascript and the HTML DOM, so I'm not sure whether the fact that the options im trying to chose from are added during the runtime?
The code I've tried to manipulate the dropdown menu with is like this:
$('#idofselectelement').val(favoriteworkstation);
However, as I said, this doesn't work.
I've also already tried to output (console.log) the select element's length property right after the code which adds the markup with the available options has run.
But according to the output Im getting, the length is zero Oo
However, the dropdownmenu is definitely being created AND I can indeed manipulate it, but unfortunately not in the way I want to.
If I add an onclick event which sets the value of the respective select element, then the value in the select field indeed changes to the value specified in the event handler.
So I wonder why I can't have the favorite workstation preselected after the timeframe was chosen...
EDIT:
For further insight into the problem, I'm adding a bit more code here.
This is what the HTML Select element looks like BEFORE anything is added during the runtime:
<label for="#sitz">Sitz Nr.</label>
<select type="text" class="form-control" id="sitz" name="sitz" value="">
the markup which is added during the runtime
<option>workstationvalue</option>
<option>workstationvalue</option>
//and so on, depending on the situation...
This is a timing issue.
The js trying to find the element is faster than the actual add of the element to DOM.
Can you describe what you want to do? You might be able to do that before adding the element to DOM.
Editing before adding to DOM is possible if you convert your String to an jQuery object
var $jqueryObject = $(data);
$jqueryObject.find('.classYouSearch').val(value);
$('.whereToAd').html($jqueryObject);
I am building a custom "subscription builder" where customers select options, proceed to the next step and at the end click checkout; their options reflected in the variant selected.
The way Im going about this is by hiding shopify's selectors and setting them manually using $().val(); This accurately changes the selectors (checking in inspector), but Shopify does not recognize these changes for some reason and so the product added to the cart is the default. I am obviously missing something - is this even possible?
[Code Redacted for uselessness]
Thank you!
Basically,
Shopify's option_selection.js controls this and has a "Product" and "OptionSelector" object.
OptionSelector has a function selectVariant(id, selector) that will properly set it given you have the full variant identifier.
In your product_form.liquid you will see a place that does new OptionSelector(args). You simply save what it returns, i.e.
selector = new OptionSelector(...);
then you can do
selector.selectVariant("123456789", selector);
This will properly set the variant for the checkout button. You can then either hide the 'shopify' selectors with css / js or keep them or modify the option_selection.js code yourself by downloading from here.
Furthermore, I've discovered more useful things one can do:
selector.selectors[index].element.value {get; set;} //much cleaner method of accessing selector elements
selector.product.getVariant(selector.selectedValues()).id // gets the variant id for you so you do not need to hardcore them in
EDIT: Dave has kindly pointed out that
$(element).val(newValue).trigger('change');
Would have done what I wanted, but points out (and I agree) that using OptionSelector is more of a robust method.
Trying to load an edit profile page for a musician site. There is a select2 box that lists the instruments that the user plays, and it pulls this information from the database. But I can't figure out how to get the existing instrument list to display on the select2 on render, it always displays as an empty select2 box (the actual search and select functionality of the box works).
(this is coffeescript in meteor)
On render, it runs:
populator = Meteor.user().profile.instrumentsPlayed
$("#e9").select2()
the populator variable defines properly and has a value of
["acoustic guitar", "piano", "ukulele", "piano"]
I've tried many variations including:
$("#e9").select2("value", populator)
None of the variations worked, and I have a hard time finding and implementing the exact thing I need from the select2 documentation... can someone point me in the right direction?
Summary: need to load select2 box with existing data instead of just empty select2 box
See the documentation here: http://ivaynberg.github.io/select2/#programmatic
They use "val" and not "value" to programmatically set the values.
Try this:
$('#e9').select2();
$('#e9').select2('val', populator);
edit:
Perhaps the confusion was the select2() should be called before select2("val",...).
Here is a jsfiddle http://jsfiddle.net/JFMbt/ showing both methods (comment out one of them)
Right now I am trying to use HTML5's localStorage API to grab a value from a table, and pass that value into a form.
For example, when a user clicks on "Sign Up Today" on this form: http://yft.ac/upcoming-workshops/, I want the information from the given row (Date, Time, Location), as well as the heading above it (ex: YFT Admissions Insights) to be stored, and then displayed in the field "Workshop Interested In" on this page: http://yft.ac/contact-us/.
I'm really not the best with JavaScript but here is what I have so far:
Contact Us:
$('input#workshop').text( localStorage.getItem('workshop') );
Upcoming Workshops Page:
$('body').on('click', 'a.button', function(){
var index = $(this).parents('table').index('table');
var cur_workshop = $(this).parents('.innercontent').find('h3').eq(index).text();
localStorage.setItem('workshop', cur_workshop);
});
I just tried to piece this together so the above code isn't working, but I hope that it is a good jump start for somebody that might be more well-versed in JavaScript.
You have few problems in the page.
Modernizer library is not included - you are using Modernizr.localstorage in your code
The localStorage.setItem('workshop', cur_workshop); code is added before jQuery library is added to the page - since this code used jQuery move it after inclusion of jQuery
Look like somewhere you/wordpress is calling jQuery.noConflict() - so $ does not refer jQuery anymore so use jQuery instead of $ in your code
Some quick thoughts. I believe your localStorage code should work....
But I think what might be happening is the browser is loading the contact page before you store the values in localStorage.
What you may want to do is remove the hyperlink and bind the click handler to a div, span or just a button element instead. In the click event handler use window.location = "xyz"; after you set the value to localStorage.
Again that may not be the real answer.. but try on a non hyperlink element and see. You can also do e.preventDefault; then store the value then do the window.location thing. That is sort of a progressive enhancement way to do it.
As for the localStorage I would encourage you to try to store the values in a JSON object instead of several items.
localStorage.setItem("workshop", JSON.stringify({'date' : '9/2/2012', 'time': '8:30AM', 'Princeton, NJ'}));
var workshop = JSON.parse(localStorage.getItem("workshop"));
hope this helps!
I have a SharePoint list with the following single line of text fields: Title, Year and Type or Location. I want to be able to hide the Type or Location table row in the default display form. I know that I should create a JavaScript script and put it in Content Editor web part inside DispForm.aspx.
I am not fluent with jQuery syntax, thus I need help with the code, i.e. I don't know how to reference the table row which contains Type or Location field and its value. Here's what I've done so far, but it doesn't work:
jQuery(document).ready(function($) {
$("input[title='Type or Location']").closest("tr").hide();
});
I know that the "input[title='Type or Location']" part is incorrect; at least I think it's that. Could anyone help me out? Thank you.
Try:
jQuery(document).ready(function($) {
$("h3.ms-standardheader:contains('Type or Location')").closest("tr").hide();
});
I am not sure why you want to use jQuery for that. In SharePoint, you can choose to make a field required, optional or hidden. In most cases, just switching to hidden will address your issue.
For the record, I would also try to avoid as much as possible the use of jQuery(document).ready, it might conflict with the SharePoint out of the box onload event. In your case it is not needed.
Update: here is a way to do this with jQuery:
$("td.ms-formlabel:contains('Type or Location')").parent().hide();
Try it this way:
jQuery(document).ready(function($) {
$("input[title='Type'],input[title='Location']").closest("tr").hide();
});
It depends what type of column Type ior Location is. If it's a Single line of text, then you're close. You should use a DOM inspector like IE's Developer Tools or Firebug to see what the actual title of the input element is.
If the column is a different type, then it's likely not an input element. Using the DOM inspector again, you can look at what elements make up the field control and decide on your selector from that.
Finally, remember that hiding things in script is not secure. A savvy user can turn off the script or otherwise change the script so that they can edit it. It all depends on your requirements.
// UPDATE //
Ah, you said DispForm. As was pointed out in another answer, there aren't any input elements in a DispForm. You need to correct your selector.
If its just the Default Display Form, How about just creating a view and making it default?
The syntax should be like this:
$("input[title='Type']").closest("tr").hide();
$("input[title='Location']").closest("tr").hide();
It will work.