CODEWITHSUNDEEP
javascriptphpjquery
Fabio
Fabio

Reputation: 336

location.href doesn't work (reload the same page)

I'm trying to load a page in the same tab using Jquery but the page reload. So to debug I tried to open the page in a new tab and works well, I tried also to open a general page like the Google's one using location href but the page just reload. Checking the web server logs I see:

::1 - - [13/Aug/2020:23:04:27 +0200] "GET /search.php?q=zagor HTTP/1.1" 200 10717
::1 - - [13/Aug/2020:23:04:27 +0200] "GET /index.php HTTP/1.1" 200 52293

So it seems that after the call there is a call to the same location that overwrite the first, but I can't find where it happens.

Jquery function:

$('.site-btn').on('click', function() {
    var query = "search.php";
    var qValue = $("input[id='q']").val();
    
    if (qValue.length != 0) {
        query = query + "?q=" + qValue;
    }
    var filterByValue = $("input[name='filterby']:checked").val();
    if (filterByValue != null) {
        query = query + "&by=" + filterByValue;
    }
    var filterLimitValue = $("input[name='filterlimit']:checked").val();
    if (filterLimitValue != null) {
        query = query + "&limit=" + filterLimitValue;
    }
    var filterOrderValue = $("input[name='filterorder']:checked").val();
    if (filterOrderValue != null) {
        query = query + "&order=" + filterOrderValue;
    }
    location.href = query;
});

And this is the PHP page:

<?php session_start();?>
<!DOCTYPE html>
<html>

<head>
<?php
    include("includes/head.php");
?>
</head>

<body>
<!-- Page Preloder -->
<div id="preloder">
    <div class="loader"></div>
</div>

<!-- humburger Begin -->
<div class="humburger_menu_overlay"></div>
<div class="humburger_menu_wrapper">
    <div class="humburger_menu_logo">
        <a href="#"><img src="img/logo.png" alt=""></a>
    </div>
    <div class="humburger_menu_widget">
        <div class="header_top_right_auth">
            <?php 
                if(isset($_SESSION['logged'])) {    
                    echo '<li><a href="logout.php" ><i class="fa fa-user"></i>Logout</a></li>';
                }
                else {
                    echo '<li><a href="access.php" ><i class="fa fa-user"></i>Sign Up / Login</a></li>';
                }
            ?>
        </div>
    </div>
    <nav class="humburger_menu_nav mobile-menu">
        <ul>
            <li class="active"><a href="./index.php">Home</a></li>
            <li><a href="./search.php">Advanced Search</a></li>
            <li><a href="./contact.php">Contact</a></li>
            <?php
                if(isset($_SESSION['logged'])) {    
                    echo '<li><a href="#"><i class="fa fa-heart"></i>MyComics</a></li>';
                }
            ?>
        </ul>
    </nav>
    <div id="mobile-menu-wrap"></div>
    <div class="humburger_menu_contact"></div>
</div>
<!-- humburger End -->

<!-- Header Section Begin -->
<header class="header">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="header_logo">
                    <a href="./index.php"><img src="img/logo.png" alt=""></a>
                </div>
            </div>
            <div class="col-lg-7">
                <nav class="header_menu">
                    <ul>
                        <li id="index_page"><a href="./index.php">Home</a></li>
                        <li id="search_page"><a href="./search.php">Advanced Search</a></li>
                        <li id="contact_page"><a href="./contact.php">Contact</a></li>
                        <?php 
                            if(isset($_SESSION['logged'])) {    
                                echo '<li><a href="logout.php" ><i class="fa fa-user"></i>Logout</a></li>';
                            }
                            else {
                                echo '<li><a href="access.php" ><i class="fa fa-user"></i>Sign Up / Login</a></li>';
                            }
                        ?>  
                    </ul>
                </nav>
            </div>
            <div class="col-lg-2">
                <div class="header_menu">
                    <ul>
                        <li></li>
                        <?php
                        if(isset($_SESSION['logged'])) {    
                                echo '<li id="mycomics_page"><a href="mycomics.php"><i class="fa fa-heart"></i>MyComics</a></li>';
                            }
                        ?>
                    </ul> 
                </div>
            </div>
        </div>
        <div class="humburger_open">
            <i class="fa fa-bars"></i>
        </div>
    </div>
</header>
<!-- Header Section End -->

<!-- Hero Section Begin -->
<section class="hero hero-normal">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="hero_categories">
                    <div class="hero_categories_all">
                        <i class="fa fa-bars"></i>
                        <span>Latest Series</span>
                    </div>
                    <ul>
                    <?php
                        require('includes/config.php');
                        $query="SELECT * FROM italiancomics group by serie_title ORDER BY issue_date DESC LIMIT 10";
                        $res=mysqli_query($conn,$query);                    
                        while($row=mysqli_fetch_assoc($res)) {  
                            $valueformatted = str_replace("_"," ",$row["serie_title"]);
                            $valueformatted = str_replace("&","&amp", $valueformatted);
                        echo '<li><a href="search.php?by=serie_title&q='.$row['serie_title'].'">'.$valueformatted.'</a></li>';          
                        }           
                        mysqli_close($conn);
                    ?>
                    </ul>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="hero_search">
                    <div class="hero_search_form">
                        <form>
                            <input type="text" id="q" placeholder="What comic are you searching?">
                            <button class="site-btn">SEARCH</button>
                        </form>
                    </div>      
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Hero Section End -->


<!-- Featured Section Begin -->
<section class="featured spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title">
                    <h2>Latest Comics Added:</h2>
                </div>
                
            </div>
        </div>
        <div class="row featured_filter">
        <?php
                require('includes/config.php');
                $query="SELECT * FROM italiancomics ORDER BY issue_date DESC LIMIT 40";
                $res=mysqli_query($conn,$query);                    
                while($row=mysqli_fetch_assoc($res)) {  
                    echo '<div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="featured_item">
                                <div class="featured_item_pic" >
                                    <a href="detail.php?id=' .$row['link_albo']. '">
                                        <img src="'.$row['issue_link_image']. '" width="200" height="270" class="center">
                                    </a>
                                    <ul class="featured_item_pic_hover">';
                                        if(isset($_SESSION['logged'])) {
                                            $totalq="SELECT count(*) \"total\" FROM italiancomics INNER JOIN user_fav_comics ON italiancomics.link_albo=user_fav_comics.comic WHERE italiancomics.link_albo=\"" . $row['link_albo'] ."\" AND user_fav_comics.u_unm=\"" . $_SESSION['unm'] . "\" LIMIT 1";
                                            $totalres=mysqli_query($conn,$totalq) or die("Can't Execute Query...");
                                            $totalrow=mysqli_fetch_assoc($totalres);
                                            if($totalrow['total']==1){
                                                echo '<li><a id="heart_index" style="color:#7fad39;"><i class="fa fa-heart"></i></a></li>';
                                            }
                                            else{
                                                echo'<li><a id="heart_index"><i class="fa fa-heart"></i></a></li>';
                                            }
                                            $totalq="SELECT count(*) \"total\" FROM italiancomics INNER JOIN user_read_comics ON italiancomics.link_albo=user_read_comics.comic WHERE italiancomics.link_albo=\"" . $row['link_albo'] ."\" AND user_read_comics.u_unm=\"" . $_SESSION['unm'] . "\" LIMIT 1";
                                            $totalres=mysqli_query($conn,$totalq) or die("Can't Execute Query...");
                                            $totalrow=mysqli_fetch_assoc($totalres);
                                            if($totalrow['total']==1){
                                                echo '<li><a style="color:#7fad39;"><i class="fa fa-book"></i></a></li>';
                                            }
                                            else{
                                                echo'<li><a><i class="fa fa-book"></i></a></li>';
                                            }
                                            $totalq="SELECT count(*) \"total\" FROM italiancomics INNER JOIN user_bought_comics ON italiancomics.link_albo=user_bought_comics.comic WHERE italiancomics.link_albo=\"" . $row['link_albo'] ."\" AND user_bought_comics.u_unm=\"" . $_SESSION['unm'] . "\" LIMIT 1";
                                            $totalres=mysqli_query($conn,$totalq) or die("Can't Execute Query...");
                                            $totalrow=mysqli_fetch_assoc($totalres);
                                            if($totalrow['total']==1){
                                                echo '<li><a style="color:#7fad39;"><i class="fa fa-archive"></i></a></li>';
                                            }
                                            else{
                                                echo'<li><a><i class="fa fa-archive"></i></a></li>';
                                            }                                            
                                        }
                                        else {
                                            echo '<li><a><i class="fa fa-heart"></i></a></li>';
                                            echo '<li><a><i class="fa fa-book"></i></a></li>';
                                            echo '<li><a><i class="fa fa-archive"></i></a></li>';
                                        }
                    echo            '</ul>
                                </div>
                                <div class="featured_item_text">
                                    <a href="detail.php?id=' .$row['link_albo']. '">
                                        <h5>'.$row['issue_title']. '</h5>
                                    </a>
                                </div>
                            </div>
                        </div>';
                }           
                mysqli_close($conn);
            ?>
        </div>
    </div>
</section>
<!-- Featured Section End -->

<!-- Footer Section Begin -->
<?php
    include("includes/footer.inc.php");
?>
<!-- Footer Section End -->
</body>
</html>

Upvotes: 0

Views: 173

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65806

In your HTML, you have:

<form>
  <input type="text" id="q" placeholder="What comic are you searching?">
  <button class="site-btn">SEARCH</button>
</form>

The default type of button in a form is submit, so when you click it, you are causing the form to submit, which is causing the page reload. The solution is to specify the button as a regular button with:

<button type="button" class="site-btn">SEARCH</button>

Another solution would be to just remove the <form> and </form> tags because you aren't actually submitting data anywhere. Then you can leave the button alone because it won't be in a form anymore, so no submit will take place.

Upvotes: 0

Kresimir Pendic
Kresimir Pendic

Reputation: 3614

Try to pass event into function and then event.preventDefault() it, like this // first line and then do your logic

$('.site-btn').on('click', function( event ) {
    event.preventDefault();
    // ...
    var query = "search.php";
    var qValue = $("input[id='q']").val();
    // ..
    location.href = query;
});

Upvotes: 1

Related Questions