Refactoring 3 small bits of PHP function into JS - array, if empty and matching url?

Question

I'm not much of a JS person but I'd like to know how to run my PHP into JS. How can I do the following using Javascript only?

// 1. Getting the request
<?php if($_GET["slider"]=="1"){ ?>
$(".class1 a").click()      
<?php } ?>
<?php if($_GET["slider"]=="2"){ ?>
$(".class2 a").click()

// 2. Matching the URL and setting an active class on the list item
<li><a href="my_page.php" class="<?php if (strrpos($_SERVER['REQUEST_URI'], 'my_page') !== FALSE ) {?>active<?php } ?>">My Page</a></li>

// 3. Nav array and If empty
<?php
$navigation = array(
    'previous'  => 'page1.php',
);

if (isset($navigation['previous']))
{
?>
<div class="prev">
    <a href="<?php echo $navigation['previous']; ?>">
        <span class="previous-icon"></span><span>Previous</span>
    </a>
</div>

My attempt after Googling..

<?php if(var _GET["slider"]=="1"){ } if(_GET["slider"]=="2"){ if (strrpos(var _SERVER['REQUEST_URI'], 'my_page') !== false ) {} var navigation = {
    'previous'  : 'page1.php',
};

if ((navigation['previous']))
{

@aliasm2k Thanks for the heads up. I want to completely remove PHP from this application and turn it into static HTML with JS. — DT.DTDG, Oct 11 '13 at 02:13
Then use ajax to interact with external php file. A quick google will help — , Oct 11 '13 at 02:15
The server I need to throw the files on doesn't support PHP whatsoever. So I'm looking for a JS based solution for the above function. — DT.DTDG, Oct 11 '13 at 02:19
I have JQuery included on the page so yep that's no problem to use JQuery for this "refactor". Using it for a slider gallery — DT.DTDG, Oct 11 '13 at 02:36

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

you can get "GET" values (query string) like in this Answer
window.location.href.indexOf("my_page") != -1 , search for window.location and indexOf for further explanation

check code

var navigation = {previous:"page1.php"};
document.write('<a href="'+navigation["previous"]+'">....');`

Arrays can't have string indexes in js, you need to use objects; you can also use navigation.previous instead.

you can't mix js and html like you do with php, you have to "echo" everything using document.write or other DOM manipulation functions. For further help on these topics, search the bold parts.

edited May 23 '17 at 11:57

Community

1
1

answered Oct 11 '13 at 02:40

Quad

1,708
1
10
22

Thanks for the explanation @Quad - great to see someone happy to assist and get me to understand more about it. I'll give this a crack and accept the answer once I've resolved this. – DT.DTDG Oct 11 '13 at 02:42

score 0 · Answer 2 · answered Oct 11 '13 at 02:50

To answer your three questions:

1: Clicking something if a variable is in the URL (i.e. /page.php?slider=1): Check out this page, which details how to retrieve variables from URLs in jQuery. In short, you can do something like,

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

to get the variables from a URL, and from there you can check if a variable is set by asking getUrlvars()['slider'] == 1.

2: Matching the url and setting a class as active: You can do something like

if (window.location.href == 'http://www.example.com/page.php') {
   $('a').addClass('active');
}

3: If you're looking to create a dynamic list of links using Javascript arrays, you could do something like this:

var myLinks = {
  "link_1_title": "http://www.example.com", 
  "link_2_title": "http://www.stackoverflow.com/"
}
$.each(myLinks, function(key, val) {
    $('.navbar').append('<a href="' + val + '">' + key + '</a>');
}

For a more detailed explanation about jQuery.each, please see the jQuery doc page.

score 0 · Answer 3 · answered Oct 11 '13 at 02:59

It sounds like you've got an unholy alliance here of PHP drawing the JS and then the JS doing things. It's a recipe for disaster. Your PHP should pass your data to your JS and then let the JS do the work. Don't mix logic. Have a clean handoff.

<script>
var something = <?php echo $var ?>;
myclass = new someClass(something);
</script>

Refactoring 3 small bits of PHP function into JS - array, if empty and matching url?

3 Answers3