CODEWITHSUNDEEP
javascriptjquerycsscapitalize
Mael Landrin
Mael Landrin

Reputation: 123

Capitalize function doesn't work in jQuery

I have a website ( in WordPress ) that uses jQuery to display content ( itself " calculated " in the functions.php ). Basically the content that needs to be displayed based on user criterias is loaded with PHP, and displayed with jQuery.

The thing is the text is displayed in upper case, which doesn't match the design psd. I tried many functions that I found on StackOverflow, but they always made the text capitalize when the user types the data, while I need to capitalize text that is loaded in upper case, and that I need to convert to capitalized.

Here's the code I tried :

$.fn.capitalize = function () {
    $.each(this, function () {
        var caps = this.value;
        caps = caps.charAt(0).toUpperCase() + caps.slice(1);
        this.value = caps;
    });
    return this;
};

$.each( tbllPosts, function( key, value ) {
    $('.results').prepend('<div class="col-6"><col="row">'+
                '<a href="'+wp.url+'" class="text-center"><h3 class="title">'+value.titre+'</h3></a>'+
                '</div>'+
                '</div>');
    $('.title').capitalize();
});

The content is displayed, what doesn't work is the capitalization. Any help is appreciated, thanks !

Just checked, I have this error :

Uncaught TypeError: Cannot read property 'charAt' of undefined

Upvotes: 3

Views: 2113

Answers (2)

gavgrif
gavgrif

Reputation: 15509

I would approach it differently and instead of trying to update the text after its inserted - I would pass the titre through the capitlization function as a straight javascript function.

Its difficult since I don't know the data structure you are working with, but I have dodgied something up to pass the value to the function as it is being prepended to the results div. I also provided a few strings that have different capitalization to show the returned values are correctly capitlized.

var tbllPosts = [
  {url: "url1", titre: "sample string 1"},
  {url: "url2", titre: "sample String 2"},
  {url: "url3", titre: "SAMPLE STRING 3"}
];


tbllPosts.forEach(function(post){
    $('.results').prepend('<div class="col-6"><col="row"><a href="'+post.url+'" class="text-center"><h3 class="title">'+ capitalize(post.titre)+'</h3></a></div></div>');
});

function capitalize (str) {
  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results"></div>

Note that if you want to capitalise the first letter of each word in the string - simply split the string at the space " " and pass each word through the function.

var tbllPosts2 = [
      {url: "url1", titre: "sample string 1"},
      {url: "url2", titre: "sample String 2"},
      {url: "url3", titre: "SAMPLE STRING 3"}
    ];


    tbllPosts2.forEach(function(post){
        $('.results2').prepend('<div class="col-6"><col="row"><a href="'+post.url+'" class="text-center"><h3 class="title">'+ titleCase(post.titre)+'</h3></a></div></div>');
    });


function titleCase(str) {
 var strArr = str. split(' ');
 var newStrArr=[];
 strArr.forEach(function(word){
  newStrArr.push(capitalize(word))
})

return newStrArr.join(' ');
}
 


function capitalize (str) {
   return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
    };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results2"></div>

Upvotes: 1

Mihai T
Mihai T

Reputation: 17697

The .val() method is primarily used to get the values of form elements such as input, select and textarea

You should use text() in your case.

Also, you do not send any arguments to your function. That's why it returns undefined.

I simplified your code ( since you didn't share any html ) so i can make a working example.

I also used trim() to remove the white space from the beginning of the text so that charAt(0) will return the first letter not a white-space.

Check below

$.fn.capitalize = function(t) {

  $.each(t, function() {
    let caps = t.text().trim();
    caps = caps.charAt(0).toUpperCase() + caps.slice(1);
    t.text(caps)
  });
  return this;
};


const title = $('.title')
$.fn.capitalize(title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="title">
  capitalize me
</p>

P.S. what do you mean by Well, the CSS property text-transform: capitalize; doesn't work, ? it doesn't get applied ? have you check the dev inspector ?

Upvotes: 2

Related Questions