asked on

colorbox question

Hi,

I am using colobox
http://www.jacklmoore.com/colorbox/

		<script>
            $(document).ready(function () {
                //Examples of how to assign the Colorbox event to elements
                $(".iframe").colorbox({ iframe: true, width: "80%", height: "40%" });
                $(".callbacks").colorbox({
                    onOpen: function () { alert('onOpen: colorbox is about to open'); },
                    onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
                    onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
                    onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
                    onClosed: function () { alert('onClosed: colorbox has completely closed'); }
                });


                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function () {
                    $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
		</script>

Open in new window

In the page, I use this to open up the window

<li><a href="mypage.aspx?CMCID=new" class="iframe">Contact</a></li>

Open in new window

Is there a way to do the same thing from javascript? What I am doing is using GridView in a .net and use LinkButton to send the ID back to code behind, then send back that ID back to .net Javascript to use Colorbox

<asp:LinkButton ID="LinkButton4" CommandArgument='<%# Eval("ID") %>' CommandName="Link" runat="server" Visible="true" HeaderStyle-Width="10%"><%# Eval("ContactName")%></asp:LinkButton>

Open in new window

Sorry, I am sure there are better ways. But this is the only way I know..thanks

Dustin Saunders

If I understand what you are asking correctly, you can use ajax to send to CodeBehind.

Create a static web method:

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static void DoThing(string variable)
        {
            Code.DoSomethingElse(variable);
        }

Open in new window

Then in a Javascript function, call the web method:

function dothing() {
    var thing = "First Name Last Name";
	$.ajax({
		type: "POST",
		url: "mypage.aspx/DoThing",
		data: JSON.stringify({ "variable": thing }),
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		success: function (result) {
			window.location.replace("/success.html");
		},
		failure: function () {
			window.alert("Problem!");
		}
	});
}

Open in new window

You can use the success: function to process the return and do whatever it is that happens next.

mcrmg

ASKER

I think this is too advanced. (sorry)

I am hoping I could explain clearer.

The colorbox is to open a window inside a page. I am not sure how to call the colorbox function from javascript. (I am sorry if you have explained it) thanks

leakim971

did you try :

$(".iframe").click();

Open in new window

mcrmg

ASKER

I guess my question is how to make this to work. Calling jquery while opening up a page inside a page. thanks

location.href = "ContactManagementContact.aspx?CMCID=new" + "class=iframe";

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mcrmg

ASKER

thank you very much...

mcrmg

ASKER

one last question, where can I set what page it opens? thank you

leakim971

you may store that info in a data-XYZ attribute for example :

No more inline OnClientClick attribute

<script>
   jQuery(function($) {
          $(".colorbox-opener").click(function(evt) {
                 evt.preventDefault();
                 var page = $(this).data("page");
                  $('.iframe').attr("href", "mypage.aspx?CMCID=new&page=" + page); // here we update the href, not sure if that work... if not, open a new question please
                 $('.iframe').click();
          });
   });
</script>
</head>

Open in new window

<asp:LinkButton CssClass="colorbox-opener" data-page='<%# Eval("ContactName")%>' ID="LinkButton4" CommandArgument='<%# Eval("ID") %>' CommandName="Link" runat="server" Visible="true" HeaderStyle-Width="10%"><%# Eval("ContactName")%></asp:LinkButton>

Open in new window

mcrmg

ASKER

okay, thank you very much.