Develop Reference

Changing the value of a bootstrap component dynamically

I am trying to change the value within a bootstrap component that will change on a button click event
Here is my component. It is a small bar that fills to a certain percentage depending on what value has been entered in through the markup code
<div class="progress">
<div id="theprogressbar" class ="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"
style="width: 95%">
<span class="sr-only">95% Complete</span>
</div>
</div>
style="width: 95%" is what is needed to be changed in order to change the percentage that the bar is filled with. Here is an example of what the bootstrap component looks like
How would I go about changing the percentage value within a button click event? thanks in advance and sorry if I seem vague! c# is the coding language I am using and this is taking place on a web form
UPDATE: JQUERY CODE
<script>
$('#btnSave').click(function () {
$.ajax({
url: 'http://localhost:61417/ProjectMainMenu/GetProgress',
method: 'POST',
contentType: 'application/json',
success: function(response){
var progressValue=response.d;
$('#theprogressbar').attr('aria-valuenow', progressValue).css('width',progressValue);
$("#progressValue").text(progressValue);
}
});
</script>
C# CODE
[WebMethod]
public static double GetProgress()
{
double progress=0;
//Your Business Logic
progress=56;
return progress;
}
BUTTON MARKUP CODE
<asp:Button ID="btnSave" width =" 250px" runat="server" Text="View" class="btn btn-info" />

you need to use WebMethod attribute which work as a web service method.
HTML & Jquery
<div class="progress">
<div id="theprogressbar" class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
<span class="sr-only"><span id="progressValue">95</span>% Complete</span>
</div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
<script>
$(document).ready(function(){
$('#btnSave').click(function () {
$.ajax({
url: 'http://localhost:56894/Progress.aspx/GetProgress',
method: 'POST',
contentType: 'application/json',
success: function(response){
var progressValue=response.d;
$('#theprogressbar').attr('aria-valuenow', progressValue).css('width',progressValue);
$("#progressValue").text(progressValue);
}
});
});
</script>
ASP.NET Web Form
[WebMethod]
public static double GetProgress()
{
double progress=0;
//Your Business Logic
progress=56;
return progress;
}
Javascript

Access a button on modal page

I've got a page that opens a modal (Page1.aspx).
That modal is another aspx page (Page2.aspx).
How can I declare in the opener page (or any other way), that a modal button, executes a button click in Page2.aspx.
I've tried to put:$('#ButtonOK').click(); (as it's the buttons id), but on the parent page it isn't recognized.
How can I execute that click?
Many thanks.
MY CODE, PAGE1:
function createModal(f,w,h) {
var dialogWidth = w;
var dialogHeight = h;
$('#dialog').dialog({
autoOpen: false
, bigframe: false
, modal: true
, width: dialogWidth
, height: dialogHeight
, autoResize: true
, closeOnEscape: true
, position: { my: "center", at: "center", of: window.top }
, open: function (event, ui) {
$('#dialog').css('overflow', 'hidden'); //this line does the actual hiding
}
,buttons: {
Ok: function () {
$("input[id$='ButtonOK']").trigger('click');
},
Cancelar: function () {
$(this).dialog("close");
}
}
});
$('#dialog').dialog('open');
$("#iframe").attr('src', f);
return false;
}
function PermMV(usr) {
createModal('new.aspx?usr=' + usr,350,450);
}
<div id="dialog" style="display: none;">
<iframe id="iframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" align="middle"></iframe>
</div>
PAGE 2:
<div id="acrescenta2" title="Perm">
<asp:TextBox ID="txtuser1" name="txtuser" runat="server" Text="" CssClass="consprodtxt" />
<asp:Button ID="ButtonOK" runat="server" OnClick="ButtonOK_Click" OnClientClick="ButtonOK_Click" Text="OK" CssClass="btnmv" />
</div>
Hope that helps.

You need to use IFrame Like This,
<div class="modal-body" id="modal_dialog">
<iframe style=" width:100%; height: 100%;" id="ifrm" src="yourExternalPage.aspx" runat="server">
</iframe>
And Open This Div as a Dialogue using JQuery,
<script type="text/javascript">
$("#BtnClick").live("click", function () {
$("#modal_dialog").dialog({
title: "jQuery Modal Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
</script>
1<>Simple jQuery Modal Popup Window Example in ASP.Net
2<>Modal popup using jquery in asp.net

$(document).on("click","element",function(args){
//...
});
Try it

Try this:
$("#ButtonOK").trigger('click');

Dialog Box appears and then disappears

When I click on the button Dialog Box it appears and disappears, I tired using different plugins and hundreds of tutorial but dunno why things not working properly maybe because, I am using ASP.Net page and its inheriting from a masterpage
here's the code,
<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<div id="question" style="display:none; cursor: default">
<h1>Would you like to contine?.</h1>
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" />
</div>
<input id="test" type="submit" value="Show Dialog" />
<script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript" src="/_layouts/1033/ui.core.js"></script>
<script type="text/javascript" src="/_layouts/1033/jquery-ui-1.7.3.custom.js
"></script>
<script type="text/javascript" src="JS.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test').click(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});
$('#yes').click(function() {
// update the block message
$.blockUI({ message: "<h1>Remote call in progress...</h1>" });
$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click(function() {
$.unblockUI();
return false;
});
});
</script>
<hr />
</asp:Content>
Its a jquery plugin I downloaded from here,
Jquery Plugin I am using

because you are using
<input id="test" type="submit" value="Show Dialog" />
which cause postback due to which dialog disappear try
<input id="test" type="button" value="Show Dialog" />

your button #test is a submit button, that needs to prevent submitting to form if you want to see the message
try
$('#test').click(function(e) {
e.preventDefault();
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});

Try this code, I hope it will work:
$('#your form name').submit(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});

How to refresh a parent page after closing sharepoint dialog?

How to refresh a parent page after closing sharepoint dialog?
Here is my coding to open a pop-up.
<input type="button" value="Add" class="button submit" style="width: 80px" onclick="javascript:OpenAttachmentUpload()" />
<script type="text/javascript">
//User Defined Function to Open Dialog Framework
function OpenAttachmentUpload() {
var strPageURL = '<%= ResolveClientUrl("~/Dialogs/AttachUpload.aspx") %>';
//OpenFixCustomDialog(strPageURL, "Attachment");
OpenCustomDialog(strPageURL, 350, 200, "Attachment");
return false;
}
</script>
here is the script.
function OpenCustomDialog(dialogUrl, dialogWidth, dialogHeight, dialogTitle, dialogAllowMaximize, dialogShowClose) {
var options = {
url: dialogUrl,
allowMaximize: dialogAllowMaximize,
showClose: dialogShowClose,
width: dialogWidth,
height: dialogHeight,
title: dialogTitle,
dialogReturnValueCallback: Function.createDelegate(null, CloseCallback3)
};
SP.UI.ModalDialog.showModalDialog(options);
}
After opening it, when I close the pop-up (~/Dialogs/AttachUpload.aspx) , I wanna refresh the parent page.
How can I do it?
I google and see SP.UI.ModalDialog.RefreshPage but still can't find an answer for me.
Thanks.
P.s
I don't know much about SharePoint.

You're almost there.
In the option dialogReturnValueCallback you can define a function that will be executed after the dialog was closed. By now you create a delegate pointing to CloseCallback3 but this is not defined in your code.
If you call SP.UI.ModalDialog.RefreshPage in this callback method the page gets refreshed after the dialog was closed with OK.
var options =
{
url: dialogUrl,
allowMaximize: dialogAllowMaximize,
showClose: dialogShowClose,
width: dialogWidth,
height: dialogHeight,
title: dialogTitle,
dialogReturnValueCallback: function(dialogResult)
{
SP.UI.ModalDialog.RefreshPage(dialogResult)
}
}
Btw:
You use javascript: in the onclick of the button. This is not necessary. this is only required in the href of an a tag

You can also use the build-in function "RefreshOnDialogClose"
SP.UI.ModalDialog.showModalDialog({
url: dialogUrl,
allowMaximize: dialogAllowMaximize,
showClose: dialogShowClose,
width: dialogWidth,
height: dialogHeight,
title: dialogTitle,
dialogReturnValueCallback: RefreshOnDialogClose
});

Try to use this code on click of a button:
<script type="text/javascript">
function RefreshParent()
{
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Ok, null);
}
</script>

If you only want to refresh the page if changes were made you can use the following call back instead.
var options =
{
url: dialogUrl,
allowMaximize: dialogAllowMaximize,
showClose: dialogShowClose,
width: dialogWidth,
height: dialogHeight,
title: dialogTitle,
dialogReturnValueCallback: function(dialogResult)
{
if (dialogResult != SP.UI.DialogResult.cancel)
{
SP.UI.ModalDialog.RefreshPage(dialogResult)
}
}
}
Saves you from refreshing the page if the user hit cancel.

Try java-script code as below in Closecall back.
window.location = window.location;

call blockUI on button onclick

I'm trying to call an blockUI after a buttonclick, but I can't get it to work.
What am I doing wrong?
Script:
$(function() {
$('#<%= btnSave.ClientID %>').click(function(e) {
e.preventDefault();
$.blockUI({
message: '<div><h1><img src="Images/busy.gif" /> Please wait...</h1>',
css: { textAlign: 'center', border: '3px solid #aaa', padding: '10px, 0px, 0px, 0px' , verticalalign: 'middle' }
});
var btn = document.getElementById("ctl00_ContentPlaceHolder1_btnHidden");
btn.click();
});
});
Button:
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="button" Width="200" />

Since you're in an UpdatePanel, use .live() here, like this:
$(function() {
$('#<%= btnSave.ClientID %>').live('click', function(e) {
e.preventDefault();
$.blockUI({
message: '<div><h1><img src="Images/busy.gif" /> Please wait...</h1></div>',
css: { textAlign: 'center', border: '3px solid #aaa', padding: '10px, 0px, 0px, 0px' , verticalalign: 'middle' }
});
var btn = document.getElementById("ctl00_ContentPlaceHolder1_btnHidden");
btn.click();
});
});
.live() listens at the document level for a click from btnSave to bubble up...so it works when the element is added, removed, replaced, etc. (and your UpdatePanel is replacing it each postback), where as .click() attaches directly to the element...and that click handler is lost when the element is replaced.