I have a div element as shown below in an HTML page:
Whenever I click on any of the div elements, I save the text within the span tag to a database. Upon returning to the same page, I retrieve the saved text and try to repopulate the clicked view based on that text.
I have included all the code I used, but I am having trouble populating the data.
<div class="panel-body">
<div class='score score-exel'>
<div class='arrow'></div><span class='scoreText'> 750-850 Excellent</span>
</div>
<div class='score score-good'>
<div class='arrow'></div><span class='scoreText'> 700-749 Good</span>
</div>
<div class='score score-ok'>
<div class='arrow'></div><span class='scoreText'> 650-699 OK</span>
</div>
<div class='score score-fair'>
<div class='arrow'></div><span class='scoreText'> 600-649 Fair</span>
</div>
<div class='score score-poor'>
<div class='arrow'></div><span class='scoreText'> 300-599 Poor</span>
</div>
<div class='btnHold'>
<button class='btn btn-success idkBtn'>I Don't Know</button>
<button class='btn btn-success submitBtn'>Submit</button>
</div>
</div>
When a user clicks on a div element, the selected value is stored in a variable called 'userCreditScore' in the following piece of code:
$('.score').bind('click', function(){
$('.arrow').hide();
$(this).find('.arrow').fadeIn();
userCreditScore = $(this).find('span').text().toString();
});
In this section of code, I attempt to populate the data based on the retrieved response, but I am facing challenges in achieving this:
function fillData(){
var response = nav.scorm.getResponse('CREDIT_SCORE');
if(response != ''){
var jsonData = jQuery.parseJSON(response);
*** tried various approaches like the one below but did not yield desired results
//$('.score').find('span.scoreText:contains('+jsonData.CREDIT_SCORE+')').parent().css('display', 'block');
//$('.score').find('span.scoreText:contains('+jsonData.CREDIT_SCORE+')').parent().click();
}