?
Solved

Pass Variable from Javascript to Codebehind

Posted on 2011-02-19
15
Medium Priority
?
1,610 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
Independent Software Vendors: 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 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
This course is ideal for IT System Administrators working with VMware vSphere and its associated products in their company infrastructure. This course teaches you how to install and maintain this virtualization technology to store data, prevent vuln…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…

719 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