Solved

JQuery UI Button

Posted on 2010-09-01
5
1,414 Views
Last Modified: 2012-08-14
Hi All,
I added the JQuery UI Buttonset on my page
     <div class="pageUtils">
                    <button>
                        Back</button>
                    <button>
                        Next</button>
                    <button>
                        Save</button>
                    <button onclick="PrintInvoke()">
                        Print</button>
                    <button>
                        Glossary</button>
                </div>
And I add the ICONS to the BUttonSet using

    <script type="text/javascript">
        $(function() {
            $(".pageUtils button:first").button({
                icons: {
                    primary: 'ui-icon-triangle-1-w'
                },
                text: false
            }).next().button({
                icons: {
                    primary: 'ui-icon-triangle-1-e'
                },
                text: false
            }).next().button({
                icons: {
                    primary: 'ui-icon-disk'
                },
                text: false
            }).next().button({
                icons: {
                    primary: 'ui-icon-print'
                },
                text: false                
               
            }).next().button({
                icons: {
                    primary: 'ui-icon-lightbulb'
                },
                text: false
            });
        });
    </script>

Now, I need to perform a few actions including calling a Modal Popup Container, and collapse/uncollapse a few panels based on a DB value. I am able to do them if I replace the Jquery button with normal asp.net button [doing away with these icons]…

I was wondering if I can do something that would make JQuery button behave as a asp.net button for a click event…[ Postback the page and calling a specific function][currently I am only able to assosiate client site funtions]…Alternatively …

Can I add these icons to the ASP.NET Image Button during the run time…

Please let me know in case you require more information…










0
Comment
Question by:sraghu4
  • 2
  • 2
5 Comments
 
LVL 11

Expert Comment

by:lluthien
ID: 33581904
if you are just looking for a way to call a method on the server,
try just giving the button a serverside event (onclick)
and in the jquery -clientside- clickevent just return false to stop the event from happening
0
 
LVL 4

Expert Comment

by:rhodesb
ID: 33582375
If all you need is a value from the db, you can do it without a page refresh by using an AJAX call to a server-side script.  Since you're using JQuery already, you can use $.ajax() or $().load() in the Jquery library to make your life a bit easier.
0
 

Author Comment

by:sraghu4
ID: 33587759

Thanks a lot for all your response.

I wasn't sure how i should be doing what you said. [PS : how to give this button a server side event ], if this is something that can be done ? It would be helpful if you could give me an example.








0
 
LVL 4

Accepted Solution

by:
rhodesb earned 500 total points
ID: 33696252
Sorry for the late reply.  Here is an example like you asked for:

Create another asp.net page that only grabs the value you want from the database, then writes it out (and writes out nothing else including html like <head><body> etc.).

Then call that page with an AJAX function when you click the button.  <-- JQuery code below for accomplishing this
$(function(){
  // Register a click handler for your button
  $("#buttonID").click(function(){
    // load the database value into some container <-- I'll call it containerId
    // from a different .aspx page that gets the value you need, then writes it out <-- I'll call it dbLookup.aspx
    // and call a function after the server response <-- I'll call it responseHandler()
    $("#containerId").load("http://yoursite.com/dbLookup.aspx", responseHandler);
  });

  function responseHandler(response){
    // Here response will hold the database value that you get back from your other page (dbLookup.asps)
    // or you can get the value from the container you stored it in ($("#containerId").val() 
    // or $("#containerId").html()
    // Then you just need to run the functions that you said are already working with that value
  }
});

Open in new window

0
 

Author Closing Comment

by:sraghu4
ID: 33863793
Thanks
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now