Browsing the jQuery category

jQuery Ajax not getting value of textarea/dropdown

I have an inline editing page (with jQuery/Ajax) that I couldn’t get the NEW values of the HTML objects (textarea/dropdowns/etc).

The issue was, the “old” name of the DIV that had the component matched the NEW name of the component.

The solution: ensure the “new” component (that appears) has a NEW ID, not previously loaded in the DOM.

Read the article

Jquery AutoComplete doesn’t work when in Bootstrap modal

I was correctly getting the JSON data, but the autocomplete part (below the textbox) wasn’t appearing.

The trick is to increase the z-index of it:

<style type=”text/css”>

                                .ui-autocomplete {

                                                z-index: 5000;

                                }

                </style>

Read the article

jQuery date picker doesn’t work with multiple entries

A coworker had an HTML form/table that was displaying a textbox, with a jQuery date picker.  When a date was picked (say, in the 5th one), the first one was incorrectly being populated.

Solution: even though the JavaScript was specifying that the CLASS should be used, it was finding the ID. The textboxes were being displayed from a loop (from query results), so multiple textboxes had the same ID (which, shouldn’t be the case).  Once the ID was removed, it worked.

I wouldn’t have thought that having the ID would make it be incorrect… of course, this happened in Internet Explorer – other browsers may have rendered it correctly (?)

Read the article

Web Development for Intermediate Programmers – with PHP

I’ve written a ~300 page book on PHP!  While I do go over the basics, I go over “common” concepts of database manipulation and Ajax. I’ve also sprinkled in some User Interface and User Experience comments:

http://www.stevesohcot.com/php-book

Read the article

jQuery Ajax not working when passing in variables

My Ajax (from jQuery’s POST) was not working when I passed in multiple parameters.

One of the parameters I was trying to pass in was the value of a textbox; I was mistakenly passing in the “element” instead of calling the “.val()” property on it.

 

var photo_id = $(‘#photo_id’).val();
ajaxController,
{variable_one:1, photo_id: photo_id },
function(responseText){
console.log(responseText);
},
“html”
);

Read the article

javascript not reading value from bootstrap modal

I had a Bootstrap modal that was being used to change the value in a database.  When the user clicked “Save Changes” though, it wasn’t saving – the new values were “undefined”.

The solution: in the JavaScript function, I was getting the values AFTER the modal had closed.  First, get the values… THEN do what you have to do (and let the modal close).  My values were IN the modal, which had been removed from the screen (thus, undefined).

Read the article

Ajax works in Chrome but not in IE

I develop in Chrome, because of the Console/Inspector features (which are in other browser, but I prefer Chrome…).  My customers are forced to use IE.  When I went to demo my app, the Ajax didn’t work (of course!).

 

The issue was that I had forgotten to specify “cache: false” in the setup.  Apparently it’s not an issue for Chrome, but IE needs to be told this.

 

Just add this to your JavaScript:

 

$.ajaxSetup ({

                cache: false

});

 

I guess another lesson learned is, always test on the platform that your customers are using!

Read the article

jquery length not defined data element

I needed to count the number of elements with a particular HTML “data” attribute.  I was using jQuery’s “.length( )” function.

The problem was that I was including the “( )” – instead, just do:

$(‘[data-foo = bar]’).length

Read the article

jquery reference label based on for

I have a form that I wanted to apply a JavaScript validation.

The form Labels are hidden (using Bootstrap’s “sr-only” class). I wanted to use HTML5 data attributes to detect if a field was blank, then add a class.

HTML:

<div class=”input-group input-group-lg form-group”>
<label for=”email” class=”sr-only”>Email</label>
<input type=”text” name=”email” id=”email”
class=”form-control input-lg” placeholder=”Email” data-required=”true” />
</div>

JavaScript/jQuery:

function ValidateLogin() {

$(‘#error_general’).hide();

var OkToProceed = true;

var requiredFields = $(‘[data-required = true]’);
requiredFields.each(function(){

if ( $(this).val() == “”) {
OkToProceed = false;

$(“label[for='” + $(this).attr(‘id’) + “‘]”)
.removeClass(‘sr-only’)
.addClass(“alert_required”);
}
});

if (OkToProceed == true) {
return true;
} else{
$(‘#error_general’).show();
return false;
}

}

… and just put that in a function such that the onSubmit() of the form returns that function.

 

 

Read the article

Unobtrusive javascript

Lately I’ve been using HTML 5’s “data” attribute to hook into elements.  I used to always use IDs and Classes, but was told that those are reserved more for CSS.  And this makes sense.  So now instead I’m trying to use the “data” attribute.  For example, this code finds all textboxes with a certain data attribute/value and ensures it is lowercase (I was using this for a user signup/sign in form).

Read the article