Javascript can't find ID of div inside user control - javascript

I have coda slider that i put inside a user control (ascx file) and it is working perfectly on a test page.
But when I put the same user control in a content place holder in a test page that is based on a master page it stops working correctly. It appears that the javascript function can't correctly identify the ID of the DIV now that it inside of a content place holder. I have read some other links but they seem to be slightly different situations and I have tried using document.getElementById, but not sure if I am on the right track or just messing up with the syntax. and I have also tried putting ct100_cpMC_ in front of the id.
<%# Page Title="TestPage - Test User Control" Language="C#" MasterPageFile="MasterPage.master" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="_TestPage" %>
<%# Register Src="~/UserControls/WhatCustomersAreSaying.ascx" TagPrefix="uc1" TagName="WhatCustomersAreSaying" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" type="text/css" media="screen" href="css/coda-slider.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.coda-slider-3.0.min.js"></script>
<script>
$(function () {
$('#slider-id').codaSlider({
autoSlide:true,
autoHeight:false
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMC" Runat="Server">
<uc1:WhatCustomersAreSaying runat="server" ID="WhatCustomersAreSaying" />
</asp:Content>
Inside my user control is a DIV with the ID of "slider-id" that the javascript function needs to find.
As I mentioned before, I am not sure if I need to use document.getElementById and how, or if there is a simpler way by prepending something to ID within quotes $('#slider-id') so the javascript function knows the ID it is looking for is within a content place holder.

I had a friend help me and this is what worked. I knew I needed the (document).ready but did not have the syntax correctly. This is what fixed my problem,
<script>
$(document).ready(function ($) {
$('#slider-id').codaSlider({
autoSlide:true,
autoHeight:false
});
});
</script>

Related

How to move cursor at first character positon using jquery mask plugin?

I have searched a lot and found out same kind of question but not exactly same and didn't find satisfactory answer. So thought, Should ask that more specific.
Using Jquery mask plugin, I would like my cursor at the beginning always no matter which positon I click. If I click into that textbox, cursor should be at the beginning. with my below code. wherever I click into the textbox, cursor gets that particular positon. How to avoid that?
<asp:TextBox ID="tbMobile" CssClass="ContactNumber" runat="server" onfocus="GetPhoneMask();" MaxLength="15" placeholder="555-555-5555" ValidationGroup="Application"></asp:TextBox>
function GetPhoneMask() {
$(".ContactNumber").mask("999-999-9999", { autoclear: false });
}
Updated:
Live link https://dotnetfiddle.net/Gipb8h
I changed the phone class name.
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormsPW._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>
<script type="text/javascript">
$(function () {
$('.phone_us').mask('(000) 000-0000');
})
//took out
//function GetPhoneMask() {
// $(".ContactNumber").mask("999-999-9999", { autoclear: false });
//}
</script>
<%-- took out onfocus="GetPhoneMask();"--%>
<asp:TextBox ID="tbMobile" CssClass="phone_us" runat="server" MaxLength="15" placeholder="555-555-5555" ValidationGroup="Application"></asp:TextBox>
</asp:Content>

Adding ASP.Net tags from javascript, why does this work?

I got an ASPX page with the folowing code behind
public partial class test : Page
{
protected void test(object sender, EventArgs e)
{
throw new Exception("test");
}
}
And the following ASPX code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Thumbnail</title>
</head>
<body>
<form id="form1" runat="server">
<div id="buttonTarget">
</div>
</form>
</body>
</html>
If I run the following javascript a button is added to the page:
$('#buttonTarget').html('<asp:Button runat="server" ID="tst" CssClass="buttons" OnClick="Test" Text="Test"/>');
The buttons shows the same way as an asp tag shows in element inspector.
And when I click the button the server sided function is called and the site breaks with the "test" exception
I know this isn't good practice but I want to know why this works. Why does this button call the server sided function and why is it displayed as a normal button ?
--EDIT--
The aspx code was a simplified version. The actual code used a gridview control and used javascript to insert rows in the table. These rows hold the tags.
Expanding on what #Mamun was probably saying, when the page is executing on the server, it's seeing the asp tag in the JS string and translating it into the appropriate HTML. If you view source on your page in the browser, you'll probably see something like this instead of the ASP tag in your JS call:
$('#buttonTarget').html('<input type="submit" name="ctl00$MainContent$tst" value="Test" id="MainContent_tst" class="buttons" />');

pageLoad function in page and masterpage

I'm trying to use function pageLoad() (asp.net related JS event)
I have one in the masterpage, and one in a different page.
For some reason they don't want to be friends... only one is called.
When I cancel one, the other one is called so I don't see a problem there...
Any idea?
Master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="....." Inherits="......." %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script>
function pageLoad() {
alert('masterpage load');
CallStyledArrowSelect();
}
</script>
//more irrelevant code
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
And in the content page:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
function pageLoad(){
alert('hi i'm not working');
}
//more code...
OK,
thanks to andrey.shedko for the link,
Apparently it is not possible to have 2 pageLoad functions - one in the masterpage and one in the content page.
The solution suggested there is making another function on the content page and call it if it exist:
function pageLoad() {
// Master pageLoad() code.
// If function contentPageLoad exists, execute it.
if(typeof contentPageLoad == 'function')
contentPageLoad();
}

How do I put javascript programmatically into <head> block?

I need to put some javascript absolutely in the <head> block of the page -- it must execute before the rest of the page because a possible outcome of the script is to redirect to a different page.
However, when I use RegisterClientScriptInclude (to put some jQuery in there) and RegisterClientScriptBlock for my code which uses the jQuery, it puts it near the top of the <body> block, and it does not execute. I can't see a way to programmatically put this javascript into the <head> block -- it must be programmatically because sometimes I don't want it there, and sometimes I do.
I've tried to see if I can directly reference Content1, the ID of the asp:Content element corresponding to the <head> block, but no go.
Just in case anyone thinks that RegisterStartupScript might work: it doesn't. It puts it lower in the <body> block than everything else. Oddly enough.
Want some code? Here:
Type csType = this.GetType();
ClientScriptManager clientScript = Page.ClientScript;
if (!clientScript.IsClientScriptIncludeRegistered(jqueryScriptName))
{
clientScript.RegisterClientScriptInclude(jqueryScriptName, "~/Scripts/jquery-1.7.1.min.js");
}
if (!clientScript.IsClientScriptBlockRegistered(citrixDetectorScriptName))
{
clientScript.RegisterClientScriptBlock(csType, citrixDetectorScriptName, citrixDetectorScriptText, true);
}
By popular demand, how I detect the ActiveX component. This is JScript.
try {
var icaObj = new ActiveXObject("Citrix.ICAClient");
var CitrixVersion = icaObj.ClientVersion.split(".");
var MajorMinorVersion = CitrixVersion[0] + "." + CitrixVersion[1];
if (MajorMinorVersion == "11.0") {
// Citrix is OK
}
else {
window.navigate("WrongCitrix.aspx?Citrix=" + MajorMinorVersion);
}
}
catch (e) {
window.navigate("NoCitrix.aspx");
}
If the ActiveX component is not present, then redirection is a page that tells the user they need to install it. If the ActiveX component is any other version than 11.0, then the redirect is to a page that explains this and how to deal with the situation (backrevving for example).
An prior check during page load checks to make sure they have Internet Explorer v4 thru v9, because any other version will not work with the product (and IE10+ will crash if it even tries to load v11.0 of the ActiveX component).
If I understand your question, you can insert PlaceHolder control wherever you want inside the page.
<%# Page Language="C#" AutoEventWireup="True"
CodeBehind="Default.aspx.cs" Inherits="WebApplicationTelerik.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<asp:PlaceHolder runat="server" ID="PlaceHolder1"></asp:PlaceHolder>
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
PlaceHolder1.Controls.Add(new LiteralControl(
"<script type=\"text/javascript\"> alert('here'); </script>"));
}
document.GetElementsByTagName("head")[0].appendChild( newScriptNode );
or jQuery
$("head")[0].append( newScriptNode );
If you really must insert JavaScript into the head tag, you can just make it an ASP.NET control and insert a control into it's child collection.
E.g. In the ASPX file:
<head runat="server" id="header">...</head>
In the code behind:
header.Controls.Add(new Literal("<script type='text/javascript'>...</script>"));
Although I do think you need to think about your process, it would be more efficient to redirect the user in the back-end before the page is rendered.
Oh and RegisterStartupScript correctly places your JavaScript after your html for increased load performance.

javascript visual studio making an object

I'm trying to just simply make an object in javascript via visual studio. My syntax inside my function that is getting called is simply:
var d = new Object();
d.id = 8;
When I launch my page from Visual Studio and click my button that fires the function that has those 2 lines of code in it, I get an error at d.id where it's showing d as undefined still. I just want a generic object that I can assign properties to. What am I missing?
There isn't much more code to show. The total function as of right now:
function btnTest_onClick() {
var d = new Object();
d.id = 8;
}
In my default.aspx I have
I removed the tags because stackoverflow doesn't seem to like them
<input id="Button1" type="button" value="button" onclick="btnTest_onClick()" />
I'm just trying to learn this stuff so I'm starting very basic and small. This doesn't really make sense to me. The function gets called just fine.
Exact error is:
JavaScript runtime error: Unable to set property 'id' of undefined or null reference
The entire HTML Page. This is literally Project->New Website, and add a button.
<%# Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/Process.js" type="text/javascript" language="javascript"> </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit www.asp.net.</p>
<p>
<input id="Button1" type="button" value="button" onclick="btnTest_onClick()" /></p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</asp:Content>

Categories

Resources