Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

JQuery UI Button

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

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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

927 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