Develop Reference

jQuery - check if DIV on external page exists, then if it does, load the DIV, otherwise load another

working on a custom weather page for a small ops dashboard. getweather#.php scrapes the weather information I want, and then index.php loads the specific elements on demand with jQuery.
so - I'm trying to get jQuery to check if specific DIV exists on external page, and if it does, then load it, but if it doesn't, load another DIV that always will exist
based on the other questions I've found here, I put together this code, thinking it would work:
<script>
$(function(){
if ($('getweather2.php?wx=1 #warning').is('*')) {
$('#wxwarning').load('getweather2.php?wx=1 #warning');
} else {
$('#wxwarning').load('getweather2.php?wx=1 #nowarning');
}
});
</script>
sadly, this does not appear to work, furthermore, it causes all other jQuery functions to fail.
I can't seem to find any examples or anything really to help me get this script to work.
thank you.

You have to actually get the data before you can check if elements exists or not.
You can't use load(), as it inserts the data directly, but it's just a shortcut for $.get, so you can use that instead, and check if the element exists, and if it does insert it, if not insert another element :
$.get('getweather2.php?wx=1', function(html) {
var el = $('<div />').append(html);
if ( el.find('#warning').length ) {
$('#wxwarning').html(el.find('#warning'));
}else{
$('#wxwarning').html(el.find('#nowarning'));
}
});

JQuery checkbox with options framework and wordpress

This is a jquery question, and since I am working with WordPress and options framework in the admin panel, I have to hide certain options with a checkbox. The problem is one of the elements is a dropdown menu and it seems that I cannot hide it at the beginning (meaning if I click twice the dropdown disappears as it should) although the code works for the text input. Here is the code:
jQuery('#telephone_hidden').click(function() {
if (jQuery('#telephone_hidden').attr('checked') ? true : false) {
jQuery('#section-telephone_dropdown_icons, #section-telephone_number_hidden').show();
} else {
jQuery('#section-telephone_dropdown_icons, #section-telephone_number_hidden').fadeToggle(400);
}
});
I am not very good with jQuery but I think that this should work, or at least there is a better way to do this.

An if statement with a ternary statement ... not going to work. Try this:
if (jQuery('#telephone_hidden').prop('checked')){
jQuery('#section-telephone_dropdown_icons, #section-telephone_number_hidden').show();
} else {
jQuery('#section-telephone_dropdown_icons, #section-telephone_number_hidden').fadeToggle(400);
}
The .prop('checked') returns a boolean, which I think is what you want to validate. Also, there really isn't a need to use jQuery if you properly set up your libraries to not conflict. You can consolidate it to:
if ($('#telephone_hidden').prop('checked')){
$('#section-telephone_dropdown_icons, #section-telephone_number_hidden').show();
} else {
$('#section-telephone_dropdown_icons, #section-telephone_number_hidden').fadeToggle(400);
}
This doesn't seem like much, but over an entire script file you reduce its size and therefore improve its performance. Depending on how big your file is, it can have a huge impact.
Also, noticed you were using the .click event for $('#telephone_hidden'), so rather than query the DOM again, try this:
var $tel = $('#section-telephone_dropdown_icons, #section-telephone_number_hidden');
$('#telephone_hidden').on('click',function() {
if ($(this).prop('checked')){
$tel.show();
} else {
$tel.fadeToggle(400);
}
});
The use of $(this) prevents needing to query the DOM for the selector again, and I cache the selector used for the show / fadeToggle, providing another performance boost.
I know this is a long answer, but I figured if I showed the step-by-step process of improvement you could learn and apply it to future jQuery endeavors.

Try .is()
if (jQuery('#telephone_hidden').is(':checked')) {
or .prop
if (jQuery('#telephone_hidden').prop('checked')){

You can use the is function in conjunction with the checked selector, like so:
if ($('#telephone_hidden').is(':checked')) {
// ... do something
}

jQuery breaks if function does not exists

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.

Getting started with jQuery -- hiding an element

Have you noticed that every 10 questions on this site is about jQuery?
Anyway...
I'm using jQuery for the first time. I don't know if I loaded it correctly. When I run this code:
<script type="text/javascript">
function allDayClicked() {
if (jQuery) alert("loaded");
var allday = document.getElementById("allDayEvent");
var start = document.getElementById("<%=startTimeSelector.ClientID%>");
$('allDayEvent').hide();
}
</script>
The alert appears, saying "loaded", but nothing else happens; the html checkbox doesn't go invisible. I get no kind of error in my javascript output.
Is it possible I haven't successfully loaded jQuery? I added a reference to it in my visual studio project and generated this by dragging it to default.aspx:
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
Otherwise, what's going on?

jQuery takes a css selector, not an id. If you want an id use the css form of declaring an id.
$('#allDayEvent').hide();

jQuery is loaded fine, you're just using it incorrectly. You should be doing either:
$('#allDayEvent') // recommended, the '#' means ID
Or:
$(allday) // since you already grabbed it with getElementById
jQuery can take a lot of different objects with $(). The options are listed here.

You are missing the # in your ID selector.
Change $('allDayEvent').hide();
to
$('#allDayEvent').hide();

Assuming that your checkbox has an id "allDayEvent", you just need the hash (#) in this line:
$('#allDayEvent').hide();

Javascript val() for selectbox not linking correctly

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).