Passing parameters from Repeater to javascript function

Hello,
I have a Repeater in a aspx page. Need to pass Repeater values as parameters to a javascript (or jquery) function and that javascript function should return a string. I have troubles with syntax or don't know if it's possible.

<Head>
  <script language="javascript" type="text/javascript">
      function f_observ(observ, date1) {

              return '<span style=''color:Firebrick''>' || observ || '</span>';
      }

  </script>
</Head>

<body>
  <asp:Repeater ID="Repeater1" runat="server" EnableViewState="False">
      <ItemTemplate>
          <tr >
              <td >
  
                  <%# javascript:f_observ( Container.DataItem.observ, Container.DataItem.Date1); %>
              </td>
          </tr>
      </ItemTemplate>
  </asp:Repeater>
</body>

Open in new window


I dont get value of field "observ" nor either could call jquery function.

I only get results like :
return javascript:f_observ();'
LVL 1
miyahiraAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
What are you trying to achieve?
<td >
    <%# javascript:f_observ( Container.DataItem.observ, Container.DataItem.Date1); %>
</td>

Open in new window

This is not going to do anything - the javasript: prefix is usually used when handling an event like a click on an <a> element.
It looks like you are trying to do server side binding to client side code which is not going to work.

Can you explain what your javascript function is going to do - why for instance can you not render the <span> out as part of the repeater - why do you need it to be returned from javascript.

Can you also explain what you were hoping to see with the above code.
0
miyahiraAuthor Commented:
Sorry for not being clear.
Javascript function should return a string , depending on parameter date1  and modifying parameter observ.

<script language="javascript" type="text/javascript">
  function f_observ(observ, date1) {
           if (date1 > '01/08/2015') {
                         return '<span style=''color:Firebrick''>' || observ || '</span>';
                         }
           else          {
                           return observ;
                         }
  }
</script>

Yes, this can be accomplished with server side function, but I was wondering if it could be possible to do with client side, javascript or jquery.
0
Julian HansenCommented:
if it could be possible to do with client side, javascript or jquery.
Yeees you can but you have to ask if you should - you can walk on your hands if you want to - not always the most practical solution.

JavaScript should be used to manipulate the page dynamically based on events that happen in the browser. Using it to fill in content that could be server side is generally not the right application - although there are instances where it is required.

Remember - a page is rendered out by your ASPX script - which then terminates. The page is loaded into the browser which then renders the page, downloads any external resources and runs any script that is due to run either directly or at page load.

If you want to fill in the values of your cell with javascript (assuming this is a definite requirement) - what you would do is create a javascript function to run on page load. This script would then iterate through the table created by your repeater and fill in the values that are required. If each cell needs specific values then your repeater would write these out as data attributes as part of the table cell i.e.

<td data-observ="<%= Container.DataItem.observ%>" data-date1="<%= Container.DataItem.Date1%>">

Open in new window

As your javascript function iterates through the target elements it pulls these values and uses them to construct the output (with jQuery it would be something like this)
<script>
$(function() {
  // VARIABLE TO STORE ID OF REPEATER 
  var repeater ='#<%= Repeater1.ClientId%>';

  // VARIABLE TO STORE REFERENCE DATE
  var compare = new Date('01/08/2015');

  // LOOP THROUGH CELLS IN REPEATER
  $('td', repeater).each(function() {

    // GET THE observ VALUE
    var observ= $(this).data('observ');

   // GET THE date1 VALUE
    var date1 = $(this).data('date1');
    var jsDate = new Date(date1);

    // DO THE COMPARISON AND THE OUTPUT
    if (jsDate > compare) {
      $(this).html('<span style="color:Firebrick">' + observ + '</span>');
    }
    else {
      $(this).html(observ);
    }
  });
});
</script>

Open in new window

Sample here. The sample demonstrates how the script works on the client side. It assumes that the repeater code has already run and produced the table.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
miyahiraAuthor Commented:
Thanks Julian. Very illustrative.
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.