javascript

php

html

css

codeigniter

how to get the base url in javascript

Viewed 87 times

I am building a website with CodeIgniter, I have various resources that I load with the base_url helper function like this

<link rel="stylesheet" type="text/css" href="'.base_url('assets/css/themes/default.css').'" id="style_color"/>

which produces (i.e. www.mysite.com)

<link rel="stylesheet" type="text/css" href="http://www.mysite.com/assets/css/themes/default.css" id="style_color"/>

I can then swap this resource with another in javascript like this

$('#style_color').attr("href", "assets/css/themes/" + color_ + ".css");

what happens is that it will try to load the resource without using the absolute path generated by php, so my solution was adding a dummy tag in every page with php like this

<div id="base_url" class="'.base_url().'"></div>

I then modified the javascript line to

$('#style_color').attr("href", $('#base_url').attr("class") + "assets/css/themes/" + color_ + ".css");

it does work but it doesn't look elegant at all, so, I would appreciate any help on how to maybe generate this base url from within javascript or any other solution, thanks :)

I preferred a Javascript only solution and since I am using CodeIgniter, a document.base_url variable with the segments of the url from the protocol to the index.php seemed handy

document.base_url = base_url('index.php');

with the function base_url() being

function base_url(segment){
   // get the segments
   pathArray = window.location.pathname.split( '/' );
   // find where the segment is located
   indexOfSegment = pathArray.indexOf(segment);
   // make base_url be the origin plus the path to the segment
   return window.location.origin + pathArray.slice(0,indexOfSegment).join('/') + '/';
}

Answers

Base URL in JavaScript

You can access the current url quite easily in JavaScript with window.location

You have access to the segments of that URL via this locations object. For example:

// This article:
// https://.com/questions/21246818/how-to-get-the-base-url-in-javascript

var base_url = window.location.origin;
// "http://.com"

var host = window.location.host;
// .com

var pathArray = window.location.pathname.split( '/' );
// ["", "questions", "21246818", "how-to-get-the-base-url-in-javascript"]

In Chrome Dev Tools, you can simply enter window.location in your console and it will return all of the available properties.

Further reading is available on this thread

Friday, December 16, 2022

udi100-e6a2bcf5e4bc

define general css that used. Open "config.php" within directory CodeIgnitersystemapplicationconfig.

$config['css'] = 'mystyles.css';

Create a file named mystyles.css within root application: CodeIgniter.

$this->load->helper('url');       
$data['css']        = $this->config->item('css');

You can load css in views pages like this.

Thursday, November 10, 2022

kakopappa

Add attributes to the <tr>

<tr data-companyId="<?php echo $companyId;?>" data-licId="<?php echo $licId;?>">

In your jQuery, get those attributes on click of delete link:

$(document).on('click', '#deleteRow', function() {     
  var companyId = $(this).parent().parent().attr('data-companyId');
  var licId = $(this).parent().parent().attr('data-licId');
  $(this).parent().parent().remove();
});

Even, you can do object caching (using variable instead of object to improve performance.

$(document).on('click', '#deleteRow', function() {
  var obj = $(this).parent().parent();
  var companyId = obj.attr('data-companyId');
  var licId = obj.attr('data-licId');
  obj.remove();
});

Friday, November 11, 2022

arlomedia

document.referrer

in many cases will get you the URL of the last page the user visited, if they got to the current page by clicking a link (versus typing directly into the address bar, or I believe in some cases, by submitting a form?). Specified by DOM Level 2. More here.

window.history allows navigation, but not access to URLs in the session for security and privacy reasons. If more detailed URL history was available, then every site you visit could see all the other sites you'd been to.

If you're dealing with state moving around your own site, then it's possibly less fragile and certainly more useful to use one of the normal session management techniques: cookie data, URL params, or server side session info.

Monday, August 1, 2022

rudresha_parameshappa

The exact same command should work:

<?php 
echo $this->Html->css('reset.css');
?>

It automatically adds the path to the CSS folder if the given path 'reset.css' doesn't start with a slash.

By the way, if you do need to get the base url in Cake, you can use the Router class:

//with http://site.domain.com/my_app
echo Router::url('/')       //-> /my_app
echo Router::url('/', true) //-> http://site.domain.com/my_app

Monday, August 22, 2022

kzahel

Only authorized users can answer the search term. Please sign in first, or register a free account.

Not the answer you're looking for? Browse other questions tagged :