Example of functional Jquery with Discourse that doesn't require a manual reload to run?


(Scott Trager) #1

Continuing the discussion from JSON codes doesn’t always execute:

I seem to be running into this same issue with other Jquery code on our site as well - All I really need is an example of something similar that works and I can apply the same thing to my code…

The main issue boils down to ANY Jquery I put in the /head or /body box works until you click on a link - at which point, the code stops functioning until refresh is hit. here is a simple example:

<script>


    
    function getQueryVariable()
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
      // alert (window.location.pathname.split( '/' )[1].length);
          if (window.location.pathname.split( '/' )[1].length > 1) {
       return (window.location.pathname.split( '/' )[1]);
       
       }   


          if (window.location.pathname.split( '/' )[2] == null) {
       
       return("front"); 
       }    

       
       return window.location.pathname.split( '/' )[2];
       
       
}

    function getQueryVariable2()
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       
          if (window.location.pathname.split( '/' )[3] == null) {
       
       return(false); 
       }    

       
       return window.location.pathname.split( '/' )[3];
       
       
}


</script>


<script>
$.ajax("http://104.236.163.70/latest.json").then(function (result) { 
  var topics = result.topic_list.topics; 
  var myDiv1 = document.getElementById("top-post-body");
  var myDiv2 = document.getElementById("main-outlet");
 // alert (getQueryVariable());
  
  if (myDiv2.innerHTML == null) {
     myDiv2.innerHTML = " ";
      
  }
 
//   if (myDiv1.innerHTML == null) {
      
 //     alert ("1 is null");
      
//  } 

  if (getQueryVariable2() == false) {
      //CODE FOR BOARDS GOES HERE  
      myDiv2.innerHTML = myDiv2.innerHTML.replace("\"sidebar\"","\"sidebar" + "\"id=\"OUR-sidebar-" + getQueryVariable() + "\"");
      myDiv2.innerHTML = myDiv2.innerHTML.replace("\"contents\"","\"contents" + "\"id=\"OUR-" + getQueryVariable() + "\"");
  }
  
  else if (getQueryVariable2() != false) {
  
  //CODE FOR CATEGORIES GOES HERE
      myDiv2.innerHTML = myDiv2.innerHTML.replace("\"sidebar\"","\"sidebar" + "\"id=\"OUR-sidebar-" + getQueryVariable() + "-" + getQueryVariable2() + "\"");
      myDiv2.innerHTML = myDiv2.innerHTML.replace("\"contents\"","\"contents" + "\"id=\"OUR-" + getQueryVariable() + "-" + getQueryVariable2() + "\"");
      
  }
  
  
    else {
        
        
    //CODE FOR FRONT PAGE GOES HERE    
        
 //    myDiv2.innerHTML =  myDiv2.innerHTML + "<span id='OUR-" + getQueryVariable() + "'>>";

    
 
     myDiv2.innerHTML = myDiv2.innerHTML.replace("\"sidebar\"","\"sidebar" + "\"id=\"OUR-sidebar-" + getQueryVariable() + "\"");
      myDiv2.innerHTML = myDiv2.innerHTML.replace("\"contents\"","\"contents" + "\"id=\"OUR-" + getQueryVariable() + "\"");
    }

(Sam Saffron) #2

jQuery is not the way you extend stuff, you need to use Ember and wire into the right spots, Ember router will tear down pages as you navigate around.

Strongly recommend you get some Ember experts on board to at least pave the direction for you.


(Scott Trager) #3

Unfortunately no one here is proficient in Ember so we need to do it this way for our demo…

I can’t see this being more than a few lines of code to fix, I just don’t know where the problem lies - someone suggested in another thread that we should add a Jquery Selector, but I don’t see how that would help here…

Code works perfectly besides this refresh/link issue - when you go to any page manually it’s doing exactly what we want it to.


(Sam Saffron) #4

This need to go on the router somehow, not sure off the cuff maybe @eviltrout knows off the top of his head


(Robin Ward) #5

Sam is right that this is not the correct way to extend a Discourse app.

Ember has full lifecycle management for views which is key to knowing when to apply jQuery stuff and when to tear it down.

Observing the URL doesn’t work because a URL change might trigger an asynchronous request to get data from our JSON api, and the rendering will only happen when that promise is fulfilled.