Problem trying to populate a section's innerHTML

  • Posts: 2553
  • Karma: 87
  • Thank you received: 343

mihaela replied the topic: Problem trying to populate a section's innerHTML

Just one more thing,

I did all the testing with the following code:
// Build the HTML string
	$str_html = "";
	$str_html .= "<br><h4>Thank you for completing your Placement Test.</h4><br>";
	$str_html .= "<p style='font-size: 115%;'>You answered " .$pt_score. " out of 50 questions correctly.</p>";
	$str_html .= "<p style='font-size: 115%;'>You are ready for: <strong>" .$ss_level. "</strong> level. At this level:</p>";
	$str_html .= "<ul style='font-size: 115%; list-style-type: disc;'>";
	for ($i = 0; $i < count($cefr_can_do_current); $i++) {
		$str_html .= "<li>" .$cefr_can_do_current[$i]. "</li>";
	} // for
	$str_html .= "</ul>";

	//echo $str_html;
echo '<script type="text/javascript">
<!--
document.getElementById("mytestdiv").innerHTML = \'<div>'.TESTING.'</div>\';
//->
</script>';
and not the one that you have written afterwards.

I've copied back your new code now so that you don't loose it, but for me it produced an error.

Regards,

Mihaela
#237518
  • baileynp
  • Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 76
  • Thank you received: 1

baileynp replied the topic: Problem trying to populate a section's innerHTML

Hi Mihaela

Many, many thanks for looking at this problem.

After looking at your suggestions, I have decided to go down the much more elegant route of putting the HTML in the section's description, and then populate it dynamically using javascript and the spans' ids.

But, and there is always a 'but' (:)), I now have another problem.

At the moment, the section's html code looks like this:
<div style="padding-left: 50px;"><br />
<h4>Thank you for completing your Level Test.</h4><br />
<p style="font-size: 115%;">You answered <span id="pt_score">pt_score</span> out of 50 questions correctly.</p>
<p style="font-size: 115%;">You are ready for <span id="ss_level">ss_level</span> level. At this level:</p>
</div>

And in my form's after piece, it now simply looks like:
<snip>	echo '<script type="text/javascript">document.getElementById("pt_score").innerHTML = '.$pt_score.';</script>';
	echo '<script type="text/javascript">document.getElementById("ss_level").innerHTML = '.$ss_level.';</script>';

and the problem is that the second span (ss-level) isn't being populated, as you see in the screenshot.



$ss-level is definitely populated, so I can't see why the first JS line works but not the second. :(

You'll be pleased to know I've disabled parts of the form, as I'm sure you're tired of checking your level in English ;)

Regards
#237525
Attachments:
  • Posts: 2553
  • Karma: 87
  • Thank you received: 343

mihaela replied the topic: Problem trying to populate a section's innerHTML

Hello again,

I'm glad to help and I think it is a good idea that you have decided to put the HTML in the section's description, and then populate it dynamically.

You'll be pleased to know I've disabled parts of the form, as I'm sure you're tired of checking your level in English ;)

Thank you, this has made testing much easier. :)

I came to the conclusion that something is wrong with filling in the $ss_level variable and that this variable is actually empty in After Form piece "ff_StudentPlacementAfterPiece". That is the reason why it isn't displayed.

I did two tests.

1)
First I put this in After form:
$ss_level = 5;
	echo '<script type="text/javascript">document.getElementById("pt_score").innerHTML = '.$pt_score.';</script>';
	echo '<script type="text/javascript">document.getElementById("ss_level").innerHTML = '.$ss_level.';</script>';

This was properly displayed on the last page:
"You answered 99 out of 50 questions correctly.
You are ready for 5 level. At this level:"

2)
Then I did a second test with a new variable from the form field.

I've added this to the "ff_StudentPlacementEndSubmit" End Submit piece to start session:
$rg_cefr_stat_1 = ff_getSubmit('rg_cefr_stat_1');
$session->set('rg_cefr_stat_1', $rg_cefr_stat_1);

In After Form piece "ff_StudentPlacementAfterPiece" I've added this:
$val3 = $session->get('rg_cefr_stat_1', $rg_cefr_stat_1);
echo '<script type="text/javascript">document.getElementById("ss_level").innerHTML = '.$val3.';</script>';

This worked properly as well, meaning that another form value from field can be properly fetched and displayed.

Also, it displayed the value fine for the third variable you have $cefr_level_id .

Therefore please check once more if you are fetching the value right in the End Submit piece:
$ss_level = ff_getSubmit('txt_ss_level');
Do you have a field named 'txt_ss_level' in your form?

Regards,

Mihaela
#237529
  • baileynp
  • Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 76
  • Thank you received: 1

baileynp replied the topic: Problem trying to populate a section's innerHTML

Curiouser and curiouser... :)

I've recreated the hidden input 'txt_ss_level', and I added an alert after both the variable ss_level and the element txt_ss_level are populated inside the form. This gave me:



So far, so good - the data is there inside the form.

Next, I added an echo to the form's after piece before the JS is run, and it gave me:



So, the variable is populated, but the JS still doesn't see it as a value.

Does it make any difference in the data types? $pt_score is an integer value, and $ss_level is a string.

Methinks I need more coffee and cigarettes. :)
#237530
Attachments:
  • baileynp
  • Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 76
  • Thank you received: 1

baileynp replied the topic: Problem trying to populate a section's innerHTML

Hi Mihaela

After various black magic rituals, voodoo ceremonies, copious amounts of alcohol and swearing, I've actually resolved the problem! :cheer:

The answer was sooooo simple.

My after form piece now looks like:
echo "
		<script type='text/javascript'>
			document.getElementById('sa_level').innerHTML = '$sa_level (put the level name here)';
			document.getElementById('pt_score').innerHTML = '$pt_score';
			document.getElementById('ss_level').innerHTML = '$ss_level';
		</script>";

The solution was to simply change the double quotes into single quotes, and vice-versa. :whistle:

Now, my results section is starting to look more professional:



Again, many thanks for looking at this for me. It wasn't entirely wasted - you taught me a lot (again).

Regards
#237534
Attachments:
  • Posts: 2553
  • Karma: 87
  • Thank you received: 343

mihaela replied the topic: Problem trying to populate a section's innerHTML

Hello again,

Grat! I'm really happy that this is now working for you! :)

I see what was the issue, sometimes it is a simple solution like that, but it is hard to find.

I'm glad that you've learned something new as well.

Best regards,

Mihaela
#237539
The following user(s) said Thank You: baileynp
Moderators: ForumSupporttomeperica
Time to create page: 0.491 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here