• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 55
  • Last Modified:

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
0
mcrmg
Asked:
mcrmg
  • 5
  • 3
1 Solution
 
Dustin SaundersDirector of OperationsCommented:
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.
0
 
mcrmgAuthor Commented:
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
0
 
leakim971PluritechnicianCommented:
did you try :
$(".iframe").click();

Open in new window

0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
mcrmgAuthor Commented:
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";
0
 
leakim971PluritechnicianCommented:
<asp:LinkButton OnClientClick="$('.iframe').click();return false;" ID="LinkButton4" CommandArgument='<%# Eval("ID") %>' CommandName="Link" runat="server" Visible="true" HeaderStyle-Width="10%"><%# Eval("ContactName")%></asp:LinkButton>

Open in new window

0
 
mcrmgAuthor Commented:
thank you very much...
0
 
mcrmgAuthor Commented:
one last question, where can I set what page it opens? thank you
0
 
leakim971PluritechnicianCommented:
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

0
 
mcrmgAuthor Commented:
okay, thank you very much.
0
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.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now