Apex Code Development You need to sign in to do that
Don't have an account?
rcher Jquery blockui not working on click of a command button
Hi,
I am trying to display a block UI using jquery on click of a command button but the when the button is clicked the blockUI Jquery screen does not show up, infact nothing happens when the button is clicked. Let me know if i am doing something wrong.
Below is the code.
VF Page:-
<apex:page controller="Quote_To_CW_Test" sidebar="false" id="page">
<apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"/>
<apex:includescript value="https://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"/>
<apex:includescript value="http://malsup.github.com/jquery.blockUI.js" />
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" />
<script>
function test(){
alert('Test');
}
j$ = jQuery.noConflict();
function blockme() {
j$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
}
</script>
<apex:form id="form">
<apex:pageblock >
<apex:pageblocksection title="Click on Quote>CW button below to send the Quote to CW">
<apex:commandbutton value="Quote>CW" onclick="blockme()"
action="{!invokeMule}"
styleClass="saveButtonId" id="saveButtonId" >
</apex:commandbutton>
</apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>
I am trying to display a block UI using jquery on click of a command button but the when the button is clicked the blockUI Jquery screen does not show up, infact nothing happens when the button is clicked. Let me know if i am doing something wrong.
Below is the code.
VF Page:-
<apex:page controller="Quote_To_CW_Test" sidebar="false" id="page">
<apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"/>
<apex:includescript value="https://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"/>
<apex:includescript value="http://malsup.github.com/jquery.blockUI.js" />
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" />
<script>
function test(){
alert('Test');
}
j$ = jQuery.noConflict();
function blockme() {
j$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
}
</script>
<apex:form id="form">
<apex:pageblock >
<apex:pageblocksection title="Click on Quote>CW button below to send the Quote to CW">
<apex:commandbutton value="Quote>CW" onclick="blockme()"
action="{!invokeMule}"
styleClass="saveButtonId" id="saveButtonId" >
</apex:commandbutton>
</apex:pageblocksection>
</apex:pageblock>
</apex:form>
</apex:page>
Make sure these files should be included in your vf page:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Please refer below mentioned code to use block ui.
function search() { $.blockUI(); //code //code return false; } function unBlock() { $.unblockUI(); } <apex:commandButton value="search" onClick = "search();" onComplete="unBlock();"/>I have included the Jquery/bootstrap files but still the onclick doesnt work. Dont know where the issue is.