Solved

JQuery UI Button

Posted on 2010-09-01
5
1,420 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
[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
  • 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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

740 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