We Keep Coding

Can't get tooltip to go away

In a form, I have a State dropdown and a Zip Code text box. The client has specified they want to check to be sure the zip code matches the state, and if not, to pop up a message and prevent the form from being submitted.
After either the zip or the state is changed, I call an ajax function on the server to make sure the zip code is inside the state. If not, I pop up a tooltip over the zip code check box that says "Zip Code Not In Selected State". So that the tooltip doesn't appear unless there is a mismatch, I don't add it until/unless the zip doesn't match the state. That all works well.
Then, if the zip code changes, and it matches, I want to get rid of the tooltip. This is the part I can't get working. No matter what I try, that pesky tooltip sticks around, even after the zip matches the state.
Here's the client side method:
function CheckZip() {
var zip = $("#ZipCode").val();
var zipLength = zip.length;
var state = $("#StateCode").val();
if (zipLength === 5) {
$.getJSON("/Home/CheckZip", { zipCode: zip, stateCode: state },
function (data) {
if (data == "true") {
$('#ZipCode').tooltip('disable');
$('#ZipCode').tooltip().mouseover();
}
if (data == "false") {
$('#ZipCode').attr('data-toggle', 'tooltip');
$('#ZipCode').attr('data-placement', 'top');
$('#ZipCode').attr('title', 'Zip code not in selected state.');
$('#ZipCode').tooltip().mouseover();
DisableSubmitButton();
}
if (data == "error") {
// todo
}
});
}
else {
DisableSubmitButton();
}
}
This doesn't seem to be the right combination to make the tooltip go away.
$('#ZipCode').tooltip('disable');
$('#ZipCode').tooltip().mouseover();
I've also tried just removing all the attributes, opposite of what's done in if (data == "false"). That didn't work either.
Any ideas?

Try this once :
$("#ZipCode").off('mouseover',rf);

As I asked you in the comments if you were using bootstrap, I have an anwer for you. To hide the tooltip you must change disable to hide. Also you have to remove the line below the hide event, like this:
if (data == "true") {
$('#ZipCode').tooltip('hide');
}
Documentation for bootstrap tooltips can be found here
I hope this will help!

What I ended up doing was just creating my own div which, using CSS, hovers just over the Zip textbox. I can hide it and show it whenever I want. This works perfectly. Found a thread here on Stack Overflow that showed me how to do the css:
Relatively position an element without it taking up space in document flow

JQuery JavaScript, reload page before changePage, doesn't work as expected

I'm trying to force an update of my jQuery page before I want to change the page.
Code looks like this:
function popupOrRedirect2() {
location.reload();
var content = document.getElementById('invisibleDiv').innerHTML;
if (content > 0) {
$.mobile.changePage("http://localhost:8080/application/test");
} else {
$("#popupDialog4").popup("open");
}
}
I need to read a value from a hidden div, but the div gets updated only after the page is getting reloaded. I must ensure to have the latest value.
The problem is, it doesn't work. If I remove the location.reload() it works... but it doesn't have the newest value.
Any hint on how to achieve the behavior that I want?
I'm using jQuery mobile 1.8.3.

A quick and dirty way might be to use URL params to determine whether to reload.
Instead of:
location.reload()
you could do:
if (location.search !== '?reloaded=1') {
location.search = "reloaded=1"; //triggers a reload once
}

Change element from main page

On my https://getsatisfaction.com/gsfnmichelle/products page, there's a bread crumb trail that says "Products." I'm trying to change that to "Categories." I can get it to do that within the inspector, but when I put the code in the customization script (which is only the main page /gsfnmichelle on the platform I'm using), it doesn't work.
Even though I was able to get the correct element (jQuery('.crumb_link span');) and change it using ( jQuery('.crumb_link span').text('Categories');), I can't figure out how to change it when it's within another page (/products) besides the main one (/gsfnmichelle), since it's the only place where we can insert customization code.
I thought something like this would check for the page and change that element, but it doesn't work:
jQuery(document).ready(function () {
if (window.location.pathname =="/gsfnmichelle/products") {
jQuery('.crumb_link span').text('Categories');}
};
Then I tried to use an if statement to check for the right element, but that doesn't work either:
jQuery(document).ready(function () {
if (jQuery('.crumb_link span').text =='Products') {
jQuery('.crumb_link span').text('Categories');}
};
What am I missing?

You probably want to use either if (jQuery('.crumb_link span').text() == "Products") or jQuery('.crumb_link span:contains(Products)').text('Categories').
Your current condition will never be true.

Initialize media player only if query string parameter is present

I have a SharePoint page that has a hyperlink which points to a video clip. Clicking on the link will play the video in an overlay window (uses Silverlight). If Silverlight runtime is not present, it displays the "install Silverlight" prompt. When the page is invoked with a IsDlg=1 query string, the hyperlink is hidden (it is in the left navigation bar), and only the main content page is shown. But I still get the "install Silverlight" prompt. I want to get rid of the prompt when IsDlg=1 is present.
Below is the relevant javascript code on the page. I've modified it slightly to initialize the media player only if IsDlg=1 is not present. But it is not working as expected. Any ideas?
// original code
$(function () {
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
});
// modified code
$(function () {
var field = 'IsDlg';
var url = window.location.href;
if (url.indexOf('?' + field + '=') != -1) {
} else {
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
}
});

As long as the HTML which embeds the Silverlight control is present, it will show the "Install Silverlight" dialog. If you don't want the dialog to show, you'll have to change the HTML source. You could add JavaScript code to add the HTML dynamically, so that it only shows when necessary. That answer would depend on how you're currently embedding the Silverlight control.
EDIT: You could try code like this:
$(function () {
if (window.location.search.indexOf('IsDlg=1') === -1) {
$.getScript('/_layouts/mediaplayer.js', function () {
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
});
}
});

Your code should work, so you probably want to debug for other possible issues.
$(document).ready(function () { // add explicit wait until dom ready
console.log(window.location.search); // just to check that the parameter is present
if(window.location.search.indexOf("IsDlg=1") < 0){ // testing the query string part only
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
}
});
Try that and see how you get on.

Google related bar - how to keep from showing up on my website

A new "google related" bar shows up at the bottom of my website. It displays links to my competitors and other things like maps, etc. It is tied in with users using the google toolbar. If anyone has any ideas on how I can disable from displaying on my web side I would sure appreciate it.

Taken from http://harrybailey.com/2011/08/hide-google-related-bar-on-your-website-with-css/
Google inserts an iframe into your html with the class .grelated-iframe
So hiding it is as simple as including the following css:
iframe.grelated-iframe {
display: none;
}

Google removed div and frame names and put everything to important so original answer no longer works on my site. We need to wait for the iframe to be created and then hide it by classname. Couldn't get .delay to work, but this does...today anyway.
$(document).ready(function() {
setTimeout(function(){
$(‘.notranslate’).hide();},1000);
});

Following javascript code tries to find the google related iframe as soon as the window finishes loading. If found, it is made hidden, else an interval of one second is initialized, which checks for the specified iframe and makes it hidden as soon as it is found on page.
$(window).load(function (){
var giframe = null;
var giframecnt = 0;
var giframetmr = -1;
giframe = $("body > iframe.notranslate")[0];
if(giframe != null)
$(giframe).css("display", "none");
else
giframetmr = setInterval(function(){
giframe = $("body > iframe.notranslate")[0];
if(giframe != null) {
clearInterval(giframetmr);
$(giframe).css("display", "none");
} else if(giframecnt >= 20)
clearInterval(giframetmr);
else
giframecnt++;
}, 1000);});

Find the parent DIV element that contains the stuff in the bar. If it has an id or name attribute, and you can control the page CSS then simply add a rule for the element, i.e. if you see something like
<div id="footer-bar-div".....
then add a CSS rule
#footer-bar-div {display:none ! important}
This will not work if the bar is inside an iframe element, but even in that case you should be able to hide it using javascript, but you will need to find the name/id of the frame, i.e.:
var badFrame = document.getElementById('badFrameId').contentWindow;
badFrame.getElementById('footer-bar-div').style.display='none';
if the frame has a name, then instead you should access it with:
var badFrame = window.frames['badFrameName']
There is also a chance that the bar is generated on-the-fly using javascript. If it is added to the end of the page you can simply add a <noscript> tag at the end of your content - this will prevent the javascript from executing. This is an old trick so it might not always work.