Run PHP script on link click without page refresh

Question

Ok, so I've done a style switcher in php, and I'm using it as a hidden feature on my site, which is triggered when user types "teema", and a modal box will appear on the top of the page content and displaying the available themes.

<ul>
    <li><a href="teema.php?teema=default" class="ajaxLink">Normaali</a></li>
    <li><a href="teema.php?teema=superhero" class="ajaxLink">Superhero</a></li>
    <li><a href="teema.php?teema=spacelab" class="ajaxLink">Spacelab</a></li>
    <li><a href="teema.php?teema=united" class="ajaxLink">United</a></li>
    <li><a href="teema.php?teema=cyborg" class="ajaxLink">Cyborg</a></li>
</ul>

However, I want to change the theme without the page refreshing so the css should load on background. Here's the teema.php:

<?php
    $style = $_GET['teema'];
    setcookie("teema", $style, time()+604800);
    if(isset($_GET['js'])) {
        echo $style; 
    } 
    else{
    header("Location: ".$_SERVER['HTTP_REFERER']);  
    }
?>

And the php on the index that checks the cookie:

<?php 
if(!empty($_COOKIE['teema'])) $style = $_COOKIE['teema'];
else $style = 'default';
?>
<link rel="stylesheet" href="css/<? echo $style;?>.css" id="theme">

How could I load the new css on the background, and fade it over to the old css using jQuery?

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

You can give a response of JavaScript content type in the PHP file and manipulate the stylesheet.

Change the code this way:

<?php
    $style = $_GET['teema'];
    setcookie("teema", $style, time()+604800);
    if(isset($_GET['js'])) {
        // echo $style; 
    } 
    else{
     // header("Location: ".$_SERVER['HTTP_REFERER']);  
    }
    header("Content-type: text/javascript");
?>
document.getElementById("theme").setAttribute("href", "teema.css");

Using AJAX and PHP to change the theme.

Since you already use the id="theme" in your <link /> tag, we can easily set the stuff in jQuery using AJAX.

So, you give a theme request this way:

$.getScript("theme.php?teema=theme");

And in the PHP:

header("Content-type: text/javascript");
$('#theme').attr('href', 'css/<?php echo $_GET['teema']; ?>');

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 11 '12 at 16:54

Praveen Kumar Purushothaman

164,888
24
203
252

@ChristianNikkanen Added the full answer. Sorry, by mistake pressed `Ctrl+Enter`. – Praveen Kumar Purushothaman Nov 11 '12 at 16:56
yeah, but this just goes to http://site.com/teema.php?teema=united and has document.getElementById("link").setAttribute("href", "teema.css"); on it. – Nov 11 '12 at 16:58
yeah, I use jQuery, as I added it in tags and asked how to do it with jQuery. – Nov 11 '12 at 16:58
Woah... Can you gimme a moment, so that I can give you an updated solution? – Praveen Kumar Purushothaman Nov 11 '12 at 16:58
`$.getScript` is not appropriate for an html response and doesn't add the `js` param needed in php. Also `link` is not an ID – charlietfl Nov 11 '12 at 17:11
@charlietfl Seriously, did you see the PHP output? It is a jQuery! – Praveen Kumar Purushothaman Nov 11 '12 at 17:15
@PraveenKumar huh? `document.getElementById("link")` assumes there is a tag with that ID. Making it more confusing than simply leaving the php the way it was – charlietfl Nov 11 '12 at 17:21
@charlietfl Yea lol, just noticed. Thanks. Update the answer. :) – Praveen Kumar Purushothaman Nov 11 '12 at 17:24
I just don't get it, do what in plain english? :D – Nov 11 '12 at 17:39

score 1 · Answer 2 · answered Nov 11 '12 at 16:59

1

Change the content of this link ($('$#theme').attr('href', 'css/' + selectedtheme +'.css');, and you can set cookie in javascript too (document.cookie = 'theme=' + selectedtheme)

answered Nov 11 '12 at 16:59

dev-null-dweller

29,274
3
65
85

charlietfl · Accepted Answer · 2012-11-11T17:43:45.300

1

You can simply make an ajax request so the cookie will be returned

Using jQuery:

$('.ajaxLink').click(function(e) {
    e.preventDefault();
    var teemaUrl=this.href;
    var teema=teemaUrl.split('=').pop()
    $.get(teemaUrl, { js:true}, function(data){
       $('#theme').attr('href','css/'+ teema+'.css')

    })
});

This will parse the teema value from link href , make call to that href ( may need to add path info) and update href of link tag with ID=theme

edited Nov 11 '12 at 17:43

answered Nov 11 '12 at 17:02

charlietfl

170,828
13
121
150

Nope, it's sure prevents loading, but it doesn't replace the css without reload. – Nov 11 '12 at 17:38
does your existing link tag have an ID? `alert( $('#theme').length)` – charlietfl Nov 11 '12 at 17:39
do you mean the css to be changed? – Nov 11 '12 at 17:41
oops I made a mistake `$('#theme').attr('href','css/'+ teema+'.css')`. I had wrong attribute and also forgot path and extension – charlietfl Nov 11 '12 at 17:42
Almost perfect! Is it possible to fade the new css to it? – Nov 11 '12 at 17:44
no.. the browser will instantly call the new css file, have no control over it. You could fade the page in and out but there's no way to know the timing – charlietfl Nov 11 '12 at 17:45
Okay, then I'll just have to stick with this. Thanks! – Nov 11 '12 at 17:46

Run PHP script on link click without page refresh

3 Answers3

Change the code this way:

Using AJAX and PHP to change the theme.