I'm using the niceforms plugin to style my select box. The problem I'm having is that I can't get the right javascript code to activate the links placed in the value option.
The niceforms site (http://www.emblematiq.com/lab/niceforms/help/) instructs me to use the following code:
el.lnk._onclick = el.onclick || function () {
if(this.ref.oldClassName == "NFOnChange") {
//insert your code here
}};
This is my attempt at manipulating the code to allow url linking in the select drop down
el.lnk._onclick = el.onclick || function () {
if(this.ref.oldClassName == "NFOnChange") {
//code i added
window.location.href = $(this.ref).val();
}};
The PROBLEM is the links do not work as expected, they do not link to their corresponding values.
form class ="niceform"
select class ="NFOnchange"
option value = "http://link1.com" -> link1.com
option value = "http://link2.com" -> link2.com
option value = "http://link3.com" -> link3.com
Please any help with this would be appreciated. I just need to insert the right bit of code to make the links correspond to their option values.
Ok, first off "$" is used by almost every major JS library, so:
window.location.href = $(this.ref).val();
means nothing unless you tell us which JS library you are using.
If you are using jQuery, val() should work. I would confirm that $this.ref) is actually what you think it is by adding this right before that line:
console.log($(this.ref))
(the above assumes you use Firebug or the Chrome developer console ... if you're not using one of these tools, you should be ;-))
If that shows that you are actually selecting a SELECT element, then something funny is going on, but I suspect it isn't.
Also, as a side note I think you can probably just do:
$(this)
if you're using jQuery.
If you're not using jQuery ... tell us what you are using, and we can go from there.
Oh, and if you're not using any library, and $ is just your own custom function, then Felix was correct in pointing out that JS has no built in "value()" method on elements. The closest you will find is .selectedIndex, which is a property of any SELECT element that tells you the index (out of all of the options) of the selected option (and then by looking at the list of available options you can tell the ".value" property of the appropriate one).
Related
SOLVED:
Final fiddle:
http://jsfiddle.net/AcfUz/220/
*used the selector indicated in the chosen answer and moved the console.log value ahead of the text input the selected options were to be listed in and boom--working as it should!
Please reference this fiddle:
http://jsfiddle.net/AcfUz/218/
jQuery(document).on('click', '#go', function() {
console.log("woo");
var selMulti = jQuery.map(jQuery("#inf_custom_Choosealocation_select :selected"), function(e) {
return jQuery(e).val();
console.log("hoo");
});
//var selMulti = jQuery("#inf_custom_Choosealocation_select :selected").val();
console.log(selMulti + "hmm...");
console.log("hootie");
//jQuery("#inf_custom_Choosealocation").val(selMulti.join(", "));
jQuery("#inf_custom_Choosealocation").val(selMulti);
console.log("who");
});
This works perfectly on fiddle but no matter how many iterations I try it won't work on the live site. The variable containing the desired values is always empty. I can't for the life of me figure out why?????
Can anyone shed some light in my hour of desperation? It's been 7 hours and I need to solve this before the morning.
I suppose to expand on this--the code in the fiddle is the code I include in the site. The form and then the script before the closing body tag. The form is dynamically loaded (takes about a second). What I need to accomplish is grabbing whatever values a user selects from any of the multi select fields (I'm starting with the one) and copy those as a comma separated list into another single line text input. The fiddle works splendidly, but I'm coming up empty on the live site. I just returns blank/empty--it doesn't give me any console errors what so ever (save for a missing img) and I can see my console.log checkpoints.
Here is the live link:
http://goo.gl/ll1Hz4
On the live website if I try $("#inf_custom_Choosealocation_select option") in the console, the options are listed twice. Using $('select') 2 #inf_custom_Choosealocation_select are returned. (although I didn't see 2 instances in the page source) ($("#inf_custom_Choosealocation_select"); returns one, but that uses getElementbyID and skips the search). Perhaps the second select is created by some sort of overlay?
All in all, I didn't search any further where the 2nd select come from. A quick fix would be to use a selector searching the attribute. The following selector worked while testing on the live site:
$("select[id=inf_custom_Choosealocation_select] :selected")
But that might be only a temporary work around. You'll probably want to find the ghost select culprit too ;)
You are not using jQuery map in fiddle, where as you have jquery map in your live code...
Try to update your live site with the code you have in fiddle.
Live Code: (has jQuery map)
So, yeah, I am not sure why :selected isn't working in your case, but you can try to go through the options and check manually... jQuery("#inf_custom_Choosealocation_select option").each(function(i, o){ console.log(o.selected) })
Try wrapping your code inside
jQuery(document).ready(function(){});
Instead of using
var selMulti = jQuery.map(jQuery("#inf_custom_Choosealocation_select :selected"), function(e) {
return jQuery(e).val();
console.log("hoo");
});
use
var selMulti=jQuery("#inf_custom_Choosealocation_select").val();
I have the following problem.
To translate a website, I'm using the jQuery Localize plugin.
This works fine. However, I want a CSS styled selectbox with flags and languages, and when a different option is selected the call to $("[data-localize]").localize("example", { language: $(this).attr('value') should be made to translate the page.
This code I'm currenly using, and it works fine for a plain, not-styled selectbox.
<script type="text/javascript">
$(function() {
$('#polyglot-language-options').change(function() {
if ($(this).attr('value') == "en") {
$("[data-localize]").localize("example", {
language: $(this).attr('value')
});
}
else if ($(this).attr('value') == "nl") {
location.reload();
}
});
});
</script>
But I want to style it, so I tried to integrate the "polyglot" language switcher. However, the current code doesn't work.
How can I integrate the $("[data.localize]").localize(); function in this code:
$('#polyglotLanguageSwitcher').polyglotLanguageSwitcher({
effect: 'fade'
});
This plugin (source code) does not follow the guidelines for jQuery plugin design. The bugs I found quickly:
It does not allow chaining, because it does not return this
It works only on one element at a time (does not use each())
It has a queer element hierarchy. It seems to require an element with an id, containing a form containing a select (as in the demo). In my opinion, such a plugin should be called on the language select element only.
It seems to navigate automatically, wanting to be configured with the page structure. Each of the li items in that fancy box contains a link to the respective page.
Therefore, it does neither trigger the form it live in or fire the change event you want to listen to.
As it stands, you can't use this particular plugin as you want to. If you want to fix all the bugs, I wish you a happy time :-) Nonetheless it might be possible to manipulate the plugin code, to let you register callbacks on select events (where you can invoke the localisation plugin). Otherwise, you will need to choose an other select plugin (or build one yourself from scratch, adapting the existing code)
Tinymce stops working if on the same page I use the selectmenu from https://github.com/fnagel/jquery-ui
Tinymce with default configuration
and selectmenu:
$('select.flags').selectmenu();
EDIT:
The problem is that on the page with tinymce i dont load the script for the selectmenu function. Should I remove it from the js that runs all the functions or is there any way to modify it to run only if the function exists and will be able to be ran
Here is an easy way to make 'function does not exist' problems go away.
$.fn.selectmenu = $.fn.selectmenu || $.noop
$('select.jquery_smenu').selectmenu(); //do what you will
or you could do it like this:
if( $.fn.selectmenu ){
$('select.jquery_smenu').selectmenu(); //do what you will
}
for the record, function does not exist or var is not a function is a javascript problem more than a jQuery one. Hope this helps!
Is tiny working with this script added to the page, but not initialized for the selects?
You apply selectmenu to every single select on your page.
tinymce uses selects and your surely don't want to change these.
Give your selects a class like
<select class="jquery_smenu"> ....
and change your selector:
$('select.jquery_smenu').selectmenu();
I can not test if thats the reason why tiny stops working, but you should change that.
I am trying to implement an autocompletion like Stack Overflow does for tag completion. however, I tried to view the source and its minified
I am trying to get features like letting the user add any tag, if it exists in the list then fine, or else add it to the database.
Are there examples out there that would show how to get something like this done? or can I somehow view the non minified version of the source?
I don't know exactly how to do it, but. .. .
if you look into this answer: jQueryUI: how can I custom-format the Autocomplete plug-in results?
you can see there's a way to fiddle with jQuery's rendering logic to change how the menu items appear. There's also an internal jQuery function called renderMenu that actually presents the choices.
I haven't tried this but I suppose that by opening up that black box, and either replacing or rejiggering renderMenu and its related functions, you'd be able to do what you want - render just one item, in the actual textbox.
That is where I would start, anyway.
EDIT
I looked into the autocomplete stuff again in jQuery UI. It seems pretty straightforward to replace the menu display logic by inserting a custom response() function.
Here's what I did:
// display the first item in the list of possible completions
var myResponse = function( items ) {
var itemToSuggest, p1, p2;
if (items.length === 0) {return;}
itemToSuggest = items[0];
this.element.val( itemToSuggest );
p1 = this.term.length;
p2 = itemToSuggest.length;
setSelectionRange(this.element[0], p1, p2);
};
var oldFn = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = myResponse;
Working example
You can look into jQuery UI Autocomplete.
The complete source code is available in their Git repository.
Probably something like Chosen would do the job nicely
http://harvesthq.github.com/chosen/
Use the autofocus of the jQuery UI Autocomplete. This should automatically focus on the first found item in the list.
Auto focus
I am trying to run some JQuery script on a particular page but only if a certain page loads.
The Scenario: We have one page that loads (i.e., webpage.aspx) and it loads different content based on the referring click. (i.e., webpage.aspx?contentId=1, webpage.aspx?contentId=2, webpage.aspx?contentId=3, etc). Here is my problem. I need to have a particular part of the page removed if only one specific contentId is pulled. I am trying to do this in JQuery and can't seem to figure it out.
Here's what i have been working with so far. I realize it's not correct but hopefully it gives you a starting point to work with.
Thanks.
CODE:
$(window).load(function() {
var $deleteNewRow = $("div.col.w140 tbody:first").find("td:first").parent().remove();
if($('#dealer-info h1').indexOf('Ferrari') != -1) {
$deleteNewRow
}
});
What you store in your $deleteNewRow variable isn't the jQuery method, that method will already execute. You want to do that method in your if statement, something like this (note that you are also missing the .text() in the if statement):
$(window).load(function() {
if($('#dealer-info h1').text().indexOf('Ferrari') != -1) {
$("div.col.w140 tbody:first").find("td:first").parent().remove();
}
});
You can use jQuery :contains selector to check for the existence. Here is the docs.
Then to delete find the element and then use remove.
$("div.col.w140 tbody:first").find("td:first").parent().remove();