2 Javascript questions

[Nic727]

Hi,

 

I didn't want to create two topics, so here are my two questions regarding Javascript.

 

1. I use the same Javascript file for all my pages. The problem is that I get some errors on some page because I don't use X script. Is it possible to make a script activating only when on a specific page like if page name is XX, load this code?

 

2. I have a code working when between <script> on my HTML page, but when adding the code in my JS file, it doesn't work. What should I do to make the code working from the file?

 

Thank you

Edited June 11, 2018 by Nic727

[justsomeguy]

You can do whatever you'd like to do.  You can check the URL if you want, or probably better you can check for the presence of specific elements on the page to decide what the code should do.

I have a code working when between <script> on my HTML page, but when adding the code in my JS file, it doesn't work. What should I do to make the code working from the file?

If the code depends on elements on the page being there, then you need to put it in a ready handler.

[Nic727]

7 hours ago, justsomeguy said:

If the code depends on elements on the page being there, then you need to put it in a ready handler.

I already have one at the beginning of my js file

$(document).ready(function(){

For some reasons, if I replace that for $(function(){ it's not working even if in the jQuery website it shows as valid code.

My code look like something like that:

$(document).ready(function(){
  
   var dateOptions = { year: 'numeric', month: 'long', day: '2-digit' };
            var exposure_feed={
    
                options:{
                    target:"exposure-feed",
                    username:null,
                    data:null,
                    fetch_url:null,
                    story_count:6,
                    show_title:!0,
                    show_subtitle:!0,
                    show_publish_date:!0,
                    cover_size_width:800,
                    cover_size_height:400,
                    format_date:function(e){
                        return e?e.toLocaleDateString('fr-CA', dateOptions):""
                    }},
    
                init:function(e){for(var o in e)e.hasOwnProperty(o)&&exposure_feed.options.hasOwnProperty(o)&&(exposure_feed.options[o]=e[o]);exposure_feed.fetch()},fetch:function(){if(null==exposure_feed.options.username)throw new Error("Missing username.");var e=new XMLHttpRequest,o="https://exposure.co/api/3/site/"+exposure_feed.options.username+"/stories";null!=exposure_feed.options.fetch_url&&(o=exposure_feed.options.fetch_url),e.open("GET",o,!0),e.send(null),e.onload=function(){exposure_feed.options.data=JSON.parse(e.response),exposure_feed.render()}},render:function(){for(var e=document.querySelector("#"+exposure_feed.options.target),o=exposure_feed.options.data,t="",s=o.site,r=0,i=o.stories.stories.length;i>r;r++)if(!(null!=exposure_feed.options.story_count&&r>+exposure_feed.options.story_count-1)){
                    var n=o.stories.stories[r];
                    t+='<div class="ex-story">',
                        t+='<a class="ex-stoy-link" rel="noopener noreferrer" target="_blank" href="'+n.urls.story_web+'" title="Link to '+n.title+" by "+s.full_name+'">',
                            t+='<div class="ex-story-img" style="background-image:url('+n.cover_photo.url+')">',
                                t+='<div class="bg-filter"></div>',
                                t+='<div class="infos-container">',
                                    t+='<div class="infos-left">',
                                        t+='<div class="infos">',
                                            0!=exposure_feed.options.show_publish_date&&(t+='<div class="blog-date travel"><h3>'+exposure_feed.options.format_date(new Date(n.published_at))+"</h3></div>"),
                                            0!=exposure_feed.options.show_title&&(t+='<div class="blog-name"><h1>'+n.title+"</h1></div>"),
                                        t+="</div>",
                                    t+="</div>",
                                    t+='<div class="infos-right">',
                                        t+='<div class="infos">',
                                            0!=exposure_feed.options.show_subtitle&&null!=n.subtitle&&(t+='<div class="blog-description">'+n.subtitle+"</div>"),
                                            t+='<div class="blog-authorname">'+s.full_name+'</div>',
                                        t+="</div>",
                                    t+="</div>", 
                                t+="</div>", 
                            t+="</div>",
                        t+="</a>",
                    t+="</div>"}e.innerHTML=t}};
    
            
            exposure_feed.init({
                'username': 'wwf', //Account username
                'story_count': 9, //Total number of stories to display (Maximum of 18)
                'show_title': true, //Show title of story
                'show_subtitle': true, //Show Sub-title of story
                'show_publish_date': true //Show publish date of story
                });
  });

and on my HTML page I have this:

<div id="exposure-feed"></div>

[dsonesuk]

IF this code causes an error because

<div id="exposure-feed"></div>

does not exist, then check if this specific elements id exists, before going any further with a if condition
 

$(document).ready(function() {

if ($('#exposure-feed')[0]) {

//rest of code

}

});

 

 

[Nic727]

Hmm.. Not working. Maybe it's because of this error.

 

HTML1521: Unexpected "/body>" or end of file. All open elements should be closed before the end of the document.

 

EDIT:

Ok fixed. In fact it was because of an other script that I added for another page. I think it was creating a conflict. I did add the "check if element exist" before adding the script and it now works.

I still have the unexpected end of file and I don't know why.

Edited June 13, 2018 by Nic727

[dsonesuk]

That suggests you have misplaced closing, or mismatched number of opening element tags to closing tags which is strange for html error report, it also could refer to the same and including curly braces of JavaScript code

[Nic727]

maybe, I will loot into that.