Error when using `delete` as property name - javascript

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 },

Related

AJAX call not firing from inside if statement

I have the following code. There is a button in the UI that when clicked executes the if statement. I pass in a URL from a database and compare it to the current URL the user is on. If they match I want to run the code below, else I want to open the correct tab then run the code below.
With this code below I mean everything below starting from $('#sceanrioDropdownList').change(function () {...}. The code then checks a drop down and gets the selected Id from which an AJAX call is made to my web API that uses that Id in a stored procedure to return the results. The returned data is then iterated over and stored in variables which I am using to append to specific inputs, buttons and drop downs.
This is what I have so far and I think I have developed this correctly. The issue that I am currently having is that the UI wants everything from ... to be run if the if statement is true. I have tried CTRL+C and CTRL+V to copy the code into the if statement. I have also tried putting it in a new function and referencing that function n the if statement. Both do not work and I was using console.log to inspect the returned data.
It does however when I attempt to call it from inside i statement it doesn't return any data or error. It just doesn't seem to fire.
Is there a way in which I can achieve the functionality I desire? Do you have any suggestions as to if I have done something wrong. Thanks in advance.
$('#automate').click(automateButton);
function automateButton() {
if (webpageUrl == activeTabUrl) {
// do nothing
} else {
// Window opens
window.open(webpageUrl);
}
}
$('#scenarioDropdownList').change(function() {
var scenarioId = $('#scenarioDropdownList option:selected').prop('id');
getData(scenarioId);
});
function getData(scenarioId) {
$.ajax({
type: "GET",
url: 'http://localhost:54442/api/scenariodatas/GetScenarioData',
data: {
scenarioId: scenarioId
},
dataType: 'JSON',
success: scenarioData,
error: function() {
console.log("There has been an error retrieving the data");
}
});
}
function scenarioData(response) {
$.each(response, function(key, val) {
var fieldType = val.fieldType;
var fieldName = val.fieldName;
var fieldValue = val.fieldValue;
var field = $(fieldName);
if (field != undefined) {
switch (fieldType) {
case "Input":
$(field).val(fieldValue);
break;
case "Button":
$(field).click();
break;
case "Select":
$(field).val(fieldValue);
break;
}
}
})
}
onChange don´t work well with buttons because onChange detect a change in the value of your component, because of this, it´s highly recommended to use onClick when you use a button.
$('#scenarioDropdownList').click(function() {
var scenarioId = $('#scenarioDropdownList option:selected').prop('id');
getData(scenarioId);
});
I recommend you to put alerts when you are trying to test this sort of JS
EJM:
$('#scenarioDropdownList').change(function() {
alert('button active');
var scenarioId = $('#scenarioDropdownList option:selected').prop('id');
getData(scenarioId);
});
this alert allow you to know if the code is firing or not

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.

Run JavaScript on every click within AJAX success function

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) {

Jquery/Javascript Uncaught SyntaxError: Unexpected End of Input

I am getting this error from a jquery script on a specific page which performs an ajax call... and as far as I know it is generally an error caused by a missing } or )... but I have looked through the code over and over again and cannot see anything that is missing. Are there any other possible reasons this error could be flagged?
$('#socialMedia img').click(function() {
var id = $(this).prop('id').toLowerCase();
$.ajax({
url: "./socialMedia/" + id + ".php",
success: function(msg) {
$('.socialLink').css('opacity', '0.4');
$(this).css('opacity', '0.9');
if ($('#Feed').css('display') != 'none') {
$('#Feed').slideToggle(400, function() {
$('#Feed').html(msg);
});
}
else
{
$('#Feed').html(msg);
}
$('#Feed').slideToggle(400);
// if ($('#'+id+'Script').length <= 0) {
// $('head').append('<script type="text/javascript" src="./script/' + id + '.js" id="'+id+'Script"></script>');
// }
//alert(msg);
}
});
});
EDIT: you can "see" (you won't actually see anything as the error causes the page never to be loaded) the page by going to http://www.luketimoth.me... and then clicking "contact.me" (it is an AJAX site, and I have not yet implemented any handling of url specifiers)
The problem is in the AJAX response at this URL:
http://www.luketimoth.me/pages/contact.me.php
The ending </script> tag actually causes the end of that script portion - double-slash comment syntax is for javascript, the HTML parser doesn't respect it and ends the script section right there.

How can I limit the number of times an element is clicked within a minute?

I am making a PM system, and I am currently adding the message starring system (so the user can star messages).
The problem is that if the user keeps starring and unstarring a message very fast (clicking it over and over again) it will mess up the server (the host will put a 503 error until the processes stop). To star a message it is simple as clicking the star to star it/clicking again to unstar it.
Is there a way to prevent it from being clicked a lot, or rather make an error pop up after it is clicked x number of times within a minute? That would prevent it from overloading the server because when you click the star it sends an AJAX request and updates the database; when you unstar it, it does the same thing.
Is there a jQuery way of showing an error if the star was clicked within a minute or so?
These are my functions for the starring:
function addStar(id) {
$('#starimg_' + id).removeClass("not_starred").addClass("starred");
$('#star_' + id).attr({
'title': 'Starred',
'onclick': 'removeStar(' + id + ')'
});
$.get('tools.php?type=addstar', {id: id}, function(data) {
if(data=='true') { // tools.php will echo 'true' if it is successful
alertBox('The message has been starred successfully', 2500);
}
else { alertBox('An error has occurred. Please try again later.'); }
});
}
function removeStar(id) {
$('#starimg_' + id).removeClass("starred").addClass("not_starred");
$('#star_' + id).attr({
'title': 'Not starred',
'onclick': 'addStar(' + id + ')'
});
$.get('tools.php?type=removestar', {id: id}, function(data) {
if(data=='true') { // tools.php will echo 'true' if it is successful
alertBox('The message has been unstarred successfully', 2500);
}
else { alertBox('An error has occurred. Please try again later.'); }
});
}
Thanks in advance!
here is a sample solution for your addStar function. This will send the request 2 sec after the users last click, so if the user is click happy those intermediate clicks will not send requests since the timer will be reset.
function addStar(id, delayRequests)
{
...
if(delayRequests == true){
clearTimeout(timer);
timer= setTimeout(function() { sendRequestToAddStar(id); },2000);
}
else{
sendRequestToAddStar(id);
}
}
function sendRequestToAddStar(id)
{
$.get('tools.php?type=removestar', {id: id}, function(data) {...
}
In any case, IMO it's better to not show an error message.
Consider starting/resetting a countdown timer every time the star is clicked. Once it counts down, send the current state of the star. User feedback is preserved and rate-limiting is honored.
They don't need to know there's a rate limit, or that it's not sending a request every time.
(That was a lot of words to describe a simple problem, and I think we know what "starring a message" means w/o a picture :)

Categories