Bootstrap Css class in dynamic button on Ajax Call - c#

I wanted to apply bootstrap button to dynamically create buttons via Ajax Call.In my code without bootstrap css class it's working on just default buttons But i want to apply bootstrap button When i use bootstrap css class --> class=btn btn-large btn-primary,Then it's not working
My Code
function LoadSpecialFilesToUser() {
debugger;
var newurls = '<%= ResolveUrl("/WebMethods.aspx/GetSpecialFilesToUsers") %>';
$.ajax({
url: newurls,
type: "POST",
data: JSON.stringify({ Id: "<%=GetUserID()%>" }),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (Result) {
$.each(Result.d, function (key, value) {
$("#SpecialFiles").append("<button class=btn btn-large btn-primary><a href=" + value.FilePath + "/>" + value.Caption + "</button>");//<-- In here without class=btn btn-large btn-primary.It's working
});
},
error: function (e, x) {
alert(x.ResponseText);
}
});
}

Related

How to stop page loading every time after clicking button?

This is my Function.
function GetData() {
try {
$.ajax({
type: "POST",
url: "CompanyOverAllReport.aspx/GetAllData",
data: '{date1: "' + $('#<%=this.txtDateFrom.ClientID%>').val() + '" , date2: "' + $('#<%=this.txtDateto.ClientID%>').val() + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
//console.log(JSON.parse(response.d));
var data = response.d;
//console.log(data['account']);
ExecuteGraph(data);
},
failure: function(response) {
// alert(response);
alert("f");
}
});
} catch (e) {
alert(e);
}
}
This is My Pageload
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
});
function pageLoaded() {
alert("Testing");
//GetData();
}
This is my Button
<asp:LinkButton ID="btnok" runat="server" CssClass="btn btn-primary okBtn" OnClientClick="GetData()" >Ok</asp:LinkButton>
Your click event fires the function, but doesn't prevent anything from happening...
OnClientClick="GetData()"
A simple example of cancelling the default action would be to use:
OnClientClick="GetData(); return false;"
It is also possible to prevent the default and cancel bubbling using the event that is passed with the click, your GetData function would need to accept it as the first argument.

Accessing PageMethod from aspx page

I have a webforms application and need to make an jquery ajax call to a PageMethod (i.e. WebMethod) in code behind from my aspx page. So far it does not work for me. Is this possible?
Here is my code:
$(function()
{
setInterval(function(){
$.ajax({
type: "GET",
url: "/ClientBillingBillDetails.aspx/MyPageMethod",
data: {someData: '<%= TheData %>'},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
}
});
}, 10000);
});
[System.Web.Services.WebMethod]
public static string MyPageMethod(int someData)
{
return "";
}
Is something wrong with my URL or something else?
Thanks
Try This:
$(function () {
setInterval(function () {
$.ajax({
type: "POST",
url: "/ClientBillingBillDetails.aspx/MyPageMethod",
data: "{ 'someData': '<%= TheData %>' }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
}
});
}, 10000);
});
Use type as post and make sure if you have ajax.jquery library reference added in solution.
Also i think you can remove '/' in specifying method..
Just use "ClientBillingBillDetails.aspx/MyPageMethod".
Else you can use simple pageMethods using scriptmanager

Disable ASP:dropdownlist based on the selection of another ASP:Dropdownlist.value

I have two asp.net dropdownlists that I want to manipulate clientside with Javascript.
These two dropdowns are inside a modal open: function()
When dropdown1.value == "me"
I want dropdown2.value to be disabled
How can I accomplish this?
$(document).ready(function () {
if (document.getElementById('<%=dropdown1.ClientID%>').value == 'Me')
document.getElementById('<%=dropdown2.ClientID%>').disabled = true;
});
(optional) Part 2 I need to set an entity framework value to null after dropdown2 has been disabled how could I accomplish this without a postback?
Part 1:
$(document).ready(function ()
{
if($("#<%=dropdown1.ClientID%>").val() == "Me")
$("#<%=dropdown2.ClientID%>").prop("disabled",true);
});
Part 2 :
You would need to make an ajax call to a code behind or webservice to do that.
.ASPX
$.ajax({
type: "POST",
url: "PageName.aspx/CodeBehindMethodName",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
},
error: function (error) {
}
});
.ASPX.CS
[WebMethod]
public static void Test()
{
// Call EF code
}

AJAX not posting to WebMethod

The Form:
<form action="upload-document.aspx" onsubmit="sendAndClose();" method="post" enctype="multipart/form-data">
<input name="fileToUpload" id="fileToUpload" type="file" />
<input type="submit" name="submit" value="Send" />
</form>
The AJAX:
function sendAndClose() {
currentUrl = location.protocol + '//' + location.host + location.pathname;
var data = new FormData();
var file = $("#fileToUpload")[0].files[0];
data.append("name", file.name);
data.append("size", file.size);
data.append("type", file.type);
data.append("file", file);
$.ajax({
type: "POST",
url: currentUrl + '/Persist',
dataType: 'json',
data: data,
cache: false,
contentType: false,
processData: false,
success: function () {
parent.$.fancybox.close();
},
error: function (request, error) {
alert("[" + error + "] - FAIL: " + request.responseText);
parent.$.fancybox.close();
}
});
}
The Code-Behind:
[WebMethod]
public static bool Persist(object data)
{
return true;
}
when the form is submitted, it runs the ajax and goes straight to the error callback before entering the webmethod. can anybody tell me why?
also, after the 'var file' I had an alert to show the files name, size, etc... so it gets the file, the problem is that ajax is refusing to comunicate with the code-behind.
I had a similar problem that was solved by adding this parameter in the ajax function :
traditional: true
So try this code for your AJAX call :
$.ajax({
type: "POST",
url: currentUrl + '/Persist',
dataType: 'json',
data: data,
cache: false,
contentType: false,
processData: false,
traditional: true,
success: function () {
parent.$.fancybox.close();
},
error: function (request, error) {
alert("[" + error + "] - FAIL: " + request.responseText);
parent.$.fancybox.close();
}
});
You cannot invoke a webmethod like http://localhost:40899/upload-document.aspx/Persist. The currentUrl is incorrect.
Following on from my question in the comments section I would add that your public static bool Persist... method MUST be in the page (ASPX) and not a user-control (ASCX).
This is because the page (ASPX) is "visible" to the outside world via a URL whereas a user-control (ASCX) is only used on the server to build up the page not a URI in its own right, and therefore not accessible to external callers.
If you need to call the method in the user-control you will need to move your Persist method (with WebMethod attribute) to your page (ASPX) and then make a call from that method into your user-control (ASCX).

Calling a c# methode from javascript/jquery and get the result

I have a dialog in an ASP.Net,c# application.This dialog has a textbox.When I choose save I want to call a function from C# who makes some verifications in the database and then to get the result in javascript/jquery.If the inserted value is true I want to close the dialog other way to remain opened,but I can't succed to close the dialog box after i receive true from c# function.Below is the code:
ascx :
<div id="popup" title="Choose Delegate">
<label>Delegate<label><input type="textbox" value="" name="inputD" id=="inputD"/>
</div>
Javascript:
$('#btnAdd').click(function(e){
$('#divPopup').slow("show");
$('#divPopup').dialog({
height:150,
width:300,
modal:true,
buttons:{
"close":function(){$(this).dialog("close");}
"save":function(){
var obj=document.getElementid("inputD");
$.ajax({
type: "POST",
url: "add.aspx/check",
data: "{delegate: '" + obj.Value+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
rez= "OK";
$(this).dialog("close");
},
failure: function () {alert("FAIL"); }}); }
});
}
C#:
[WebMethode]
public static Boolean check(string delegate)
{
.....
return true;
}
C# methode returns corect value.
I try also this :
$('#btnAdd').click(function(e){
$('#divPopup').slow("show");
$('#divPopup').dialog({
height:150,
width:300,
modal:true,
buttons:{
"close":function(){$(this).dialog("close");}
"save":function(){
var obj=document.getElementid("inputD");
var rez ;
$.ajax({
type: "POST",
url: "add.aspx/check",
data: "{delegate: '" + obj.Value+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
rez= "OK";
},
failure: function () {alert("FAIL"); }
});
if (rez="OK")
$(this).dialog("close");
}
});
But it doesn't see the rez value in this case.
Thanks !
You can use an Ajax Call in your "save":function(e) and just check the returned value if true close dialog, else remain opened
Ajax calls are really simple to implement, I let you search that :)
You need a web-service on the server side. (preferably REST)
http://restsharp.org/ is an easy to use library for that.
Take a look at this question for more info.
In the front end you make an ajax call to you're REST api (I see you use jquery so it won't be that hard ;))

Categories