jQuery Forum

I have an html select element that, based on a value set elsewhere, is supposed to show one of two pairs of value. In one case, it should be "New" and "Assumed", and in the other "Existing" and "Organic Growth"

So currently I'm creating it with all of them, like so:

But I want to only show two of these values at a time, based on the value of the Boolean IsNewBusiness, which is previously set with VBScript

Assuming that I know the value of IsNewBusiness, how can I specify which pair of items in the html select are visible?

I have this html:

Which sets "datepickerTo" to the last Saturday (this is based on today's date of Thursday, 9/15) and "datepickerFrom" to the Sunday before that.

This is manually added, though; I want to do it programmatically, in jQuery, something like:

I think this should work, but I don't know what to put in the functions:

I have this jQuery to respond to a button being clicked and call an AJAX method:

It is not just that the REST method is not getting called - this handler is apparently not firing at all, as I see no alerts (neither "The button was clicked." nor "hey, boo-boo!").

The script *is* being added - I can step through it, and the vars (such as "unitval") *are* being assigned the appropriate values.

So why does clicking the button, which is declared like so:

...do nothing?

I want to append some html to an element; so far my failure is so catastrophic as to make Napoleon's battle at Waterloo seem like a roaring success by comparison. Before adding it to actual code, I tried fiddling around first with these variations on the theme, based on what I got from here, but it's not working. What am I missing/doing wrong?

The HTML from the fiddle is:

The Javascript from the fiddle is:

I'm passing html from my server Controller method back to the Ajax call, but it's not displaying as html. This is the client code:

This is what I see:

What do I need to do to "alert(retval);" to get it to format the string as html?

Using the idea here as a "proof-of-concept" before replacing the html with my own, I added that html to my Index.cshtml file (ASP.NET MVC app):

...and this jQuery in the Scripts section of that file to open that div (the previous plain-vanilla alert is shown commented out):

BTW, the button whose click is being handled is:

However, there are two problems:

First, the "dialog" html I've added is not hidden - it displays at the bottom of the page. How can I hide it until the button is clicked?

Second, when I click #btnAddlEmail, it doesn't open a dialog next to the button, which is what I would hope, but simply "focuses" that div by paging down to it. How can I get that div to act like a dialog?

Note: I have done (presumably, anyway) what is necessary to make jQuery UI work in my project, following the steps here as discussed here.

Here is a scream shot of what it looks like ("+ Add Another Email" is what I click to show the dialog, which is laying lazily at the bottom):

I have an adjunct dialog for my page that I invoke when I need to let the user add additional (more than three) email addresses:

...and this code that should handle the button on the dialog being clicked:

...but my breakpoint within it is never reached. Why not, and how can I fix this?

I had this function:

...which turned out to be problematic when any of the values referenced were null. So I came up with this:

This seems kind of white-glovish or even paranoid to me; is there a less obtrusive/verbose way of checking values for null than explicitly checking them all like this?

I've got this code:

...which throws this error (as seen in the Chrome Dev Tools console) when the value is, indeed, null:

So how can I check for null in a way that I can avoid the error?

Based on a suggestion here, I even tried this:

...but I still get the same whinging from the guts of the browser.

Code in greater context:

So how can I safely check for null?

I'm hitting the "error" part of this ajax call, seeing "'error in btnTestProduceUsageSettings'":

JSLint doesn't find anything really wrong with it (beyond its usual nitpickiness). At least one of 

the params is always null. I wondered it that was the problem, but I tried this, just to make sure the null values were not causing the problem:

...and it still failed.

The Controller method that is supposed to be called isn't being reached at all because of the failure. It is defined:

So stepping through the code, with a breakpoint in Chrom Dev Tools, I reach the "$.ajax({" line, but not the breakpoint in the Controller method (in Visual Studio), which has one on the last line shown below:

I have other ajax/controller combinations designed the same way that work fine, so I can't see what the hangup is here...am I missing an either obvious or well-concealed problem here?

I've got this function, which *is* getting called:

...but, although data is returned (length is > 0), checkConfiguredReports() is not getting called. A 

breakpoint there:

...is never reached. I tried changing the for loop from this:

...to this:

...because the (CE) Controller method looks like this:

...but it's still not reached. Why not?

I adapted the following code from here:

HTML:

Javascript:

...but it's not working; I thought maybe it was some unrelated problem that was causing it not to work, but 

even this simplistic fiddle doesn't prompt when the button is clicked:

What am I doing wrong in my Javascript?

I need to select values from some html select elements based on what is passed back from an AJAX call. The data is being retrieved, but I can't seem to access the data so as to use it to set the html select elements to the appropriate value.

This is the html that describes the html selects that need to be manipulated:

...and here is the jQuery in question:

The second block of code in populategeneratevals() has no effect. I tried three different ways of accessing the "generatedata" data, but none of them changes the selected value of the "dayofmonthselect" element to what I want it to be - it DOES change it from a pre-selected value to nothing, though (changes from "1st" to nothing).

As mentioned, there *is* data; I can see this when stepping through it in ChromeDevTools:

So you can see "DayOfMonth" does have a value (5) in the case I'm testing. How can I extract the value that is there and use it to set the html-select val?

  [1]: http://i.stack.imgur.com/M3cqw.png

I've had nothing but trouble trying to download a file using simple HTML5, as is evidenced here on StackOverflow

It "sort of" works, but it seems unable or unwilling to identify the "App_Data" folder and its contents.

So, as I wonder aloud in Update 10 on that mega-post:

Is jQuery capable of downloading a file from a Web API app's App_Data folder to a user's file system from a web page? If the answer is "yes" do any of you have an example of how?

2. $('#btnStraightforward').click(function() {
3.     alert('you mashed the straightforward button');
4. });
5. 
   
6. $( "#btnOn" ).on( "click", function() {
7.   alert('you mashed the on click button');
8. });

I have an HTML table here that, in the first column of "Shift Details" in the "shift 1" section, has a "Hide N" select element:

1.           <TR>
             <TD align="center" valign="middle" rowspan="30">
               some date
             </TD>
             <TD align="center" valign="middle" rowspan="10">
               shift 1
             </TD>
             <TD align="center" valign="middle" >
                 <label>Hide </label>
               <select id="hideselector">
                   <option>1</option>
                   <option>2</option>
                   <option>3</option>
                   <option>4</option>
                   <option>5</option>
                   <option>6</option>
                   <option>7</option>
                   <option>8</option>
                   <option>9</option>
                 </select>
             </TD>

Based on which option is selected, my jQuery hides labels below it, which are defined this way:

1.           <TD align="center" valign="middle" >
                 <label id="jl1">job Loc 1</label>
             </TD>

The quasi-Hobbesian jQuery is nasty and brutish, but unfortunately not short:

1. $('#hideselector').change(function () {
   
   
       $('#jl1').removeClass('hide');
       $('#jl2').removeClass('hide');
       $('#jl3').removeClass('hide');
       $('#jl4').removeClass('hide');
       $('#jl5').removeClass('hide');
       $('#jl6').removeClass('hide');
       $('#jl7').removeClass('hide');
       $('#jl8').removeClass('hide');
       $('#jl9').removeClass('hide');
   
   
       var hidecount = $('#hideselector').val();
       if (hidecount > 0) {
           $('#jl1').addClass('hide');
       }
       if (hidecount > 1) {
           $('#jl2').addClass('hide');
       }
       if (hidecount > 2) {
           $('#jl3').addClass('hide');
       }
       if (hidecount > 3) {
           $('#jl4').addClass('hide');
       }
       if (hidecount > 4) {
           $('#jl5').addClass('hide');
       }
       if (hidecount > 5) {
           $('#jl6').addClass('hide');
       }
       if (hidecount > 6) {
           $('#jl7').addClass('hide');
       }
       if (hidecount > 7) {
           $('#jl8').addClass('hide');
       }
       if (hidecount > 8) {
           $('#jl9').addClass('hide');
       }
   
   
   });

It works, but I'm hoping there's a more concise/terse way of accomplishing the same thing, especially since I will ultimately need 84 very similar blocks of code (7 days X 3 Shifts X 4 Job Locations per shift).

Does adding a CSS class programatically via  add multiple if it already exists? IOW, with code like this:

1.   'change #date1Shift1JobLoc1Count': function(event) {
       var d1s1jl1Count = $('date1Shift1JobLoc1Count').val();
       if (d1s1jl1Count > 1) {
         $('date1Shift1Worker5').removeClass('hide');
       } else {
         $('date1Shift1Worker5').addClass('hide');
       }
     }

..if date1Shift1Worker5 already had the class 'hide' applied to it, would an additional 'hide' be added and, if so, is that a problem other than maxifying the CSS?

I'm using this code to try to retrieve the value of a select element (which contains 1..10):

1.       'change #date1Shift1JobLoc1Count': function(event) {
           var d1s1jl1Count = $('date1Shift1JobLoc1Count').val();
           if (d1s1jl1Count > 1) {
             $('date1Shift1Worker5').removeClass('hide');
           } else {
             $('date1Shift1Worker5').addClass('hide');
           }
         }

...but, after selecting the "2" option, the value of d1s1jl1Count is 'undefined'.

Why?

I want to respond to a right-click via checking "event.button == 2" like so:

1. "mousedown #imgPostTravelBottom": function (event) {
        if (event.button == 2) {
          $( "#dialog" ).removeClass('hide');
          $( "#dialog" ).dialog();
        }
     },

...but although it works (the dialog displays - in the middle of the page), so does the browser's element-specific context menu; for example, when right-clicking on an img, the browser invokes a context menu which displays menu items such as "Save image as..." etc.

Can I suppress the displaying of that context menu?

1. $( "#dialog" ).dialog();

I had this code, which added inputted vals and put them in a "totals" box:

1. 'change .payments': function(event) {
         var paymentTot = $('#paymenttotal').val();
         paymentTot = parseInt(paymentTot) || 0;
         var targetVal = $(event.target).val();
         targetVal = parseInt(targetVal);
         paymentTot = paymentTot + targetVal;
         $('#paymenttotal').val(paymentTot);
       },
2. 
   

...but then I realized I wanted "dollar amounts" and interspersed what I hoped would convert the vals to floats (I naively though that if one entered "2" it would get converted to "2.00", etc.)

1. 'change .payments': function(event) {
         var paymentTot = $('#paymenttotal').val();
         paymentTot = parseInt(paymentTot) || 0;
         var paymentTotFloat = parseFloat(paymentTot);
         var targetVal = $(event.target).val();
         targetVal = parseInt(targetVal);
         var targetValFloat = parseFloat(targetVal);
         paymentTot = paymentTot + targetVal;
         paymentTotFloat = paymentTotFloat + targetValFloat;
         $('#paymenttotal').val(paymentTotFloat);
       },

(The old int code is still there, as you can see, but once the float code works, I'll remove it).

Why does it not work, and what is needed to get the vals to convert from raw ints to "dollar amounts"?

I have several input type="number" elements which, when they change, should update a "total" element of the same type. I gave all the input elements which should contribute to the total the class "payments" like so:

1. <input class="payments" type="number" step="0.01" min="0" id="airfare" />
2. . . .
3. <input type="number" step="0.01" min="0" id="paymenttotal" />

...and then thought I could respond to a change in any element with this class like so:

1.     'change .payments' : function(event){
            var paymentTot = $('#paymenttotal').val();
            paymentTot = paymentTot + this.val();
            $('#paymenttotal').val(paymentTot);
         }

It may look a little "weird" because it is in a Meteor template method, but it works as far as responding when it should. That is to say, this:

1. 'change .payments' : function(event){
       console.log('something changed');
   }

...caused that log entry to be made every time I changed the value in any of the elements of that class. However, the code where I tried to get the val from whichever element was being responded to in that handler (I guessed -- wrongly, I reckon -- that I could refer to it as "this"), fails. It gives me "Uncaught TypeError: this.val is .... not a function"

How can I refer to whichever input is invoking the change event?

I have a selection element:

1.             <select id="selvisatype" title="Please select a visa type">
                   <option value="pleaseselect">Please Select</option>
                   <option value="notapplicable">Not Applicable</option>
                   <option value="a1">A-1</option>
                   <option value="a2">A-2</option>
                   <option value="b1">B-1</option>
                   . . .
               </select>

I want to retrieve the value the user has selected (or "Please Select" if they've not selected anything). I tried this:

1.        if ($('#visitor').is(':checked')) {
            console.log('visitor is checked');
            var visaselection = $('#selvisatype').val();
            console.log('visaselection is ' + visaselection);
          }

...and, after checking the "visitor" radio button, the console says "visitor is checked" then "visaselection is undefined"

This happens whether I leave selvisatype alone or make a selection from it. It also happens with this code:

1. var visaselection =  $('select[name="selvisatype"]').val() 

With this code, OTOH:

1. var visaselection =  $("#visaselection option:selected").text();

...it simply says, "visaselection is " (blank)

I've got this code to, in response to a selection from a select element, populate a second select element (with "placeholder" vals for now):

1. $(document).on("change", '[id$=ddlPaymentType1]', function () {
       var selects = [{ "1": [
                           ["value 1", "text 1"],
                           ["value 2", "text 2"]
                         ]
       },
                  { "2": [
                           ["value 1", "text 1"],
                           ["value 2", "text 2"]
                         ]
                  },
       /* Rest of your values here */
   ];
       var options = selects[$(this).val()];
   
   
       var $select = $('[id$=ddlAccount1]');
       $select.children().remove();
   
   
       //options.forEach(function (item) {
       $.each(options, function(item) {
           $select.append($("<option />").val(item[0]).text(item[1]));
       });
   });

The problem is (besides that it doesn't work) is that it makes browsers grumpy. When I run it in IE8, it says, when I select an item from the first select element (ddlPaymentType1):

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3)

Timestamp: Fri, 7 Aug 2015 18:24:55 UTC

Message: Script error

Line: 0

Char: 0

Code: 0

URI: https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

...IOW, IE basically throws up its hands and says, "Beats me what the problem is! I'll just say it's bad from the git-go!" 

Chrome, predictably, is more helpful, and tells me:

Uncaught TypeError: Cannot read property 'length' of undefinedm.extend.each @ jquery.min.js:2(anonymous function) @ FinAff_Demo_Page_Clay.aspx:1374m.event.dispatch @ jquery.min.js:3m.event.add.r.handle @ jquery.min.js:3

Line 1374 is:

1. $.each(options, function(item) {

How do I mend this broken jQuery function?

I have 5 rows that each have an identical selection element (or dropDownList) in the first cell of each row. Choosing a value from that populates the values in another selection element.

How can I populate the selection items, and in a way that is less verbose than the "brute force" approach here:

1.     $(document).on("change", '[id$=ddlPaymentType1]', function () {
           var value = $(this).val();
           if (value == '1') {
               $('[id$=ddlAccount1]').text("Replace this with the values for selection 1");
           }
           else if (value == '2') {{
               $('[id$=ddlAccount1]').text("Replace this with the values for selection 2");
           }
           else if (value == '3') {{
               $('[id$=ddlAccount1]').text("Replace this with the values for selection 3");
           }
           else if (value == '4') {{
               $('[id$=ddlAccount1]').text("Replace this with the values for selection 4");
           }
           else if (value == '5') {{
               $('[id$=ddlAccount1]').text("Replace this with the values for selection 5");
           }
           else if (value == '6') {{
               $('[id$=ddlAccount1]').text("Replace this with the values for selection 6");
           }
           /* TODO: Add the rest (not value=11, as that is the "VENDORS" category item (not a real selection in itself)) */
       });

With the above, I would have to respond to about 20 different values (only six are shown), and I would have to code five identical-except-for-the-ID-arg and val functions. IOW, I would also need 

1.     $(document).on("change", '[id$=ddlPaymentType2]', function () {
        . . .
       });

...etc (up through ddlPaymentType5).

What is a better way to accomplish this?