0

Am trying to implement readmore button within a data retrieved from sqlite database via javascript/jquery append() functions but the read more button is not showing as in the code below

function showRecords() // Function For Retrive data from Database Display records as list
{
    $("#results").html('')
    var linkeditdelete = '<div class="well"><p class="text_readmore"> hello hello Hi! Introducing myself . I am an arena where people can visit by typing from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. Coming to me is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The inner passion to teach people has provoked him to introduce me to this world to fulfil his desire. Thanks a lot !!!</p></div>';
    $("#results").append(linkeditdelete);
}

but if I take the read more text result outside the SQLite return queries it will work fine as in the case below

</body>
   <p class="text_readmore">Hi! Introducing myself. I am an arena where people from anywhere in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My SQL, Html5, Javascript and PHP. Coming to is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The inner passion to teach people has provoked him to introduce me to this world to fulfil his desire. Thanks a lot !!!</p>
</body>

it seems that Jquery that is used to retrieve data from SQLite database is conflicting with the jquery functions used to perform read more text operations. can someone help me fix that

For testing SQLite database works on Google Chrome and higher version of Opera and Safari but not on Mozilla

below is the entire code

<!DOCTYPE html PUBLIC>

<html>

<head>

  <title>Offline Database</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script>
    $(document).ready(function() {
      function breakWords(paragraph, showtext) {
        var words = paragraph.split(' ');
        var newText = '';

        for (i = 0; i < words.length; i++) {
          if (i <= showtext) {
            newText += words[i] + ' ';

          } else {

            if (i == (showtext + 1)) newText += '... <span class="fulltext hide">';

            newText += words[i] + ' ';

            if (words[i + 1] == null) newText += '</span><a href="#" class="links"> &raquo; read more</a>';

          }

        }
        return newText;
      }

      $('.text_readmore').each(function() {

        $(this).html(breakWords($(this).html(), 50));

        $(this).children('span').hide();

      }).click(function() {
        var fulltext = $(this).children('span.fulltext');
        var links = $(this).children('a.links');

        if (fulltext.hasClass('hide')) {

          fulltext.show(200);
          links.html(' &raquo; hide');
          fulltext.removeClass('hide');

        } else {

          fulltext.fadeOut(100);
          links.html(' &laquo; read more');
          fulltext.addClass('hide');

        }
        return false;
      });
    });
  </script>

  <body>
    <div id="results"></div>
  </body>
  <p class="text_readmore">Hi! Introducing myself. I am an arena where people from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. Coming to is a web designer and a developer who has got vast experience
    in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</p>

  <script>
    //  Declare SQL Query for SQLite
    var createStatement = "CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT)";
    var db = openDatabase("AddressBook", "1.0", "Address Book", 200000); // Open SQLite Database

    function initDatabase() // Function Call When Page is ready.
    {
      createTable();
    }

    function createTable() // Function for Create Table in SQLite.
    {
      db.transaction(function(tx) {
        tx.executeSql(createStatement, [], showRecords);
      });
    }

    function showRecords() // Function For Retrive data from Database Display records as list
    {
      $("#results").html('')

      var linkeditdelete = '<div class="well"><p class="text_readmore"> hello hello Hi! Introducing myself . I am an arena where people can visit by typing from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. Coming to me is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</p></div>';

      $("#results").append(linkeditdelete);
    }

    $(document).ready(function() // Call function when page is ready for load..
      {

        $("body").fadeIn(2000); // Fede In Effect when Page Load..
        initDatabase();

      });
  </script>



</html>

Improve this question
1

1 Answer 1

Reset to default
1

Problem is you have called function $('.text_readmore').each(function () { before adding the data in <p>. 

<!DOCTYPE html PUBLIC>
<html>
<head>
    <title>Offline Database</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <body>
        <div id="results"></div>
        <p class="text_readmore">Hi! Introducing myself. I am an arena where people from any where in the world. The purpose of my birth is to give
            solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. Coming to is a web designer and a developer
            who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and
            high performing enterprise web applications. The innet passion to teach people has provoked him to introduce
            me to this world to fulfill his desire. Thanks a lot !!!</p>
    </body>
    <script>
        //  Declare SQL Query for SQLite


        var createStatement =
            "CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT)";
        var db = openDatabase("AddressBook", "1.0", "Address Book", 200000); // Open SQLite Database

        function initDatabase() // Function Call When Page is ready.
        {
            createTable();
        }

        function createTable() // Function for Create Table in SQLite.
        {
            db.transaction(function (tx) {
                tx.executeSql(createStatement, [], showRecords);
                callSplitText();
            });
        }

        function showRecords() // Function For Retrive data from Database Display records as list
        {
            $("#results").html('')

            var linkeditdelete =
                '<div class="well"><p class="text_readmore"> hello hello Hi! Introducing myself . I am an arena where people can visit by typing from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. Coming to me is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</p></div>';

            $("#results").append(linkeditdelete);
        }

        $(document).ready(function () // Call function when page is ready for load..
            {
                $("body").fadeIn(2000); // Fede In Effect when Page Load..
                initDatabase();
            });
    </script>
    <script>
        $(document).ready(function () {
            function breakWords(paragraph, showtext) {
                var words = paragraph.split(' ');
                var newText = '';
                for (i = 0; i < words.length; i++) {
                    if (i <= showtext) {
                        newText += words[i] + ' ';
                    } else {
                        if (i == (showtext + 1)) newText += '... <span class="fulltext hide">';
                        newText += words[i] + ' ';
                        if (words[i + 1] == null) newText +=
                            '</span><a href="#" class="links"> &raquo; read more</a>';
                    }
                }
                return newText;
            }

            function callSplitText() {
                $(this).html(breakWords($(this).html(), 50));
                $(this).children('span').hide();
            }

            $('.text_readmore').each(callSplitText).click(function () {
                var fulltext = $(this).children('span.fulltext');
                var links = $(this).children('a.links');
                if (fulltext.hasClass('hide')) {

                    fulltext.show(200);
                    links.html(' &raquo; hide');
                    fulltext.removeClass('hide');

                } else {

                    fulltext.fadeOut(100);
                    links.html(' &laquo; read more');
                    fulltext.addClass('hide');

                }
                return false;
            });
        });
    </script>
</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Your code is the same as mine. The one in the body is working and is just used for illustrations, but the one in the sqlite query is not and that is where am having an issue. again your updated script is longer showing text within the sqlite pre queries as I have posted above between thanks for your responses so far
You have to call your text split function after SQLite inserts the text. I cannot check my script because i don't have SQLite setup.
You don't need an sqlite setup. Its html5 offline storage. It will run on chrome browser without any setup
working now by calling the split function after the sqlite display functions. Thanks alot. you have made my day. God Bless uuuuuuuu

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.