Load data on open

JavaScript
1

Hello, actually i can’t figure out how to handle with this, seems easy but spend around hour and still can’t get it.

I have this:

 $(document).ready(function() {
 $("#" + properties.id).change(function() {
 do something ...

Actually this code is working fine, but only after that i edit the input that has the "#" + properties.id value.
Which is logic because im using .change function, but i dont know how to create an “after load” function, that loads if there’s any data only the time the page is open, because after the .change function will do the rest of job.

Thanks!

2 
$(document).ready(function() {
 $("#" + properties.id).change(function() {
   ///do something ...
 });
 //stick the same code for 'do something' here.
});

document.ready is the ‘after load’ function.

1 Like
3

hmm okay. I understand, but i have this as part of the code (i should paste the entire code) instead of … do something

 $(document).ready(function() {
 $("#" + properties.id).change(function() { 
 var myObject = document.getElementById(properties.id).value;      
 var converter = new showdown.Converter();
  		converter.setOption('simplifiedAutoLink', 'true');
 		converter.setOption('excludeTrailingPunctuationFromURLs', 'true');
 		converter.setOption('literalMidWordUnderscores', 'true');
 		converter.setOption('literalMidWordAsterisks', 'true');
 		converter.setOption('smoothLivePreview', 'true');   
 		converter.setOption('noHeaderId', 'true');  
 var text = myObject;
 var html = converter.makeHtml(text); 
    });    
 });

Im using a github library (showdown).

My question is, if i copy the same code that’s inside this: i will not create two showdown.Converter(); because of this line: var converter = new showdown.Converter(); ?

Thank you for your answer!!

4

You will make one, but it will get destroyed again at the end of the function.
Every time your field changes and triggers the event, it creates a new converter. It gets destroyed when the code gets to the }) at the end of the function.

1 Like
5

Oh okay, i will test it now and tell you how was gone.

Edit: Solved!
Worked like a charm.

PS: Isn’t there a “cleaner” way to do that? I mean i have now this:

$(document).ready(function() {
 $("#" + properties.id).change(function() { 
 var myObject = document.getElementById(properties.id).value;      
 var converter = new showdown.Converter();
  		converter.setOption('simplifiedAutoLink', 'true');
 		converter.setOption('excludeTrailingPunctuationFromURLs', 'true');
 		converter.setOption('literalMidWordUnderscores', 'true');
 		converter.setOption('literalMidWordAsterisks', 'true');
 		converter.setOption('smoothLivePreview', 'true');   
 		converter.setOption('noHeaderId', 'true');  
 var text = myObject;
 var html = converter.makeHtml(text);
 instance.publishState('result', html);   
    });
 var myObject = document.getElementById(properties.id).value;      
 var converter = new showdown.Converter();
  		converter.setOption('simplifiedAutoLink', 'true');
 		converter.setOption('excludeTrailingPunctuationFromURLs', 'true');
 		converter.setOption('literalMidWordUnderscores', 'true');
 		converter.setOption('literalMidWordAsterisks', 'true');
 		converter.setOption('smoothLivePreview', 'true');   
 		converter.setOption('noHeaderId', 'true');  
 var text = myObject;
 var html = converter.makeHtml(text);
 instance.publishState('result', html); 
 });

Just want to know if there’s a better way to do this.
Thanks a lot!

1 Like
6

I like that you’re already thinking about doing it in cleaner ways!

function dotheThing() {
 var myObject = document.getElementById(properties.id).value;      
 var converter = new showdown.Converter();
  		converter.setOption('simplifiedAutoLink', 'true');
 		converter.setOption('excludeTrailingPunctuationFromURLs', 'true');
 		converter.setOption('literalMidWordUnderscores', 'true');
 		converter.setOption('literalMidWordAsterisks', 'true');
 		converter.setOption('smoothLivePreview', 'true');   
 		converter.setOption('noHeaderId', 'true');  
 var text = myObject;
 var html = converter.makeHtml(text);
 instance.publishState('result', html); 
}
$(document).ready(function() {
 $("#" + properties.id).change(function() { dotheThing(); });
 dotheThing();
});
1 Like
7

Wow thank you, i was thinking on something similar that was really really helpful.

Thank you very much @m_hutley

1 Like
8

To add to what @m_hutley said, you might actually reuse the same instance instead of creating and discarding a new one each time; a new one would only be necessary if you’d have separate converters with different options…

<textarea id="editor"># Hello markdown!</textarea>
<div id="result"></div>

var editor = document.getElementById('editor')
var result = document.getElementById('result')
var converter = new showdown.Converter()
 
var convert = function () {
  result.innerHTML = converter.makeHtml(editor.value)
}
 
converter.setOption('simplifiedAutoLink', true)
converter.setOption('excludeTrailingPunctuationFromURLs', true)
converter.setOption('literalMidWordUnderscores', true)
converter.setOption('literalMidWordAsterisks', true)
converter.setOption('smoothLivePreview', true)
converter.setOption('noHeaderId', true)

editor.addEventListener('input', convert)
convert()
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.