javascript, ajax - Update an HTML page by API call via ajax

Question

Similar Issue

This post is similar to what I wanted, but not a particular solution to what I am seeking.

My Issue

I want the user to input Genesis 1 then click submit , and the html pushes a submit request to my bible_api_pull.js which launches an ajax call to update the index.html page with that chapters text asynchronously.

Current State of the Project

My html page: here

My Ajax call on submit: here

The actual website: here

And my end goal was to store this information into a database with id , bookName , chapterNumber , and chapterText based on what the user pulled. However, I can't even seem to get the API populating the page correctly.

Other Resources

I got the main API call code from the api information here .

Edit: Reproducible Example

So I have a container holding 2 inputs, #bookInput and #chapterInput . On submit they are successfully getting read into my bible_api_pull.js file below. However, it is not populating. Things I've tried:

1. Alerts will not work inside of the submit function call.
2. Updating a new div in my html to see whats going on inside of that api call that isn't working, but nothing gets read.

I am wondering if it is something very subtle I am missing, or if this really is a logic error in my understanding of javascript/ajax.

<!-- index.html -->
<div class="container">
    <div class="jumbotron">
        <form id="target" class="form-inline" action="" method="">
              <label class="sr-only" for="inlineFormInput">Book</label>
              <input id="bookInput" name="bookId" type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Search book ...">

              <label class="sr-only" for="inlineFormInput">Chapter</label>
              <input id="chapterInput" name="chapterId" type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Search chapter ...">


              <button type="submit" class="btn btn-primary" style="">Submit</button>
              <img src="../images/ajax-loader.gif" id="loading-indicator" style="display:none;position:absolute;top:"+$(window).height()/2+"px;left:"+$(window).width()/2+"px;" />
        </form>

        <hr>

        <div id="scripture"> </div>
    </div>
</div>


// bible_api_pull.js
$('#target').submit(function(event){

    // Next up ... dynamically accept the users choice!!!! Each input has it's own ID now!
    $('#loading-indicator').show();

    // Load the data
    var book = $("#bookInput").val();
    var chapter= $("#chapterInput").val();
    //var keywordInput = $("#searchInput").val();
    var book_chapter = book+chapter;

    // Pass the data
    jQuery.ajax({
        url:'http://getbible.net/json',
        dataType: 'jsonp',
        data: 'p='+book_chapter+'&v=kjv',
        jsonp: 'getbible',
        success:function(json){

            // set text direction
            if (json.direction == 'RTL'){
                var direction = 'rtl';
            } else {
                var direction = 'ltr'; 
            }
            /********************************************/
            /* Formatting for verses being returned     */
            /********************************************/
            if (json.type == 'verse'){
                var output = '';
                    jQuery.each(json.book, function(index, value) {
                        output += '<center><b>'+value.book_name+' '+value.chapter_nr+'</b></center><br/><p class="'+direction+'">';
                        jQuery.each(value.chapter, function(index, value) {

                            output += '  <small class="ltr">' +value.verse_nr+ '</small>  ';
                            output += value.verse;
                            output += '<br/>';
                        });
                        output += '</p>';
                    });
                jQuery('#scripture').html(output);  // <---- this is the div id we update
            } 
            /********************************************/
            /* Formatting for chapters being returned   */
            /********************************************/
            else if (json.type == 'chapter'){
                var output = '<center><h3><b>'+json.book_name+' '+json.chapter_nr+'</b></h3></center><br/><p class="'+direction+'">';
                jQuery.each(json.chapter, function(index, value) {
                    if(value.verse.includes(keywordInput)){
                        output += '  <small class="ltr">' +value.verse_nr+ '</small>  ';
                        output += value.verse;
                        output += '<br/>';
                    }
                });
                output += '</p>';
                jQuery('#scripture').html(output);  // <---- this is the div id we update
            } 
            /********************************************/
            /* Formatting for books being returned      */
            /********************************************/
            else if (json.type == 'book'){
                var output = '';
                jQuery.each(json.book, function(index, value) {
                    output += '<center><h1><b>'+json.book_name+' '+value.chapter_nr+'</b></h1></center><br/><p class="'+direction+'">';
                    jQuery.each(value.chapter, function(index, value) {
                        output += '  <small class="ltr">' +value.verse_nr+ '</small>  ';
                        output += value.verse;
                        output += '<br/>';
                    });
                output += '</p>';
            });
            if(addTo){
                jQuery('#scripture').html(output);  // <---- this is the div id we update
            }
          }
         $('#loading-indicator').hide();
        },
        error:function(){
            jQuery('#scripture').html('<h2>No scripture was returned, please try again!</h2>'); // <---- this is the div id we update
         },
    });


    event.preventDefault();
});

Answer 1

I didnt understand what was your issue? But anyway this code is quite straight forward.
I commented if(value.verse.includes(keywordInput)){ because var keywordInput = $("#searchInput").val(); variable was commented during declaration and it's working now.
Check the response and let me know what exactly you wanted.

  $('#target').submit(function(event){ // Next up ... dynamically accept the users choice!!!! Each input has it's own ID now! //$('#loading-indicator').show(); // Load the data var book = $("#bookInput").val(); var chapter= $("#chapterInput").val(); //var keywordInput = $("#searchInput").val(); var book_chapter = book+chapter; // Pass the data jQuery.ajax({ url:'http://getbible.net/json', dataType: 'jsonp', data: 'p='+book_chapter+'&v=kjv', jsonp: 'getbible', success:function(json){ // set text direction if (json.direction == 'RTL'){ var direction = 'rtl'; } else { var direction = 'ltr'; } /********************************************/ /* Formatting for verses being returned */ /********************************************/ if (json.type == 'verse'){ var output = ''; jQuery.each(json.book, function(index, value) { output += '<center><b>'+value.book_name+' '+value.chapter_nr+'</b></center><br/><p class="'+direction+'">'; jQuery.each(value.chapter, function(index, value) { output += ' <small class="ltr">' +value.verse_nr+ '</small> '; output += value.verse; output += '<br/>'; }); output += '</p>'; }); jQuery('#scripture').html(output); // <---- this is the div id we update } /********************************************/ /* Formatting for chapters being returned */ /********************************************/ else if (json.type == 'chapter'){ var output = '<center><h3><b>'+json.book_name+' '+json.chapter_nr+'</b></h3></center><br/><p class="'+direction+'">'; jQuery.each(json.chapter, function(index, value) { output += ' <small class="ltr">' +value.verse_nr+ '</small> '; output += value.verse; output += '<br/>'; }); output += '</p>'; jQuery('#scripture').html(output); // <---- this is the div id we update } /********************************************/ /* Formatting for books being returned */ /********************************************/ else if (json.type == 'book'){ var output = ''; jQuery.each(json.book, function(index, value) { output += '<center><h1><b>'+json.book_name+' '+value.chapter_nr+'</b></h1></center><br/><p class="'+direction+'">'; jQuery.each(value.chapter, function(index, value) { output += ' <small class="ltr">' +value.verse_nr+ '</small> '; output += value.verse; output += '<br/>'; }); output += '</p>'; }); if(addTo){ jQuery('#scripture').html(output); // <---- this is the div id we update } } $('#loading-indicator').hide(); }, error:function(){ jQuery('#scripture').html('<h2>No scripture was returned, please try again!</h2>'); // <---- this is the div id we update }, }); event.preventDefault(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="jumbotron"> <form id="target" class="form-inline" action="" method=""> <label class="sr-only" for="inlineFormInput">Book</label> <input id="bookInput" name="bookId" type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Search book ..."> <label class="sr-only" for="inlineFormInput">Chapter</label> <input id="chapterInput" name="chapterId" type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Search chapter ..."> <button type="submit" class="btn btn-primary" style="">Submit</button> </form> <hr> <div id="scripture"> </div> </div> </div> 

I hope you understand :)