?
Solved

Javascript Refer to FormView

Posted on 2009-12-17
13
Medium Priority
?
502 Views
Last Modified: 2013-11-08
Trying to setup a popup calendar on a FromView contained in a MasterPage webpage.  See the code.  How do I refer to a textbox within a formview in javascript?
This works on MasterPage where UserContent is the content placeholder and txtEndDate is the textbox.
<a onclick="showCalendarControl(ctl00_UserContent_txtEndDate)" href="#">

Tried this within a formview but did not work
<a onclick="showCalendarControl(ctl00_fvLog_dDateNeededTextBox)" href="#">

Open in new window

0
Comment
Question by:cadwal01
  • 7
  • 6
13 Comments
 
LVL 11

Expert Comment

by:five22bags
ID: 26072045
Your dDateNeededTextBox is a server-side control within a server-side control within another server-side control. Your best bet is to add that OnClick at runtime from your codebehind in your Page_Load event, like this:

protected void Page_Load(object sender, EventArgs e)
    {
        System.Web.UI.HtmlControls.HtmlAnchor myAnchor = FormView1.FindControl("myAnchor") as System.Web.UI.HtmlControls.HtmlAnchor;
        myAnchor.Attributes.Add("onclick", "showCalenderControl('" + myTextBox.ClientID + "')");
    }

Open in new window

0
 
LVL 11

Expert Comment

by:five22bags
ID: 26072052
Also, if that textbox is in the FormView, use the same FormView.FindControl method to get the object and access its ClientID.
0
 

Author Comment

by:cadwal01
ID: 26072523
tried the code.  issue is do I put it on page_load or elsewhere.  The textbox and img are on the insert template of the formview.  When I switch to insert and put code against the databound for the formview I get the textbox reference back but not the img reference.
Dim myAnchor As System.Web.UI.HtmlControls.HtmlAnchor = TryCast(fvLog.FindControl("img1"), System.Web.UI.HtmlControls.HtmlAnchor)
            Dim myTextbox As TextBox = Nothing

            myTextbox = TryCast(fvLog.FindControl("dDateNeededTextBox"), TextBox)

If Not myAnchor Is Nothing AndAlso Not myTextbox Is Nothing Then
                myAnchor.Attributes.Add("onclick", "showCalenderControl('" & myTextbox.ClientID & "')")
            End If

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 11

Expert Comment

by:five22bags
ID: 26072587
Try putting that code into your FormView_ModeChanging event instead of the Page_Load. Also, could you post your InsertItemTemplate for me? Thanks.
0
 

Author Comment

by:cadwal01
ID: 26072712
Insert template is long...Here are header and specific fields
<InsertItemTemplate>
<table width="100%">
<tr>
<td>Start Date:</td>
<td style="width:5px;"></td>
<td>
<table>
<tr>
<td> 
<asp:TextBox ID="dDateNeededTextBox" runat="server" Text='<%# Bind("dStartDate", "{0:d}") %>'></asp:TextBox>
</td>
<td>
<img ID="img1" border="0" src="../../images/calendar.gif" 
style="width: 20px; height: 20px" />
</td>
<td>
<span style="color: #FF0000">*</span>
</td>
</tr>
</table> 
...</InsertItemTemplate>

Open in new window

0
 
LVL 11

Expert Comment

by:five22bags
ID: 26072765
Ah, that is because your img is not a server control. To fix that, do this:


in aspx:
<img ID="img1" runat="server" border="0" src="../../images/calendar.gif" style="width: 20px; height: 20px" />
 
 
 
in your .vb:
Dim myImage As System.Web.UI.HtmlControls.HtmlImage = TryCast(fvLog.FindControl("img1"), System.Web.UI.HtmlControls.HtmlImage )

Open in new window

0
 

Author Comment

by:cadwal01
ID: 26073212
Still not working.  It is recognizing both controls now and is firing the attributes.add code without exception.

Perhaps textbox id still not being passed correctly?
function showCalendarControl(textField) {
  calendarControl.show(textField);
}

this.show = show;
  function show(field) {
  
    // If the calendar is visible and associated with
    // this field do not do anything.
    if (dateField == field) {
      return;
    } else {
      dateField = field;
    }

    if(dateField) {
      try {
        var dateString = new String(dateField.value);
        var dateParts = dateString.split("-");
        
        selectedMonth = parseInt(dateParts[0],10);
        selectedDay = parseInt(dateParts[1],10);
        selectedYear = parseInt(dateParts[2],10);
      } catch(e) {}
    }

    if (!(selectedYear && selectedMonth && selectedDay)) {
      selectedMonth = getCurrentMonth();
      selectedDay = getCurrentDay();
      selectedYear = getCurrentYear();
    }

    currentMonth = selectedMonth;
    currentDay = selectedDay;
    currentYear = selectedYear;

    if(document.getElementById){

      calendar = document.getElementById(calendarId);
      calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);

      setElementProperty('display', 'block', 'CalendarControlIFrame');
      setProperty('display', 'block');

      var fieldPos = new positionInfo(dateField);
      var calendarPos = new positionInfo(calendarId);

      var x = fieldPos.getElementLeft();
      var y = fieldPos.getElementBottom();
      x=x+155;
      y=y-22;
      setProperty('left', x + "px");
      setProperty('top', y + "px");
      setElementProperty('left', x + "px", 'CalendarControlIFrame');
      setElementProperty('top', y + "px", 'CalendarControlIFrame');
      setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
      setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
    }
  }

Open in new window

0
 
LVL 11

Expert Comment

by:five22bags
ID: 26073306
I noticed in your original showCalendarControl() method you were passing in the object itself rather than the object identifier. Because we have to pass in the text identifier (based on ClientID) you need to pick up the object based on that:

function showCalendarControl(textField) {
  var fieldObj = document.getElementById(textField);
  calendarControl.show(fieldObj);
}

Open in new window

0
 

Author Comment

by:cadwal01
ID: 26073839
So this needs to go in the javascript correct.  Thanks.
0
 
LVL 11

Expert Comment

by:five22bags
ID: 26073856
Yep
0
 

Author Comment

by:cadwal01
ID: 26096886
Not working.  I tried an alternative and it did not work either.  The onclick is screwing it up.  Both objects are being found.  When the button is displayed there is no image and it does not accept clicks.
<asp:Image ID="img1" runat="server" border="0" src="../../images/calendar.gif" style="width: 20px; height: 20px" />

 'Need to mount the dateboxes for javascript popups
            Dim myImage As Image = TryCast(fvLog.FindControl("img1"), Image)

            Dim myTextbox As TextBox = Nothing

            myTextbox = TryCast(fvLog.FindControl("dDateNeededTextBox"), TextBox)

            If Not myImage Is Nothing AndAlso Not myTextbox Is Nothing Then
                myImage.Attributes.Clear()
                myImage.Attributes.Add("onclick", "showCalenderControl('" & myTextbox.ClientID & "')")
            End If

Open in new window

0
 
LVL 11

Accepted Solution

by:
five22bags earned 2000 total points
ID: 26097028
Alright, what about using an asp:ImageButton, do you have any objections to that?

<asp:ImageButton ID="img1" runat="server" border="0" ImageUrl="~/images/calendar.gif" style="width: 20px; height: 20px" />

Open in new window

0
 

Author Comment

by:cadwal01
ID: 26097856
Went back to orignial code (new sggestion didn't work).  Tried the following to refer to the FormView

ctl00_UserContent_fvLog_dDateNeededTextBox

It worked.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
An ASP.NET Web Form User Control is not newly introduced in ASP.NET. In fact, it was an old technology yet still playing a role to generate web content, especially when we want to use it to have a better and easy way to control part of the web conte…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question