How to call JSF action from jQuery ?

[Manish Suriya]

Dear experts,

I have a button in my JSF Page. I want to display a pop up on OnClick event of this. To display a Pop up i have used jQuery.

The javascript is like this...

function abc()
{

	function mycallbackform(v, m, f) {

			if (v) {
				if (f.BidAmount != null && f.BidAmount != "") {
					$.prompt(v + f.BidAmount + '!!');

				} else {
					$.prompt('Please enter value');
				}
				document.getElementById('UserWelcomeForm:bidamount_1').innerHTML = f.BidAmount; //used to refresh th initial amount with the latest amount entered by user in pop up and to diplay it in page.

			}

		}

		$.prompt('Please Enter the Bid Amount :<br /><input type="text" id="BidAmount" name="BidAmount" value="" />',
						{	callback :mycallbackform,
							buttons : {	Bid :'You have choosen $',Cancel :false}
						});

//xyz();	
return true;
}

and the CommandButton is like this...

<div class="exlink">	
<h:commandButton id="button_1" value="Bid Now"  style="display:none"     action="#{WelcomeUserBean.savedetails}"   />
<br />
<a id="button_1" class="button"  onclick="javascript:abc();"  href="#" title="Bid Now"  ><span>Bid Now !!</span></a>
</div>

On Click of "button_1" my javascript got called and Pop up got displayed. The Pop will ask from the user to eneter some value. Now i want to call 'savedetails' method of WelcomeUserBean after popup and the value which user has entered in pop up should be passed to the method.

I tried calling another jsf function (say xyz()) in abc() but the function is not getting called.

i have also used this code. Its workd finr in pure JS but not in jQuery

[code]document.getElementById["UserWelcomeForm:button_1"].click();code]

I have googled a lot and find that we can call using Ajax. but i am not sure how to use it.
Can anyone help me out.

Thanks in Advance !!

[Manish Suriya]

I got the solution.. the problem was i was using </h:commandButton> inside <f:verbatim> .
So i did something like this and its working now....

<h:column>
<f:facet name="header">
<h:outputText value="Click to Bid"/>
</f:facet> 
<div class="exlink">		
<h:commandButton id="button_1" value="#{item.buttonid}"  style="display:none"  action="#{welcomeUserBean.savedetails}">
</h:commandButton>
<f:verbatim><br /></f:verbatim>
<f:verbatim>
<h:outputText value=""></h:outputText>
<a id="button_1_a" class="button"  onclick="javascript:abc()"  href="#" title="Bid Now"  >Bid Now !!</a>
</f:verbatim>
								
</div>			
</h:column>

and in JS

function abc()
{

function mycallbackform(v, m, f) {

if (v) {
	if (f.BidAmount != null && f.BidAmount != "") {
	$.prompt(v + f.BidAmount + '!!',{callback :savedetails});
} else {
	$.prompt('Please enter value');
	}
	document.getElementById('UserWelcomeForm:dt1:0:bidamount').value = f.BidAmount;
	document.getElementById('UserWelcomeForm:dt1:0:hdbidamount').value = f.BidAmount;			
			}
		
		}

	function savedetails(v, m, f)
	{if(v)
	{  
		// i want to click the button dynamically . i m right now clciking the first button.
		UserWelcomeForm["UserWelcomeForm:dt1:0:button_1"].click();
	}

	}
         
	$.prompt('Please Enter the Bid Amount :<br /><input type="text" id="BidAmount" name="BidAmount" value="" />',
	{	callback :mycallbackform,
		buttons : {	Bid :'You have choosen $',Cancel :false}
		});
	
	return false;
}

Question is: How should i pass the button id (item.buttonid) of button i clicked upon to my savedetails function.

Thanks in Advance !!