Script not firing on server

The script runs in browser and does not depend on your server BUT for sure you have a typo in the path to required JavaScript .js  librieries that have of course different location on server then on your local PC.

Search for the typo  <|;- )

Try to use only <script> tag without type attr.

... and I am pretty sure your calendaricons.length is Zero!

@Zvonko If the path was wrong, then the page wouldn't load at all. It contains a jqxgrid. In addition, in the net tab of firebug, all files are in the correct location with no errors. Thanks But I will double check.

@leonidas I removed type and it fired once but won't fire again. Thanks

Then change the counter line to:

if (counter >= 0) {

Select allOpen in new window

@Zvonko Still not firing. The idea behind this, is that I only need to fire the message once. Interestingly, in localhost, the counter will increment up to 1 in firebug, but on the server this dosen't happen. If it helps I am using jquery 1.11.1 Thanks

Also, in localhost I have to do a force refresh in ff to fire if the page is reloaded.

ok. I tried a different option of coding but once again it works in wamp but not on server. What the hell is wrong?

$(window).load(function() {
    $('.jqx-icon-calendar').each(function(index, item) {
        $(this).one("click", function() {
            notif({
              type: "info",
              msg: "Test Message",
              width: 650,
              height: 99,
              multiline: true,
              position: "center",
              fade: true,
              //timeout: 3000,
              autohide: false,
              clickable: true
            });
        });
    });
});

Select allOpen in new window

Check Peter the position of the script to be at the bottom of the </body> tag.

Hi Leonidas It is at the bottom. Quick question, how can I find an element in jquery to see if it exists in the DOM. Thanks

Check the image..With red pencil color and yellow markup is the element that exists. If exists the return is an array object.

Maybe you must try to run the script after document.ready. Check the follow image:

This is waht is returned from sample

var a = $('.jqx-icon-calendar');
console.log(a);

Select allOpen in new window

Object[]

Only works with window.load on localhost not on server

Write

console.log(a.lenght);

Select allOpen in new window

. If it is greater than 0 then the element-ments is-are exists.If it 0 then it doesn't exists.The object return maybe is an array or a function object because in javascript language all are objects.

it shows as 0. Which begs the question, if the length is 0 how is it working? in localhost. The amended code I posted works fine in localhost not on server

Have you checked at localhost and server and both results are 0?
PS
1. Also clear cache at localhost running and retry

2. Add the debugger function in the script that running in server and then check the console how the script runs. Set this:

<script type="text/javascript">
	
  var counter = 0;
  //console.log(counter);
  window.onload = function() {
//Below is the debugger
debugger;

    var calendaricons = document.getElementsByClassName('jqx-icon-calendar');

    for (var i = 0; i < calendaricons.length; i++) {
      calendaricons[i].addEventListener('click', function() {
        if (counter === 0) {
          notif({
            type: "info",
            msg: "Test Message",
            width: 650,
            height: 99,
            multiline: true,
            position: "center",
            fade: true,
            //timeout: 3000,
            autohide: false,
            clickable: true
          });
          counter++;
          //console.log(counter);
        } else {
          return false;
        }
      });
    }
  }
	
</script>

Select allOpen in new window

Got to pop out for a while. I shall post back later. cheers

@Leonidas I haven't used that before so I am not sure what I should be looking for. Thans

@Peter
To debug step by step the script code I' ll give a simply example (Tested in liveweave).
Adding the debugger into the code (that you already put it in the server) you can have a picture like this..

Note the debugger method inside the code (red pencil mark)
The live execution of the debug mode (at the top red pencil mark)
And the console step by step execution of the code with all variables (yellow marks)
So with this way you can have a picture how your code is executing in the server side. To debug the code you must have open the console first and then via reload to watch the debug processing.

Check this out. If I put debugger in script and press continue in the debugger, the script works and the click is triggered. However, If i comment debugger out, it fails. What gives?

If the debugger is showing that the script is executing normally then the problem is another.Could you post an image of the debug mode in the script?

@Leonidas Is this what you want? Thanks

The fault is the if(counter===0) position. At the first execution the for loop binds a click event to the first element.Then the counter increasing by one (counter=1).At the second loop the if statement reject the execution because it see counter=1 instead of two.

Can you show me how to correct please. Thanks

 window.onload = function() {
     if(!sessionStorage.counter){
        sessionStorage.setItem('counter','one');
        var calendaricons = document.getElementsByClassName('jqx-icon-calendar');
        
        for (var i = 0; i < calendaricons.length; i++) {        
        calendaricons[i].addEventListener('click', function() {           
        notif({
          type: "info",
          msg: "<b>ERROR:<br /><br />You must enter a search term</b><p>Click cross to close</p>",
          width: 600,
          height: 99,
          multiline: true,
          position: "center",
          fade: true,
          //timeout: 3000,
          autohide: false,
          clickable: true
          })
        console.log('click');   
        });
      
};  
   }else{       
      return false;       
    }    
    }

Select allOpen in new window

****Note that with this function you bind the event click only once. When you reload the page the the click event is no longer exist.You must open a new tab to have the click event.
Else you run the function that binds the click event every time you load the window.***

@Leonidas Thanks for reply. Unfortunately, it doesn't fire. In debugger I set breakpoint here if(!sessionStorage.counter){ and pressing step into goes directly to return false;

Repeat pls the debugger with this code:

window.onload = function() {
     if(!sessionStorage.counter){
        sessionStorage.setItem('counter','one');
        var calendaricons = document.getElementsByClassName('jqx-icon-calendar');
        
        for (var i = 0; i < calendaricons.length; i++) {        
        calendaricons[i].addEventListener('click', function() {           
        notif({
          type: "info",
          msg: "<b>ERROR:<br /><br />You must enter a search term</b><p>Click cross to close</p>",
          width: 600,
          height: 99,
          multiline: true,
          position: "center",
          fade: true,
          //timeout: 3000,
          autohide: false,
          clickable: true
          })
        console.log('click');   
        });
      
};  
   }else{
     sessionStorage.removeItem('counter');       
      return false;       
    }    
    }

Select allOpen in new window

Try to reload the page with the open console and see if the code binds the click event.(For testing purpose this code)

@Leonidas Not really sure what you are asking me to do. How will I know from console if the event has been bound? Thanks

Sorry Peter I wasn't clear enough.The function that you and me created it binds a click event when the window loads. If I understand right when the window loads, the function binds a click event at each element and then when you click at the element  the notif() function takes the parameters that you have as arguments. Until here all are good. The problem starts from this point-before this post you ask if this function can take place only once (for that reason I post my code using sessionStorage).
    If (for some reason) I reload the page then (according to my code) the function finds that counter variable in sessionStorage object is already exists and then it doesn't bind again the click event. But now all the elements in the DOM have lost the previous click event possibility.
    Do you want to work the function only once?Or every time that the window loading?
With the last code that i post you I want to show you (via debug mode) how the function is working step by step.For that reason at the first execution the function binds the click event and at the first (because it find the var counter) is not bind the click and goes at the lines 25-26 (see post with ID 42215981)

@leonidas I want to show message once on each page load. Thanks

I need to open in same window if possible. very simple clients :-)

@Leonidas In otder to perhaps understand better how the system works, I have put a working example at the following link. However, what they say that this only works with that they call real data and will not work when using with a url in the grid like 'url:box.php' to load the data in the grid. Why this is the case I do not know. Just thought this may give you an idea on how the grid works. Thanks

Calendar alert example code

jqwidgets grid documentation

Thanks very much for all your help and patience. I haven't managed to solve the problem but will try to find another route to go. Many thanks