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']))
{

Answer 1

1. you can get "GET" values (query string) like in this Answer

2. window.location.href.indexOf("my_page") != -1 , search for window.location and indexOf for further explanation

3. 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.

Answer 2

To answer your three questions:

1: Clicking something if a variable is in the URL (ie /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 .

Answer 3

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>