CODEWITHSUNDEEP
javascriptjqueryhtml
user2848299
user2848299

Reputation:

How to update/overwrite the page title dynamically?

I m using an online template in which I removed various things to make my own modifications. There are two pages, The index page takes a search query as input field and the results page displays the results of on this query. Everythying is working fine but due to the modifications I did, the results page has title as

"undefined - The search results"

This undefined is supposed to display the input string from index page. But I want that It should have the title as just "The search results"

What I could do so that it overwrites this title and just has the title I require.

I have tried

document.title = "This is the new page title.";

Under the html head as you can see in script.

But after doing so It displays "undefined - This is the new page title. as title.

I want to remove that undefined.

This is the HTML code for results page, if you can find out whats making the title so.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

        <title>The Search results</title>
    <meta content="Mamma" name="description"/>
    <meta content="Mamma" name="keywords"/>
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" /> 

    <link media="all" rel="stylesheet" href="/static/results/style.css">
    <!-- Thumbnail-->
    <link media="all" rel="stylesheet" href="/static/component.css">
    <!-- Thumbnail_End-->

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,300italic,600' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">window.jQuery || document.write('<script src="http://mamma.com/static/front/js/jquery-1.8.3.min.js"><\/script>')</script>
    <script type="text/javascript" src="http://mamma.com/static/front/js/jquery.main.js"></script>


    <!--<script type="text/javascript" src="http://mamma.com/static/front/js/jquery.cookies.2.2.0.min.js"></script>-->
    <script type="text/javascript" src="http://mamma.com/static/front/js/scrolltop.js"></script>

    <!-- Thumbnail-->
    <script type="text/javascript" src="http://mamma.com/static/front/js/modernizr.js"></script>


    <!--[if IE]><script type="text/javascript" src="js/ie.js"></script><![endif]-->
    <script language="javascript"type="text/javascript">
document.title = "This is the new page title.";
</script>
</head>

<link media="all" rel="stylesheet" href="http://mamma.com/static/front/css/stylemasonry.css">
<script type="text/javascript" src="http://mamma.com/static/front/js/results.js?v=1388742739"></script>



<script type="text/javascript" src="http://mamma.com/static/front/js/common.js"></script>

<!-- Make sure jQuery is loaded. Loads Jquery from Google if not loaded by a plugin. -->
<script type="text/javascript" src="http://mamma.com/static/front/js/jQueryLoader.js"></script>
<!-- SUPERFISH -->
<script type="text/javascript" src="http://mamma.com/static/front/js/hoverIntent.js"></script>
<script type="text/javascript" src="http://mamma.com/static/front/js/superfish.js"></script>


<!-- Flexslider -->
<link media="all" rel="stylesheet" href="http://mamma.com/static/front/css/flexslider.css">
<script type="text/javascript" src="http://mamma.com/static/front/js/jquery.flexslider.js"></script>

<style id="myStyle">
    </style>

    <!-- wrapper -->
    <div id="wrapper">
    <div id="static" size="big">
      <div id="topspace" style="height: 330px;">
      </div>
        <!-- header -->
        <header id="header" class="vcard">
                    <!-- logo -->


                    <style type="text/css">
                    .result_logo{
                        background: url(/static/logos_1.png);
                        background-repeat: no-repeat;
                        /*height: 12px;*/
                        background-size : 100% 100%;
                        float: left;
                        height: 40px;
                        max-width: 230px;
                        width: 230px;
                        cursor: pointer;
                         margin: 0px 3.12% 0 0;
                    }
                    .result_slogo{
                        background: url(http://mamma.com/static/front/images/slogo.png);
                        background-repeat: no-repeat;
                        background-size : 100%;
                        cursor: pointer;
                        height: 42px;
                        margin: 0 22px 0 15px;
                        width: 25px;
                    }
                </style>
                    <a href="http://localhost:8080/ms"><div id="logo" class="result_logo"></div></a>
                    <a href="http://localhost:8080/ms"><div id="logo" class="result_slogo"></div></a>



            <!-- user navigation -->
            <nav class="user-nav">
                <ul>
                    <li><a href="#" class="help">help</a></li>
                    <li><a href="#" class="settings">settings</a></li>
                </ul>
            </nav>
            <style type="text/css">
            .local_text{
                flaot:left;
                border:1px solid red;
            }
            </style>
            <!-- form search -->


            <form id="get_value" action="{% url 'diablo:results' %}" class="form-search" method="get">
                    {% csrf_token %}
                    <fieldset>
                        <input type="text" id="pre_text" name="q" autocomplete="on" value="{{ query }}" class="pre_text">
                        <!--<input type="text" id="pre_test" name="what" autocomplete="on" value="{{ query }}" class="local_what" 
                        onblur=" if(this.value== '') this.value='What?';" onfocus=" if(this.value=='What?') this.value=''; "
                        value="What?" style="display: none;" > 

                        <input type="text" id="pre_where" name="where" autocomplete="on" class="local_where" 
                        onblur=" if(this.value== '') this.value='Where?';" onfocus=" if(this.value=='Where?') this.value=''; "
                        value="" style="display: none;">
                        -->

                        <input type="submit" id="search" value="search">

                    </fieldset>
                </form>

            <div style="clear:both"></div>

        </header>

    </div>

        <!-- twocolumns -->


        <div id="twocolumns">
            <!-- aside -->
            <div class="aside">
                <!-- search areas -->
                <!--<div class="search-areas">

                <a href="#" class="opener"><span>Web</span></a>
                    <div class="drop">
                        <strong class="title">Search areas:</strong>
                        <ul>--><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                            <!--
                              <li  class="active"><a class="we" href="javascript:void(0);">Web</a></li>

                             <li ><a class="we" href="javascript:void(0);">News</a></li>

                             <li ><a class="we" href="javascript:void(0);">Images</a></li>

                             <li ><a class="we" href="javascript:void(0);">Videos</a></li>

                              <li ><a class="we" href="javascript:void(0);">Local</a></li>
                        </ul>
                    </div>
                </div>-->


            </div>
            <div class="holder">
                <!-- search tabs-->
                <!--<div id="prev_next">
                    <div class="small_screen_prev">
                        <div id="prev" style="display:none;"> <img src="http://mamma.com/static/front/images/prev_arrow.png" alt="" /></div>
                    </div>
                    <div class="search-tabs"> 
                        <a href="#" class="opener">search tabs</a>
                        <div class="drop"> <strong class="title">Search tabs:</strong>
                            <div id="tab">
                                <ul></ul>
                            </div>
                            <div style="clear:both"></div>
                        </div>
                    </div>
                    <div class="small_screen_next">
                        <div id="next" style="display:none;"><img src="http://mamma.com/static/front/images/next_arrow.png" alt="" /></div>
                    </div>

                </div>-->
                <!-- search content -->
                 <section class="search-content tab-content" id="mamma_tab_content">

                <h2 style="color:#888; font-size: 150%; margin:20px 0 20px 20px; overflow:hidden;float:left">
                    Meta Search Engine Results
                </h2><br>{% load customfilter %}
                {% for a in r %}
                <div id="org_section_id_20140421181147" class="results-only" style="margin:0 0 0 20px;overflow:hidden;float:left">
                 <div class="midresult" id="main20140421181147">
                    <h3>
                        <a href="{{ a.0 }}">{{ a.1.title|safe }}</a>
                    </h3>   
                    <h4> 
                        <a href="{{ a.0 }}">{{ a.0 }}</a>
                    </h4>
                <p>{{ a.1.desc|safe }}<br/><br/><font size=5 color="green">Google Rank: {{ a.1.GRank|actualRank }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Yahoo Rank: {{ a.1.YRank|actualRank }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Bing Rank: {{ a.1.BRank|actualRank }}</font></p>

                </div>
                </div>
                {% endfor %}
                 <div class="mamma_tab_content mtabs-1">  
                 </div>

                 </section>

            <div id="searches">
            <div class="search-wrap" id="search-wrap">
                <section class="search-content tab-content">
                </section>
            </div>
                </div>

            </div>

                <!--<div style="width: 100%; padding-bottom: 10px; clear: both; height: 100%; display: none;" id="loadmoreajaxloader">
                <center><img src="http://mamma.com/static/front/images/ajax-loader.gif"></center>
                </div>-->

        </div>
    </div>
    </div>

    <script language="javascript"type="text/javascript">
    var ispace_txtElements = ['result_text'];
    var ispace_brand = '';
    </script>
    <script type="text/javascript" src="http://mamma.com/static/front/js/ptwidget-1.0.js"></script>
        <!-- footer -->


<footer id="footer">
                <div class="row">
                <span class="copy"><p> Developed By Mohit & Jason  </p></span>
                    <ul class="footer-nav">
                        <li><a href="#">  About Meta Search Engine</a></li>
                    </ul>
                </div>
</footer>

<<script>
$('.active').prev().removeClass( "pagenum" );
$('.active').next().removeClass( "pagenum" );
</script>               

</body>

 </html>

Upvotes: 3

Views: 2758

Answers (4)

Milind Anantwar
Milind Anantwar

Reputation: 82231

Try this:

 $('title').html($('title').html().replace("undefined -",""));

using javascript:

 document.title = document.title.replace("undefined -","")

You need to also ensure that you wrap the code in DOM ready:

 $(document).ready(function(){
   $('title').html($('title').html().replace("undefined -",""));//or document.title = document.title.replace("undefined -","")
 })

Upvotes: 0

nuss
nuss

Reputation: 1320

Try this at the bottom of the page

$( document ).ready(function() {
  document.title = "This is the new page title."
});

Upvotes: 2

h0lyalg0rithm
h0lyalg0rithm

Reputation: 150

Please try this document.title = "Title here"

Upvotes: 0

Mayank Pathak
Mayank Pathak

Reputation: 3681

You should use. 

document.title = "This is the new page title."

But this is something not SEO compliant.

Upvotes: 2

Related Questions