Javascript not working when added masterpage

Question

1.00/5 (1 vote)

See more:

hi all Im tring to do Jquery autocomplete textbox with multiple words separated by comma .I got source code from this blog
http://www.aspdotnet-suresh.com/2012/07/jquery-autocomplete-textbox-with.html
But when tried to add master page to this page javascript not working or autofill not appearing.can anyone point out my mistake

C#

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <link href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
    <script type="text/javascript">
        $(document).ready(function () {
            SearchText();
        });
        function SearchText() {
            $("#txtSearch").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Default.aspx/GetAutoCompleteData",
                        data: "{'username':'" + extractLast(request.term) + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                },
                focus: function () {
                    // prevent value inserted on focus
                    return false;
                },
                select: function (event, ui) {
                    var terms = split(this.value);
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push(ui.item.value);
                    // add placeholder to get the comma-and-space at the end
                    terms.push("");
                    this.value = terms.join(", ");
                    return false;
                }
            });
            $("#txtSearch").bind("keydown", function (event) {
                if (event.keyCode === $.ui.keyCode.TAB &&
						$(this).data("autocomplete").menu.active) {
                    event.preventDefault();
                }
            })
            function split(val) {
                return val.split(/,\s*/);
            }
            function extractLast(term) {
                return split(term).pop();
            }
        }
	</script>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <div class="demo">
<div class="ui-widget">
    <label for="tbAuto">Enter UserName: </label>
   <%--<input type="text" id="txtSearch" />--%>
   <asp:TextBox ID="txtSearch" runat="server" Width="300px">
</div>
   </div>

thanks and regards
Amrutha

Posted 1-Jul-13 0:14am

amritha444

Updated 1-Jul-13 0:30am

Thanks7872

v4

Add a Solution

Comments

_Amy 1-Jul-13 6:19am

What error you are getting? Can you point out your error in this block of code?

Member 11322133 23-Jul-15 6:33am

Thank You !!

amritha444 1-Jul-13 6:34am

thanks for the response
Not getting any error.Problem is autofill not appearing .its working well in page without masterpage

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mahesh Bailwal · Answer 1 · 2013-07-01T01:40:00

Solution 1

The reason for that is the id of txtSearch change when you add it to the Master Page id will be something like this “ctl00$ContentPlaceHolder1$txtSearch”. So Jquery is not able to find control with id “$txtSearch”. You can check view source of your page. You can select elements by a partial id in JQuery with syntax like below.

$("input[id*= txtSearch]")

Please refer this link for more information

selecting elements by a partial id[^]

Posted 1-Jul-13 1:40am

Mahesh Bailwal

Comments

amritha444 1-Jul-13 8:28am

thanks for the response
I tried this but not working. Tried to findout error with IE browser got error as
Object doesn't support property or method 'autocomplete'

Mahesh Bailwal 2-Jul-13 2:57am

Check Below code

<%@ Page Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="Content.aspx.cs" Inherits="WebApplication3.Content" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$("input[id*= txtSearch]").autocomplete({

source: function (request, response) {
alert('In AutoComplete ');
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetAutoCompleteData",
data: "{'username':'" + extractLast(request.term) + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
$("input[id*= txtSearch]").bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
}
</script>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div class="demo">
<div class="ui-widget">
<label for="tbAuto">Enter UserName: </label>

<asp:TextBox ID="txtSearch" runat="server" Width="300px">
</div>
</div>