Jump to content

Javascript file path driving me up the wall and through the roof


baymarketingco
 Share

Recommended Posts

Hi,

Trust this message finds you hale and hearty. Need your help, if you'd be so kind.

I just can't seem to get the file paths correct for a template I'm converting to Processwire.

Js folder is inside the site -> templates folder:

In this folder are calls to js files, in my _head.inc and _foot.inc files:

In the _head.inc file:

  • jquery.js
  • jquery-migrate-1.2.1.js
  • device.min.js

In the _foot.inc file:

  • script.js

Here's the code I use to call these files:

_head.inc
<script src="<?php echo $config->urls->templates; ?>js/jquery.js"></script>
<script src="<?php echo $config->urls->templates; ?>js/jquery-migrate-1.2.1.js"></script>
<script src='<?php echo $config->urls->templates; ?>js/device.min.js'></script>
_foot.inc
<script src="<?php echo $config->urls->templates?>js/script.js"></script>

Inside the script.js file, there are a bunch of includes, like the following:

include('js/jquery.cookie.js');

I'm on Chrome, and the console shows a bunch of 404 errors. The main files don't find the files referenced in script.js.

Here's an example:

http://localhost/surfinn.rocks/js/jquery.cookie.js

http://localhost/surfinn.rocks/js/jquery.cookie.js

That shows an error.

The HTML demo of the site I installed on my Wamp works fine. No errors. Not the case when loaded in Processwire.

Any idea what I'm missing?

Thanks so much for your time.

  • Like 1
Link to comment
Share on other sites

11 hours ago, blommie said:

Hi,

Trust this message finds you hale and hearty. Need your help, if you'd be so kind.

 

I was drinking an ale and was feeling a bit fa...  when I  ....  

... hmm  maybe I  better just stick to being "kind" :)
 

I went through a similar climbing experience of various walls when I first started out (still starting out).

From what I can gather (correctly or otherwise), 

1) Most Processwire API calls and HTML  expect you to use a path that starts out "/site/templates/... " etc

e.g.

JS Script paths

            <script src="/site/templates/js/min/google-platform.min.js" async defer></script>

Calls to (some) APIs

$pdf->save('/site/templates/test-file.pdf');

 

2) However, in some scenarios you will need to provide a FULL Path to the function or API call.

I think any PHP core functions or API calls, it's better to start off with a full path before reverting to a path that starts with "/site/templates/...."

e.g. PHP Include or Require statements

require_once(__DIR__."/../lib/Lib.php");

___DIR__ is the current full path of where the module or file you're looking at resides, so if the file that has require_once statement lives in /var/usr/tmp/file.php for example , then __DIR__ will return /var/usr/tmp

Link to comment
Share on other sites

Yeah I normally use internal file paths for javascript paths instead of URLs.

Is there a reason for using URLS over file paths?

I haven't used URLs for JS file paths, but I'd imagine there's more chance of things going wrong with that.
(For example, your localhost could point to different servers or sites)

Link to comment
Share on other sites

My bad, for a moment I thought you were using full URLs like below. But I realised you've hardcoded them since. 

http://localhost/surfinn.rocks/js/jquery.cookie.js

I blame lack of sleep and coffee :)

 

Have you tried $config->paths->templates ? I think that might be what you're looking for?
 

Link to comment
Share on other sites

I have. The problem is, inside the script.js file, it calls a bunch of other JS files (I didn't realise the template was so JS heavy, else I would have steered clear; not too fond of goooftymegafters and majiggers that bobble this way and jiggle that way).

So, the calls happening in script.js aren't working. All the files called in that file can't be found, apparently. Throws 404 errors. So I ended up hardcoding all the URLs in the script.js file. If it were a PHP, I'm guessing the $config->paths->templates thingy would have worked fine.

Just on another note: I just figured out (from stalking PW forum posts, of course) how to use repeaters. This system is ridiculously powerful...

If I had sat down years ago and just put my freaking head to it, I would have been a PW pro by now. But noooooooooo, "WordPress is the best CMS in the world!"

Gmf...

(Just thought I'd share this major milestone in my PW journey; it's not coming easy , so every victory is worth a celebration :))

Link to comment
Share on other sites

Yeah ... I don't know of JS hooks into Processwire Core APIs. I guess it would be a very nice to have.

I do recall there was a forum post where someone managed to import some of these API results  into Javascript and used it therefore.
I'm guessing you've probably spent too much time on this to warrant searching for it and implementing it.
 

EDIT : I think it was this article.
 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Liam88
      Hi,
      I'm really struggling with this as it's something not in my wheelhouse. I'm creating a blog style page (a grid of cards) which has attributes.
      I have a snip of javascript which grabs values from checkboxes which are put into a value like the below:
      ?content=static_video&channel=facebook-ads_instagram-ads
      document.querySelector("form").onsubmit=ev=>{ ev.preventDefault(); let o={}; ev.target.querySelectorAll("[name]:checked").forEach(el=>{ (o[el.name]=o[el.name]||[]).push(el.value)}) console.log(location.pathname+"?"+ Object.entries(o).map(([v,f])=> v+"="+f.join("_")).join("&") ); document.location.href = location.pathname+"?"+ Object.entries(o).map(([v,f])=> v+"="+f.join("_")).join("&"); } As I'm currently refeshing the page on button click with those values the end result includes the location but can easily remove this.
      I then use this value in "input->get" to get the values which I then append to a find() rule. See code below:
      $selector = "template='adbank_pages',sort=published,include=all,status!=hidden"; // Get the channel and content inputs $channel = $input->get->channel; $content = $input->get->content; if($channel){ // Grab the channel string, explode into an array for checkbox checking and then replace _ with | to create or rules in the selector. $chanArray = explode("_", $channel); $chan = $channel = str_replace('_', '|', $channel); $selector = $selector .= ",ab_channels=$chan"; } if($content){ // Grab the content string, explode into an array for checkbox checking and then replace _ with | to create or rules in the selector. $contArray = explode("_", $content); $cont = $content = str_replace('_', '|', $content); $selector = $selector .= ",ab_content=$cont"; } if($input->get){ // If a valid input result $all = $pages->find($selector); } }else{ // If no input show them all $all = $page->children("template='adbank_pages',sort=-published,include=all,status!=hidden"); } $items = $all->find("limit=12"); // Limit the output and use pagination As mentioned above I currently refresh the page to adjust the $selector filter within the $all with a fallback $all if there are no results.
      I know I need to use AJAX to filter the content without refresh but I am really struggling with the set up. I have read multiple posts including the original by Ryan but still confused.
      If anyone can direct/help on this it would be appreciated.
      Thank you
    • By fruid
      could someone help me find the javascript bug?
      https://codepen.io/bbblgmsp/pen/LYxWJJa
      or here:
      https://foobar.roofaccess.org/carousell/
      I want it to be NOT draggable on desktop but draggable on mobile devices. Also, on mobile, the element that I drag into focus should automatically be active, but on desktop, only when I click it.
      It works fine on desktop, but when you drag on mobile, after the dragged element is active and you click it, it switches back and forth between this and the previous element (assigns the active class to the previous element).
      I already tried to find help elsewhere, since this is not directly PW related but only frontend, but it's hard to find support or a community for uikit. PW seems to be using it quite a lot though…
      Thanks for help
    • By Rezvitskyq
      Hello! There was a need to rewrite the code written with jquery into vanilla js. I have little js code on my site and I see no reason to include a library such as jquery 🙂
      $('.progress-wrap .dot').on('click', function () { let $this = $(this) let stepValue = $this.attr('data-step') $this.closest('.progress-wrap').find('.bar').css('width', stepValue + '%') $this.siblings('.dot').removeClass('is-current') $this.addClass('is-active is-current') $this.prevAll('.dot').addClass('is-active') $this.nextAll('.dot').removeClass('is-active') $('.process-panel-wrap').removeClass('is-active') $('.step-title').removeClass('is-active') if (stepValue === '0') { $('#signup-panel-1, #step-title-1').addClass('is-active') } else if (stepValue === '25') { $('#signup-panel-2, #step-title-2').addClass('is-active') } else if (stepValue === '50') { $('#signup-panel-3, #step-title-3').addClass('is-active') } else if (stepValue === '75') { $('#signup-panel-4, #step-title-4').addClass('is-active') } else if (stepValue === '100') { $('#signup-panel-5, #step-title-5').addClass('is-active') } })  
    • By franciccio-ITALIANO
      Hello to all. I would like to create an app. So I need to learn at least one programming language. I got informed online, and discovered that javascript with node.js, is the revolution of recent years, because it's faster than php. I wonder: if I develop an app with javascript and with a javascript framework (e.g. Meteor), is there a way to integrate processwire work? I know that processwire supports the transformation of the site into an application, but would it be as simple as Meteor? With the Meteor framework I have my app online in 10 minutes, and without even knowing javascript! (Knowing javascript would serve to personalize it). I should then install the app in a SUB-DOMAIN. If I study php, instead, and if I use a php framework (e.g. Laravel), how long does it take to have my first working app? Is it easy to process Laravel's components? Is writing forms for processwire apps with php a very complex job? Is it better to use Meteor and start with javascript? What would you recommend?
    • By ngrmm
      My clients wants a modal to show up on every page. But when a user clicks inside the modal -> a session-cookie is set and the modal gets a class.
      // user clicks on modal button $('.modal_button').click(function(){ // 1. set PW session cookie // 2. toggle class $('.modal').toggleClass('off'); }); I know how to set a cookie on page-load via PW-API. But the click on the modal button does not force a page-load. So i have to set the cookie through javascript. Is there a way to do that?
×
×
  • Create New...