Develop Reference

Pass JQuery context $(this) to another function and retrieve context data

I'm using Metronic bootstrap admin them, which comes with sweetalert - which is an alert library
What I'm trying to do is to do a confirm alert on attempting to delete a record from the table , each row has a delete button
now Metronic has gone and did a little bit of extension on it, so you can now use html 5 "data" attributed to declaratively to declare title, button types etc.
in my MVC app, the following Razor code iterates and adds the button, note that I'm adding the data-id attribute to it - the idea being that I can extract it when the button is clicked to get the id to delete it
e.g.
<button data-id="#u.Id" type="button" class="btn btn-xs btn-circle red btn-delete mt-sweetalert" data-title="Are you sure?" data-type="warning" data-allow-outside-click="true" data-show-confirm-button="true" data-show-cancel-button="true" data-cancel-button-class="btn-danger" data-cancel-button-text="Cancel" data-confirm-button-text="Proceed" data-confirm-button-class="btn-info">
<i class="fa fa-times"></i>
</button>
the following is the Metronic JS extension file - I have added a few lines of code to it, so it calls a custom function on clicking the confirm option.
the idea being that I can leave the additions by Metronic Theme intact and call a custom function on the page where I need it
note that I'm also passing in the $(this) context to my custom function
var SweetAlert = function () {
return {
//main function to initiate the module
init: function () {
$('.mt-sweetalert').each(function(){
var sa_title = $(this).data('title');
var sa_message = $(this).data('message');
var sa_type = $(this).data('type');
var sa_allowOutsideClick = $(this).data('allow-outside-click');
var sa_showConfirmButton = $(this).data('show-confirm-button');
var sa_showCancelButton = $(this).data('show-cancel-button');
var sa_closeOnConfirm = $(this).data('close-on-confirm');
var sa_closeOnCancel = $(this).data('close-on-cancel');
var sa_confirmButtonText = $(this).data('confirm-button-text');
var sa_cancelButtonText = $(this).data('cancel-button-text');
var sa_popupTitleSuccess = $(this).data('popup-title-success');
var sa_popupMessageSuccess = $(this).data('popup-message-success');
var sa_popupTitleCancel = $(this).data('popup-title-cancel');
var sa_popupMessageCancel = $(this).data('popup-message-cancel');
var sa_confirmButtonClass = $(this).data('confirm-button-class');
var sa_cancelButtonClass = $(this).data('cancel-button-class');
$(this).click(function(){
//console.log(sa_btnClass);
swal({
title: sa_title,
text: sa_message,
type: sa_type,
allowOutsideClick: sa_allowOutsideClick,
showConfirmButton: sa_showConfirmButton,
showCancelButton: sa_showCancelButton,
confirmButtonClass: sa_confirmButtonClass,
cancelButtonClass: sa_cancelButtonClass,
closeOnConfirm: sa_closeOnConfirm,
closeOnCancel: sa_closeOnCancel,
confirmButtonText: sa_confirmButtonText,
cancelButtonText: sa_cancelButtonText,
},
function(isConfirm){
//action function on click
if (isConfirm){
swal(sa_popupTitleSuccess, sa_popupMessageSuccess, "success");
//custom function call added by me
//------------------------------------------
if(typeof onConfirmClick === "function")
onConfirmClick.call(this);
//------------------------------------------
} else {
swal(sa_popupTitleCancel, sa_popupMessageCancel, "error");
}
});
});
});
}
}
}();
jQuery(document).ready(function() {
SweetAlert.init();
});
The function in my page:
<script type="text/javascript">
function onConfirmClick() {
alert($(this).data('id'));
//make Ajax call here
}
</script>
Now the problem is, I'm getting the ($this) but not able to get the id or any attribute from the button for that matter
if I print $(this) in console
and just "this"
The question here is:
how can I get the data-id attribute in my function ? if I try $(this).data('id') - I get undefined
Is this the correct approach design wise ? I want to be able to call a custom function on confirm but not disrupt Metronic extensions on sweetalert ?

To pass the id from the button's data-id to the onConfirmClick() function...
I would try to make it transit via a variable.
So on click of a .mt-sweetalert, a SweetAlert is triggered.
Nothing stops you to have another click handler to store the id in a variable accessible by the function.
var sweetAlertId;
$(".mt-sweetalert").on("click", function(){
sweetAlertId = $(this).data("id");
});
Then in the function:
function onConfirmClick() {
alert(sweetAlertId);
//make Ajax request using sweetAlertId here!
}
In short, the id is not forced to transit via SweetAlert!
;)

Run javascript function IN the middle of Ajax.ActionLink

here is the problem: I have an Ajax.ActionLink() in which I need to provide a value from textbox for routeValues:
#Ajax.ActionLink("Purchase Tracking", "StatusOfFactor", "Shopping", new { guid = HERE I WANT A JAVASCRIPT FUNCTION TO RETRIEVE VALUE FROM TEXTBOX } , ajaxOptions: new AjaxOptions { UpdateTargetId = "StatusOfFactor", HttpMethod = "GET", InsertionMode = InsertionMode.Replace }, htmlAttributes: new { #class = "btnpeyment btn btn-xs bg-color-btn" })
how should I implement it?

You can replace the Ajax.ActionLink and write some javascript code yourself to achieve what you are after.
To start, we will replace the Ajax action link with a normal anchor tag
<a id="purchasTrackingLink" class="btnpeyment"
href="#Url.Action("StatusOfFactor","Shopping")">Purchase Tracking</a>
<input id="YourTextBoxId" />
Now wireup the click event on this link, prevent the default behavior, read the value of your textbox and use that to generate the new target url and use that for the ajax call.p
$(function(){
$("#purchasTrackingLink").click(function(e){
e.preventDefault();
var textBoxVal=$("#YourTextBoxId").val();
var url=$(this).attr("href");
url=url+"?guid="+textBoxVal;
//Now make the ajax call
$.get(url,function(response){
$("#StatusOfFactor").html(response);
});
});
});

$('#textBoxID').on('change', function(event){
var value = $('#textBoxID').val();
$('#ajaxLinkID').attr('guid', value);
})
Replace the IDs with the ones you are using.
Note: If the textbox was placed on the page via an AJAX call, you will need to use event delegation to make this work, delegate it to the parent container that was originally loaded on the page.

How to call a client-side javascript function after closing a radwindow

In aspx page1 I have a button. I click on the button, it opens a radwindow which is implemented in aspx page2. In the radwindow I enter some data and click on save button. It calls server side method and then closes the radwindow. After closing the radwindow, it should fire page1's method. How to achieve this?
Code to open the radwindow from page1:
function btnAddNewImage_click() {
debugger;
var hdn_PatientId = document.getElementById("<%=hdn_PatientId.ClientID %>").value;
var selectedEncounterId = document.getElementById("<%=hdn_EncounterId.ClientID %>").value;
var oWnd = radopen("../Admin/Encounter/PopUps/UploadImages.aspx?EncounterId=" + selectedEncounterId + "&PatientId=" + hdn_PatientId, "rwDialog");
oWnd.SetTitle("Upload Image");
oWnd.SetSize(600, 350);
oWnd.Center();
//oWnd.add_close("refreshGrid");
oWnd.OnClientClose = "refreshGrid"; // Not working
return false;
}
Function to fire after radwindow is closed:
function refreshGrid(sender, eventArgs) {
debugger;
alert("in refreshgrid");
var selectedEncounterId = document.getElementById("<%=hdn_EncounterId.ClientID %>").value;
loadImagesProgressNotes(selectedEncounterId, "Current");
}
Code to close the radwindow in page2
RadScriptManager.RegisterStartupScript(this, this.GetType(), "Alert", "javascript:returnToParent();", true);
function returnToParent() {
debugger;
//get a reference to the current RadWindow
var oWnd = GetRadWindow();
oWnd.close();
}

I tried test your code, but I can't. What I saw in the examples is that the radwindow is declared in this way, not dynamically as you are trying.
<telerik:RadWindow RenderMode="Lightweight" runat="server"
ID="RadWindow1" OnClientClose="OnClientCloseHandler"
NavigateUrl="dialog-page.aspx" VisibleOnPageLoad="true">
</telerik:RadWindow>
I recommend that you consult the documentation, there are some examples there.
Demonstration of OnClientClose:
https://demos.telerik.com/aspnet-ajax/window/examples/clientsideevents/defaultcs.aspx
Documentation of OnClientClose:
http://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/events/onclientclose

Use the client-side API of the RadWindow to attach the OnClientClose handler: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/radwindow-object#methods-for-modifying-client-side-event-handlers-dynamically.
var oWnd = radopen();
oWnd.add_close(refreshGrid);
Note that the refreshGrid function must be in the same context (page) as the RadWindow that is opened. If they are not, review the following code library project to see how to tie them together: http://www.telerik.com/support/code-library/creating-parent-child-relationships-between-radwindows-and-passing-data-between-them

Add data to bootstrap modal

I have a problem here with bootstrap modals, so in back-end of my app I pull out data from SQL, and I call a JS function like this:
ScriptManager.RegisterStartupScript(this, this.GetType(), "ShowPopup",
"MailLanguageChange('" + Description + "','" + TextResult + "');", true);
And JS looks like this :
function MailLanguageChange(Name, Text) {
$('#MainContent_NewMailTemplate').modal('show');
document.getElementById("Upper_txtDesc").value = Name;
document.getElementById("TextEditorTextArea").innerHTML = Text;
}
So firebug hits break point at this function, so I am sure call of function does work, but here comes the problem, JS is trying to apply this data onto the modal, before all elements of modal are loaded.
But as I use this modal for multiple purpuses ... is there anyway to write it down, "Don't do anything until modal is shown"?
$('#MainContent_NewMailTemplate').modal('show');
As docs says, it returns to the caller before the modal has actually been shown ... how can i by pass that?
EDIT :
This is how I have also tried it
function MailLanguageChange(Name, Text) {
$('#MainContent_NewMailTemplate').modal('show');
$("#MainContent_NewMailTemplate").on('shown.bs.modal', function () {
document.getElementById("Upper_txtDesc").value = Name;
document.getElementById("TextEditorTextArea").innerHTML = Text;
});
}
CONCLUSION :
With use of logic of global variables provided by #Guruprasad Rao
I ended up just simply using
$(document).ready(function () {
document.getElementById("Upper_txtDesc").value = name;
document.getElementById("TextEditorTextArea").innerHTML = text;
});
Thank you

Use twitter-bootstrap's shown.bs.modal method as below:
$("#yourmodalid").on('shown.bs.modal',function(){
//Do whatever you want here
});
There are several other events to look into regarding modal
Update
see you are showing the modal first and then you are registering that event.. So I would suggest you below steps.
Declare 2 global variables at the top in js page.
Ex
var name,text;
Assign them values inside your function MailLanguageChange.
Ex
function MailLanguageChange(Name, Text) {
name=Name;
text=Text;
$('#MainContent_NewMailTemplate').modal('show');
}
Keep shown.bs.modal event somewhere outside the above function
Ex
$("#MainContent_NewMailTemplate").on('shown.bs.modal', function () {
document.getElementById("Upper_txtDesc").value = name;
document.getElementById("TextEditorTextArea").innerHTML = text;
});

how to retrieve property value in js file?

I am creating one asp page. In that page i defined one property like below
.cs
private long _sequence;
public long Sequence { get { return _sequence; } set { _sequence = value; } }
Now i want to retrieve this property value in js file. Actually i can retrieve it in .aspx but i want it in .js file.
here is my js function and .aspx code which i am trying but it could not find property value
.aspx
<asp:Button ID="btnShowSimple" runat="server" Text="Notes Dialog" OnClientClick="NotesDialog(this)" />
.js
function NotesDialog(ctr) {
var ControlName = document.getElementById(ctr.id);
$("#btnShowSimple").click(function (e) {
ShowDialog(false);
e.preventDefault();
LoadData("GetNotes", '"sequence":<%= this.Sequence %>');
});
}
Anything I am missing?? If anyone have any idea about it than please help me..I am facing this problem since two days..

Your js files are static files on the server. You cannot use those <%= %> tags in them.
You could pass the property via a global javascript variable, that you set in your aspx page and use in your js file.
i.e.
.aspx
<script type="text/javascript">
myProp = <%= this.Sequence %>;
</script>
.js
function NotesDialog(ctr) {
var ControlName = document.getElementById(ctr.id);
$("#btnShowSimple").click(function (e) {
ShowDialog(false);
e.preventDefault();
LoadData("GetNotes", '"sequence":' + myProp);
});
}

Nope you cannot do this in JS file as it is not processed by asp.net runtime. The best you can do is declare a variable in aspx and use it in js like:
aspx:
var _seq="<%= this.Sequence %>";
JS:
LoadData("GetNotes", '"sequence":' + _seq); //USE ASPX VARIABLE

You should try to separate you JavaScript code from you HTML.
Instead och creating a asp:Button use an HTML button and set an data-attribute you can retrive.
<button type="button" id="btnShowSimple" data-sequence="<%= this.Sequence %>">Notes Dialog</button>
And in your javascript-file bind an click event to your button that picks up the data-sequence.
/** Put this in the bottom of you javascript file **/
(function (window) {
var document = window.document,
view;
view = {
/**
* Invoked in jQuery event context
* #param e
*/
bindClickEvent : function (e) {
$("#btnShowSimple").click(function (e) {
e.preventDefault();
var sequence = $(this).data('sequence');
ShowDialog(false);
LoadData("GetNotes", '"sequence":' + sequence);
});
}
}
$(document).ready(view.bindClickEvent);
} (window));
From your current code you when you click the asp:Button you just bind a new click event and never execute it.
Also from some of the other answer, you should NEVER declare arbitrary global variables in JavaScript