Solved

Pass Variable from Javascript to Codebehind

Posted on 2011-02-19
15
1,605 Views
Last Modified: 2012-06-27
I found a cool little jquery app that I'm trying to send data to a database with.

http://www.buildinternet.com/project/supersized/

So what I am doing is in the pageload I am calling all the images from the database.

then I need to pass the variable of all the images to the front javascript. I don't know how to do this.

 slides: [

                   < Pass Variable from codebehind here >
                              
                        ]
              };

any help would be greatly appreciated
<script type="text/javascript">
	    $(function () {
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

                   < Pass Variable from codebehind here >
					
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>

Open in new window

0
Comment
Question by:TheWebGuy38
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 3
  • +1
15 Comments
 
LVL 23

Expert Comment

by:Rajkumar Gs
ID: 34932056
Try like
var jsvariable = ‘<%=codebehindvariable %>’;

Open in new window

where codebehindvariable is a variable from code-behind

0
 

Author Comment

by:TheWebGuy38
ID: 34932273
Something like this?

but get a invalid character


<script type="text/javascript">
	    $(function () {
           var GetPhotoString = ‘<%=codebehindvariable %>’;
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

                   GetPhotoString
					
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>

Open in new window

0
 
LVL 36

Expert Comment

by:Miguel Oz
ID: 34932286
Use a hidden field in your page:
http://www.eggheadcafe.com/community/aspnet/2/10103563/get-hidden-value-from-c.aspx
e.g
Markup
<INPUT id="hidden1" type="hidden" runat="server" value="test">
C++ code behind
hidden1.value = "yourData";
js
var data = hidden1.value;
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:TheWebGuy38
ID: 34932355
Simple, makes sense

Doesn't seem to work for me though :(
<script type="text/javascript">

	    var GetPhotoString = hiddenGetPhotoString.value;

        $(function () {
	           $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

                   GetPhotoString
					
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>







aspx
<input id="hiddenGetPhotoString" type="hidden" runat="server" />



codebehind

 hiddenGetPhotoString.Value = "{image : 'slides/tower.jpg', title : 'City Clock Tower', url : 'http://www.flickr.com/photos/wumbus/4582735030/in/set-72157623876357531/'}"

Open in new window

0
 
LVL 8

Accepted Solution

by:
Anurag Agarwal earned 500 total points
ID: 34933133
hey
Create a <asp:HiddenField/> control on the web page and set it's value to the value of the variable in the code behind. Assuming you have named the control "myval", access it using the following specifier in JavaScript.
document.getElementById("<%=myval.ClientID%>").value.
0
 
LVL 23

Expert Comment

by:Rajkumar Gs
ID: 34933343
Try double quotes for my code
<script type="text/javascript">
	    $(function () {
           var GetPhotoString = "<%=codebehindvariable %>";
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

                   GetPhotoString
					
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>

Open in new window

0
 

Author Comment

by:TheWebGuy38
ID: 34934082
this is what I tried

but GetPhotoString is returning "null"

 
<script type="text/javascript">

	    //var hiddenGetPhotoString = "";
	    //var GetPhotoString = hiddenGetPhotoString.Value;
	    var GetPhotoString = document.getElementById("hiddenGetPhotoString");
        document.write(GetPhotoString);

	    $(function () {
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

					GetPhotoString
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>

Open in new window

0
 

Author Comment

by:TheWebGuy38
ID: 34936442
java is throwing an error right here.
on GetPhotoString. anyone know what this syntax should look like to pass that variable in?

 slides: [

                              GetPhotoString
                        ]
              };


 
<script type="text/javascript">

	    //var hiddenGetPhotoString = "";
	    //var GetPhotoString = hiddenGetPhotoString.Value;
	    //var GetPhotoString = document.getElementById("hiddenGetPhotoString");
	    var GetPhotoString = "{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' },{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' }";
        document.write(GetPhotoString);

	    $(function () {
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

					GetPhotoString
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>

Open in new window

0
 
LVL 36

Expert Comment

by:Miguel Oz
ID: 34938729
Please set the hiddien as per my previous comment, have you set up the value in code behind code?
Please post your aspx and code behind on how you assign the value. e.g.
Markup
<INPUT id="hiddenGetPhotoString" type="hidden" runat="server" value="test">
C++
Code behind:
hiddenGetPhotoString.Value = "{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' },{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' }";

0
 
LVL 8

Expert Comment

by:Anurag Agarwal
ID: 34940655
the code behind doesn't exist on the client side where your jQuery code is executing. What you could do is assign the value of the property to a hidden field on the server side so that when you need to check it with jQuery on the client side it will be available. So you might do the following on the client side.

<asp:HiddenField ID="hfValueINeedToKnow" runat="server"/>
Code Behind:
hfValueINeedToKnow.Value = <some value>;
jQuery:
$("#<%= hfValueINeedToKnow.ClientID %>").val();


otherwise give your aspx and code behind code
0
 

Author Comment

by:TheWebGuy38
ID: 34940800
ok, let me give you the full code so you understand what's going on.


 
.vb

Imports System.Data
Imports System.Data.SqlClient
Imports System.IO

Partial Class SlideShow3_Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load




        Dim Conn As SqlConnection
        Dim CmdSelect As SqlCommand
        Dim Dr As SqlDataReader
        Dim SQL

        Dim GetPhotoString
        Dim TotalPhotoString

        Conn = New SqlConnection(WebConfigurationManager.ConnectionStrings("SQLDbconn").ConnectionString)
        Conn.Open()

        SQL = "SELECT * FROM Images ORDER BY DateStamp DESC"

        CmdSelect = New SqlCommand(SQL, Conn)

        Dr = CmdSelect.ExecuteReader()
        'do whatever
        If Dr.HasRows Then
            While Dr.Read()

                'get images
                GetPhotoString = "{ image: '" & Dr("ImageLarge") & "', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' },"

                TotalPhotoString = TotalPhotoString + GetPhotoString


            End While
        Else

        End If
        Dr.Close()
        Conn.Close()


        Dim FinalOutput As String = TotalPhotoString.Remove(TotalPhotoString.Length - 1, 1)

        hiddenGetPhotoString.Value = FinalOutput
        'hiddenGetPhotoString.Value = "{image : 'slides/tower.jpg', title : 'City Clock Tower', url : 'http://www.flickr.com/photos/wumbus/4582735030/in/set-72157623876357531/'},{image : 'slides/tower.jpg', title : 'City Clock Tower', url : 'http://www.flickr.com/photos/wumbus/4582735030/in/set-72157623876357531/'}"
        'Response.Write(Str)



    End Sub

   

End Class




.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="SlideShow3_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
	<link rel="stylesheet" href="supersized.css" type="text/css" media="screen" />
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script type="text/javascript"src="js/effects.core.js"></script>
	<script type="text/javascript"src="js/effects.slide.js"></script>
	
	<script type="text/javascript" src="supersized.3.0.js"></script>
	<script type="text/javascript">

	    //var hiddenGetPhotoString = "";
	    //var GetPhotoString = hiddenGetPhotoString.Value;
	    var GetPhotoString = document.getElementById("hiddenGetPhotoString");
	    //var GetPhotoString = "{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' },{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' }";
        document.write(GetPhotoString);

	    $(function () {
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

					GetPhotoString
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>
	
	<style type="text/css"></style>
</head>
<body>
    <form id="form1" runat="server">
    <input id="hiddenGetPhotoString" type="hidden" runat="server" value="bah" />
    <div>

    <!--Loading display while images load-->
<div id="loading">&nbsp;</div>

<!--Slides-->
<div id="supersized"></div>

<div id="prevthumb"></div>
<div id="nextthumb"></div>
		

<!--Control Bar-->
<div id="controls-wrapper">
	<div id="controls">
	
		<!--Slide counter-->
		<div id="slidecounter">
			<span class="slidenumber"></span>/<span class="totalslides"></span>
		</div>
		
		<!--Slide captions displayed here-->
		<div id="slidecaption"></div>
		
		<!--Navigation-->
		<div id="navigation">
			<img id="prevslide" src="images/back_dull.png"/><img id="pauseplay" src="images/pause_dull.png"/><img id="nextslide" src="images/forward_dull.png"/>
		</div>
		
		
		
	</div>
</div>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
LVL 8

Expert Comment

by:Anurag Agarwal
ID: 34942219
hey try this code
if similar to your output i think
http://www.c-sharpcorner.com/UploadFile/raj1979/5004/
0
 

Author Comment

by:TheWebGuy38
ID: 34946365
that was for a different page I was working on.
implemented the datalist with a dataset

only question I have about this one is why does the initial loading of the lighbox take so long to load
http://www.kevinperelmanphotography.com/slideshow4/default.aspx
0
 
LVL 36

Expert Comment

by:Miguel Oz
ID: 34946577
Can you post what the value of the following variables?
codebehind (Put breakpoint on line 51)
- FinalOutput
- hiddenGetPhotoString.ClientId

On the javascript  (Put breakpoint on line 89)
GetPhotoString

Thanks
0
 
LVL 8

Expert Comment

by:Anurag Agarwal
ID: 34949338
Good you have implemented with datalist.
I saw the link which you have provided.Its really very slow .
My guess is that server-side code is not very well optimised, and/or database tables do not have indexes on proper columns, might be slow connection speed etc. May be someother reasons too .
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to filter by key press ? 6 65
Securing WEBAPI on Azure 2 54
Best book for Internet security 4 47
Adding Rows to Grid 4 26
This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

738 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