Mootools - Getting 'undefined' as a value from dropdown - can't get value - javascript

I've created some hidden drop-down fields that I'm attempting to keep hidden until appropriately selected.
I'm trying to do this with mootools - I've put in 'alerts' so that I can see the variables getting passed along at each step.
The first hidden dropdown shows appropriately and the value displays accordingly, but when a value is selected from the 2nd dropdown the value is 'undefined' and the 3rd dropdown does not display.
I've been looking it over time and time again but cannot figure out why this won't work. Any advice would be greatly appreciated. I'm new to mootools & Javascript so it may be a simple fix I'm just not seeing.
You can view the JSFiddle for this - it contains all the html/javascript.

This works. Instead of relying on this, I changed it to use the passed Event object, then got the target from that.
window.addEvent('domready', function() {
$('numberStyle').addEvent('change', function() {
var targ = $(this.get('value'));
$$('.sub-1').setStyle('display', 'none');
targ.setStyle('display', 'block');
alert('TargID = ' + targ.id);
targ.addEvent('change', function(evt) {
var targID1 = $(evt.target).get('value');
alert('The value is of sub-1 is ' + targID1);
$$('.sub-2').setStyle('display', 'none');
$(targID1).setStyle('display', 'block');
});
});
});

Related

Function call when on change is completed

I have 2 dropdown boxes. one dropdown box sets another dropdown box. The second dropdown box's value is used to populate a Date. For whatever reason the value that is used to set the date is always the previous value in the 2nd drop down box. I want to get the latest value not the earlier value.
Note this is razor and they are partial classes.
I've tried using a .when done (commented out below).
I even tried calling the SetCurrentQualDate inside the load
It always gets the preious value and nothing seems to work
$("#requalifty-wps-dd").change(function () {
$("#requalify-process-dd").load('#Url.Action("GetProcessName_Requalify", "Home")'+ "?selectedWPSID=" + $("#requalifty-wps-dd").val());//,SetCurrentQualDate());
$('#requalify-process-dd').prop('disabled', false);
//$.when(loading != null).done(SetCurrentQualDate());
//$.when(loading).done(SetCurrentQualDate());
//SetCurrentQualDate().after(callBack($("#requalifty-wps-dd").val()));
});
//.done(SetCurrentQualDate());
$("#requalify-process-dd :selected").change(function () {
SetCurrentQualDate();
});
I want to get the latest value from the load
I think you're looking on something that is async, using get instead of load should do the trick:
$("#requalifty-wps-dd").change(function () {
$.get('#Url.Action("GetProcessName_Requalify", "Home")' + "?selectedWPSID=" + $("#requalifty-wps-dd").val(), function(data) {
$('#requalify-process-dd').html(data).prop('disabled', false);
SetCurrentQualDate()
});
$('#requalify-process-dd').prop('disabled', false);
});

How to display same content after closing or reloading

Hi I wrote a code which has local storage applied to the options on the page. The only problem I am having is that I am unable to save the page which the options had searched. As you can see in the js fiddle. The options stay the same as which they were selected even after refresh. But when you click on the search function. It takes you to that image with those options applied. But when you refresh the page it goes back to the original. How would I keep the same display after refresh
This is my code for the local storage, it works for the options but not for the display of what the search has produced.
$('#browsepagebutton').on('click', function() {
$('select').each(function() {
var id = $(this).attr('name');
var value = $(this).find("option:selected").val();
console.log("SetItem : " + id + " with value : " + value)
localStorage.setItem(id, value);
});
});
$(document).ready(function() {
$('select').each(function() {
var id = $(this).attr('name');
if (localStorage.getItem(id) !== null) {
var value = localStorage.getItem(id);
$(this).val(value)
}
});
})
Js fiddle of code https://jsfiddle.net/387tnzoy/4/ (Note the function wont work)
The js fiddle does show the code just so that you can get an idea of what is happening for example. When I apply filters such as animation on life of pi and click the submit button it will only show the life of pi image undreneath the options because it is the only one set with that option. The only problem now is that I want local storage to save that page. So that when I refresh it is still on that display.
$('select option').each(function() {
var id = $(this).attr('name');
if (localStorage.getItem(id) != null && id=='name') {
$(this).attr("selected", "selected");
}
});
You'll just need to run the filtering after populating the options. Note that they will still flash on the screen before the JavaScript is run so you might want to keep them hidden until that.
$(document).ready(function() {
$('select').each(function() {
var id = $(this).attr('name');
var value = localStorage.getItem(id);
$(this).val(value)
});
$('#browsepagebutton').click(); // Add this
})
Updated fiddle: https://jsfiddle.net/387tnzoy/6/
There are multiple issue with your fiddle as described below.
Remove onclick="saveValues()" from Search button.
Check on document ready if localstorage has value than play with your localStorage checking code
Your Year dropdown have similar values for multiple options like <option value="5">2013</option>
<option value="5">2014</option>
<option value="5">2015</option> as you can see same value 5 here
And yes #kaivosukeltaja mentioned you have to click Search if localstorage has value on ready event
I have updated fiddle you can find here

Update bootstrap progress bar on blur

I cannot figure out why my javascript doesn't work.
//Update Progress Bar
$('#photoUpload-name').blur(function () {
var validName = $('#photoUpload-name').val();
if (validName > 1) {
$(function () {
$(".progress-bar").css("width", "50%");
});
}
});
I know my project is set up correctly because $(".progress-bar").css("width", "50%"); works outside the function.
After the user, in this case, fills out their name and the input loses focus, I want it to check that there was at least 2 characters entered (validName > 1) then if there is, to update the progress bar.
I've tried different variations of this, using focusout and it still doesn't work.
To check lenght you need:
$('#photoUpload-name').val().length;
Because $('#photoUpload-name').val() just get the value.
DEMO

Fancybox - Setting the parent window's global variable from within a child fancybox

Here is the issue at hand:
The overall development is being done using Ruby on rails; however, the views consist of mostly html and jQuery. Currently, I have it set up so that when a user types into a text field, they can press a small "suggest" button beneath it which opens up a Fancybox where there is a list of useful Search terms, provided by the Google Suggest API. This is all set up and working. Now I want to take this to the next step, where, from inside of the Fancybox, the users can click on one of the suggestions and it will replace the initially typed in phrase in the parent window. Sadly I am not adept at using AJAX yet so I am trying to do this via javascript. This is what I have thus far:
In the parent window:
<script type="text/javascript">
$(document).ready(function() {
var $_returnvalue = false;
$('.suggest_link').fancybox({
onClosed: function(){
alert($_returnvalue);
if ($_returnvalue != false)
{
// I will be setting the textbox value here.
}
}
});
</script>
In the partial view rendered inside of the fancybox:
<script type="text/javascript">
$(document).ready(function() {
var $_fancyvalue = false;
$(".suggestion").click(function(){
alert(parent.$_returnvalue);
parent.$_returnvalue = $(this).text();
$.fancybox.close();
});
});
</script>
Sorry if there is anything strange with this post. This is my first time asking a question here.
Define var $_returnvalue in the global scope in the parent window. Try this it will work fine.
var $_returnvalue = false;
$(document).ready(function() {
$('.suggest_link').fancybox({
onClosed: function(){
alert($_returnvalue);
if ($_returnvalue != false)
{
// I will be setting the textbox value here.
}
}
});

How to hide/close other elements when new element is being opened?

Ran into problem with creating custom select dropdown plugin in jQuery. I'm at the one-at-the-time-open feature. Meaning, that when you open a dropdown, then other(s) will close.
My first idea was to create some global array with all dropdowns in it as objects. Then in the "opening"-function, I would add the first line to first check that none of the dropdowns are open (if open, then close them.)
I created a very scaled version of my script: http://jsfiddle.net/ngGGy/1/
Idea would be to have only one dropdown open at the time. Meaning, that when you open one, other(s) must be closed, if not they will automatically close when a new one is opened.
Your dropdown set seems to behave like an accordion.
This is easier to accomplish if you wrap each dropdown in a div with a class, then use that to target all the dropdown uls you have.
I forked your jsfiddle with a working example.
(EDIT updated fiddle link)
You can keep track of the DropDownSelectized lists like this: http://jsfiddle.net/pimvdb/ngGGy/3/.
(function($){
var lists = $(); // cache of lists
$.fn.DropDownSelect = function (settings) {
jQuery.globalEval("var zindex = 100");
var thiselement = $(this);
var thislist = thiselement.next('ul');
lists = lists.add(thislist); // add current one to cache
thiselement.click(function () {
lists.slideUp(); // hide all lists initially
if (thislist.is(':visible')) {
thislist.slideUp();
} else {
thislist.css('z-index', ++zindex).slideDown();
}
});
};
})(jQuery);
You're definitely on the right track, but if you're only going to have one dropdown list open at a time then you want them to be related somehow. Fortunately your markup is already there, so all we should have to do is modify the JS. I've updated your jsFiddle project here: http://jsfiddle.net/ninjascript/ngGGy/4/
First the selector. jQuery will let you select attributes that are similar by using ^= like this:
$('div[id^=button]').DropDownSelect();
Now we just have to update your plugin a bit. Notice that what used to be 'thislist' is now called 'everylist'. Now we can enforce that every list closes on click before opening the list associated with the button that was clicked.
(function($){
$.fn.DropDownSelect = function (settings) {
jQuery.globalEval("var zindex = 100");
var thiselement = $(this);
var everylist = thiselement.next('ul');
thiselement.click(function () {
var thislist = $(this).next('ul');
if (everylist.is(':visible')) {
everylist.slideUp();
}
thislist.css('z-index', ++zindex).slideDown();
});
};
})(jQuery);
Good luck!
Why not raise an event that all drop-downs subscribe to. pass in the id (or instance) of the one currently being opened. In the handler check whether the handling instance is the one being opened. If not, close it.

Categories

Resources