Run JavaScript on every click within AJAX success function - javascript

I make three links on AJAX success function. I want a JavaScript function to run every time any of those links are clicked while user is on that page. I understand it is easy but I am unable to get the script run on every click. It just runs on clicking of first link and does nothing on clicking of other links. Here is the code:
request.success(function(data) {
//Put the heading on the div
//http://stackoverflow.com/questions/12898475/using-jquery-to-replace-text-inside-h3-header
var dataReceived = null;
$("#bookList h3 #spanId").text("A list appears");
for(var i=0;i<data.length;i++){
dataReceived =data[i].name;
$("#bookList").append("<a href id=bookLink>"+dataReceived+"</a>" +"<br>");
}
$("#bookLink").click(function(event){
$.getScript("information.js",function(){
dealWithData();
});
});
});
request.fail(function(jqXHR, status, errorMessage) {
if((errorMessage = $.trim(errorMessage)) === "") {
alert("An unspecified error occurred. Check the server error log for details.");
}
else {
alert("An error occurred: " + errorMessage);
}
});
dealWithData for now just has an alert:
function dealWithData(){
alert("Reached here");
}
Any help is appreciated. Thanks.

I don't like using .click() any more since it has been deprecated. You should also change it to use:
.on("click", function(event) {

Related

Problem in reloading page(table) after deleting record from database

I have a ASP.NET CORE MVC application with a table listing some clients (CRUD) and I can delete users when I click in delete.
The problem that i'm trying to resolve is when I refresh the page after delete the records from the listing the listing still show the deleted record when in the database the record is deleted and if I reload (F5) the page manually the record disappear.
I already try the location.reload(), windows.location.reload() and nothing... I can saw that page is reloading but the record don't disappear.
My code is above:
<script type="text/javascript">
function toggleChecked(status) {
$("#checkboxes input").each(function () {
// Set the checked status of each to match the
// checked status of the check all checkbox:
$(this).prop("checked", status);
});
}
function Delete(id) {
var example_table = $("#example1")
var r = confirm("Are you sure you want to Delete?");
if (r == true) {
$.ajax(
{
type: "POST",
url: '#Url.Action("Delete", "Clients")',
data: {
id: id
},
error: function (result) {
alert("error");
},
success: function (result) {
if (result == true) {
example_table.ajax.reload(); // -->> The problem is in this line!
location.reload(); // -->> The problem is in this line!
}
else {
alert("There is a problem, Try Later!");
}
}
});
}
}
$(document).ready(function () {
//Set the default value of the global checkbox to true:
$("#checkall").prop('checked', false);
// Attach the call to toggleChecked to the
// click event of the global checkbox:
$("#checkall").click(function () {
var status = $("#checkall").prop('checked');
toggleChecked(status);
});
});
</script>
The back-end Delete:
[HttpPost]
public bool Delete(int id)
{
try
{
Clients client = db.Clients.Where(s => s.Id == id).First();
db.Clients.Remove(client );
db.SaveChanges();
return true;
}
catch (System.Exception)
{
return false;
}
}
I want that the deleted record disappear in real time without have to refresh the page manually. If you can help me I appreciate.
If the delete is sucessful you could manually remove that item from the list in the sucess of the ajax call.
However with the reload, does the reload of the page call the database and get a list of data? If this is not triggered from the reload then it wont be updating the list. If it is then my only suggestion would be that cookies may be storing the list?
For Server side refresh you can use Response.Redirect(Request.RawUrl)
For Client side refresh you can use window.location.href= window.location
Or document.location.reload() instead of location.reload()

Calling a ActiveX control more than once throws a undefined error

I have a web page where you can open a Imanage document using a Active X control. The code works fine the first time I click the button (that launches the js code), but any time after that I get a undefined error description.
The openImanageDoc is the method that opens the document. I have other applications that is using the control without the error.
<object id="Control" classid="clsid:*GUID*" codebase="*CONTROL*.cab"></object>
function getDocument() {
try {
var docNum = document.getElementById("docNum").value;
var versionNum = document.getElementById("versionNum").value;
var database = document.getElementById("database").value;
var obj = document.Control;
if (obj) {
obj.openImanageDoc(docNum, versionNum, *SERVERNAME*, database, false);
} else {
alert("Object is not created!");
}
} catch (ex) {
alert("Some error happens, error message is: " + ex.Description);
}
}
I tried running the code in Chrome as well, the error that returns is:
obj.openImanageDoc is not a function
Many Thanks

Problems with ionic back button

I have a problem with the back button of my application.
Initially I thought that the problem was in Cordova, but I have identified that the problem is actually in Ionic.
I found this code while researching for a solution:
// Disable BACK button on home
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="app.home"){
navigator.app.exitApp();
}
else {
navigator.app.backHistory();
}
}, 100);
However, it is giving the following error:
Uncaught ReferenceError: $ionicPlatform is not defined
I am putting that code within a new document called functionAngular.js and I add it at the end of the body tag. As I must inform this function ?
My problem is that:
I want my back button to send the user further back in the navigation stack instead of closing the application instantly.
I am grateful for this help.
I recommend you first add $ionicPlatform in controller, and in the first controller loaded, test every state (see below) that the back button should have different actions.
$ionicPlatform.registerBackButtonAction(function () {
if ($state.current.name == " login (example) ") {
ionic.Platform.exitApp();
}
if ($state.current.name == " main menu buttons (example) ") {
// Sample message "want to exit the application?" (YES/NO)
if (YES) {
$ionicViewSwitcher.nextDirection('back');
$state.go(' ????');
};
};
if ($state.current.name == " order (example) ") {
// Sample message "want to exit the order?" (YES/NO)
if (YES) {
$ionicViewSwitcher.nextDirection('back');
$state.go(' ????');
};
};
}, 100);
angular.module('EGLISE')
.run(function($ionicPlatform,$state,$ionicHistory){
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="app.home"){
navigator.app.exitApp();
}
else {
$ionicHistory.backHistory();
}
}, 100);
});
Please modify your functionAngular.js to the above code.

re-execute javascript after log-in

I have a series of buttons that execute different functions when clicked. The function checks whether the user is logged in, and if so proceeds, if not it displays an overlay with ability to log in/create account.
What I want to do is re-execute the button click after log-in, without the user having to reclick it.
I have it working at the moment, but I'm pretty sure that what I'm doing isn't best practice, so looking for advice on how I can improve...
Here's what I'm doing: setting a global variable "pending_request" that stores the function to be re-run and in the success part of the log-in ajax request calling "eval(pending_request)"
Example of one of the buttons:
jQuery('#maybe_button').click(function() {
pending_request = "jQuery('#maybe_button').click()"
var loggedin = get_login_status();
if (loggedin == true) {
rec_status("maybe");
}
});
.
success: function(data) {
if(data === "User not found"){
alert("Email or Password incorrect, please try again");
}else{
document.getElementById('loginscreen').style.display = 'none';
document.getElementById('locationover').style.display = 'none';
eval(pending_request);
pending_request = "";
}
}
Register a function to handle the click and then invoke that func directly without eval().
jQuery('#maybe_button').on('click', myFunction)
This executes myFunction when the button is clicked. Now you can "re-run" the function code every time you need it with myFunction().
And btw since you are using jQuery you can do $('#loginscreen').hide() where $ is an alias for jQuery that's auto defined.
EDIT
Please, take a look at the following code:
var pressedButton = null;
$('button1').on('click', function() {
if (!isLoggedIn()) {
pressedButton = $(this);
return;
}
// ...
});
And, in your success handler:
success: function() {
// ...
if (pressedButton) pressedButton.trigger('click');
// ...
}

Error when using `delete` as property name

I have a form that is deleting a gallery from a database. The code was working until a couple of weeks ago and I had other problems with it having to switch from jquery.interface to jquery-ui but now when I try to re-submit my changes to the svn I get an error. invalid property id. the line that throws the error is this:
post:$("#post").val(), delete:true
Whole code snippet is:
var answer = confirm("This will permanently delete this entire gallery. Are you sure you want to proceed?");
if (answer) {
$.post(
"admin-ajax.php?action=gallery_submit",
{ post:$("#post").val(), delete:true },
function(data){
if (data == 1) { //success
$('body').html('<div class="success">Your gallery has been successfully deleted.</div>');
setTimeout(function() { tinyMCEPopup.close(); }, 2000);
} else { //error
alert('There was an error with deleting your gallery, and so, it was NOT deleted.\n\r\n\rThe following error was encountered:\r\n' + data);
}
}
);
Did some syntax change for $.post that I have not been aware of, I checked the docs and do not see anything that matches.
Delete is a reserved word, so you must quote it.
{ post:$("#post").val(), "delete":true },

Categories