0

I took a jquery select list from a friend but I need to change something and also ask about a problem. This is the entire page:

<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta name="keywords" content="" />
<meta name="description" content="" />

<script type="text/javascript">
$(document).ready(function() {  
$('.openSelect').change(function(){
    if ($(this).val()) {
            window.open($(this).val(), '_blank');
        }
      return false;
});
});
</script>
</head>

<body id="bo">

<br />
<br />

<table border="0" cellspacing="0" cellpadding="0">
<tr><td>

<div id="table">
<table class="sortable" border="0" cellspacing="0" cellpadding="0" width="790">
<tr id="head"><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td><td>col6</td><TD>col7</td>    <td>col8</td><td>col9</td><td>col10</td></tr>

<tr><td>col 1</td><td>col 2</td><td>col 3</td><td>
<form style="padding-bottom:5px; margin:0px">
<select class="openSelect" style="width:120px; color:#0066ff;">
<option value="#">Item 1
<option value="#">Data for Item 1
<option value="http://www.google.com/">Data for Item 1 from Google
<option value="http://www.yahoo.com/">Data for Item 1 from Yahoo
</select>
</form>
</td><td>col 5</td><td>col 6</td><td>col 7</td><td>col 8</td><td>col 9</td><td>col 10</td></tr>

<tr><td>col 1</td><td>col 2</td><td>col 3</td><td>
<form style="padding-bottom:5px; margin:0px">
<select class="openSelect" style="width:120px; color:#0066ff;">
<option value="#">Item 2
<option value="#">Data for Item 2
<option value="http://www.google.com/">Data for Item 2 from Google
<option value="http://www.yahoo.com/">Data for Item 2 from Yahoo
</select>
</form>
</td><td>col 5</td><td>col 6</td><td>col 7</td><td>col 8</td><td>col 9</td><td>col 10</td></tr>

<tr><td>col 1</td><td>col 2</td><td>col 3</td><td>
<form style="padding-bottom:5px; margin:0px">
<select class="openSelect" style="width:120px; color:#0066ff;">
<option value="#">Item 3
<option value="#">Data for Item 3
<option value="http://www.google.com/">Data for Item 3 from Google
<option value="http://www.yahoo.com/">Data for Item 23 from Yahoo
</select>
</form>
</td><td>col 5</td><td>col 6</td><td>col 7</td><td>col 8</td><td>col 9</td><td>col 10</td></tr>

</table>
</div>

</td></tr></table>

</body>
</html>

Problem
Script error “The value of the property ‘$’ is null or undefined, not a Function object” comes up when trying to preview the page in html kit. It works OK online so any idea why I get the script error?

Change needed
I want a new page to open when the last two options are chosen (Data for Item x from…) but do nothing, if possible not even reload the page, when options “Item x” and “Data for Item x” are chosen. I know the activation of “_blank” needs to change but I don’t know how to do it...

Thanks

user2089100
  • 1
  • 1
  • Change `//ajax.googleapis....` to `http://ajax.googleapis...` because script loads from local folder for fixing error with `$ is null` – Alex Feb 19 '13 at 23:51
  • About changes: you could check value for matching url pattern(contains http,http://www or something else), for instance: `if ($(this).val())` could be replaced with `if($(this).val().match(/http/))` – Alex Feb 20 '13 at 00:00
  • sorry for bothering again but links don't work in safari, all other major browsers OK.... any ideas?? – user2089100 Feb 20 '13 at 20:07
  • no problems, its safari problem: http://stackoverflow.com/questions/9880316/javascript-window-open-in-safari – Alex Feb 20 '13 at 21:20
  • thanks, I read the post you linked and I wanted to ask, is it worthwhile creating the alert one of the guys suggests? If yes, do you have a suggestion on how to add it in my script above? Thanks again!! – user2089100 Feb 20 '13 at 21:50

1 Answers1

0

thanks, I read the post you linked and I wanted to ask, is it worthwhile creating the alert one of the guys suggests? If yes, do you have a suggestion on how to add it in my script above? Thanks again!!

The simplest solution is adding alert popup with custom text after trying to open new tab as one of they guys suggests :

  $('.openSelect').change(function(){ 
      var selectedValue=$(this).val(); 
      if (selectedValue.match(/http/)) { 
           var open = window.open($(this).val(),'_blank'); 
           if (open == null || typeof(open)=='undefined'){ 
           alert("Turn off your pop-up blocker!\n\nWe try to open the following url:\n" + selectedValue); 
           }
     }
  });

But i dont like system popups and think more userfriendly will be customized popup section, for instance, jquery UI dialog

Alex
  • 329
  • 2
  • 17