?
Solved

JQuery UI Button

Posted on 2010-09-01
5
Medium Priority
?
1,422 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 2000 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

Industry Leaders: 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!

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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

752 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