Help with improper code

I have a code issue, this does not appear on the page. If you could take a peek, maybe a misplaced bracket, or improper code… etc

var myConfirm;

$(document).ready(function() {

  myConfirm = new jBox('Confirm', {
    content: $('.my-jbox-form'),
    width: 830,
    height: 230,
    cancelButton: 'Return Home',
    confirmButton: 'Continue',
    closeOnConfirm: false,
    closeOnEsc: false,
    confirm: function() {
      $.ajax({
      url: 'https://...../submit.php',
        method: 'post',
        data: {
        	name: $('#name').val(),
        	email: $('#email').val()
        },
        dataType: "json",
        success: function (response) {
	console.log(response);
    	if (response.success)
    	{
        //myConfirm.close(),
        new jBox('Notice', {
	color: 'red',
	 content: 'Please fill in your name and email'
	 });
	 } else {
	new jBox('Notice', {
	color: 'green',
	content: 'You filled in the textfields'
	});
	 myConfirm.close();
	 }
	 }
      return false;
    }.bind(this),
    cancel: function() {
      //disable(),
      window.location.href = "/index.html";
    }
  }).open();
});

any help is appreciated

My sneaky technique is to put the code through beautifier.io which helps to separate me from assumptions I might make from the code.

It gives a too-large indent inside the document ready section, and also inside of the ajax call.

The first thing I notice is that the success and cancel properties are not at the same level of indentation. There is one too many closing braces after the success return statement. That fixes the ajax indenting issue.

.The content of the ajax call prevents me from seeing what’s above and below it at the same time. So let’s move the ajax properties out to a separate variable.

    var ajaxProps = {
        url: 'https://...../submit.php',
        ...
    };

That let’s us more easily understand the rest of the code:

    myConfirm = new jBox('Confirm', {
        content: $('.my-jbox-form'),
        width: 830,
        height: 230,
        cancelButton: 'Return Home',
        confirmButton: 'Continue',
        closeOnConfirm: false,
        closeOnEsc: false,
        confirm: function confirm() {
            $.ajax(ajaxProps).open();
        });

Which tells us that the confirm method is missing a single closing curly brace, and the document ready is not closed either.

After fixing that up everything indents nicely, and should run a lot better for you.

I would next run the code through JSLint, but the new jBox() code to make the code “proper”, but what I say - I’m lazy - efficient. :slight_smile:

1 Like

Thanks for your reply and beautifier tip. Much appreciated.
However, I don’t understand your remedy reply.
So, I added the code at the beautifier site and don’t understand thier results.
Tried this without success:

  myConfirm = new jBox('Confirm', {
    content: $('.my-jbox-form'),
    width: 830,
    height: 230,
    cancelButton: 'Return Home',
    confirmButton: 'Continue',
    closeOnConfirm: false,
    closeOnEsc: false,
    confirm: function() {
      $.ajax({
      	url: 'https://......./submit.php',
        method: 'post',
        data: {
        	name: $('#name').val(),
        	email: $('#email').val()
        },
        dataType: "json",
        success: function (response) {
		console.log(response);
    	if (response.success)
    	{
        new jBox('Notice', {
		  color: 'red',
		  content: 'Please fill in your name and email'
		  });
		  } else {
		 new jBox('Notice', {
		 color: 'green',
		 content: 'You filled in the textfields'
		});
myConfirm.close();
      return false;
    }.bind(this),
    cancel: function() {
      //disable(),
      window.location.href = "/index.html";
  }).open();
  )};

Any additional guidance is appreciated.

That section above is where it’s telling you to focus on next. Where is the end of the if statement?

Thanks for your kind reply.
Regarding ‘focus on next’, I focused and focused and focused, trying countless scenarios, without success. Such as:

if (response.success)
    	{
        new jBox('Notice', {
		  color: 'red',
		  content: 'Please fill in your name and email'
		  });
		  } else {
		 new jBox('Notice', {
		 color: 'green',
		 content: 'You filled in the textfields'
		});
myConfirm.close();
}

Shouldn’t that myConfirm.close() belong outside of the if statement?

Another way to figure this out is to attempt to run the code in your web browser.
Mine tells me in the browser console: Uncaught SyntaxError: Unexpected token '.' at the fullstop just before the bind:

      return false;
    }.bind(this),

Syntax highlighting in my editor shows me when I select the closing brace just before the fullstop, that the matching opening brace is from the else statement. That’s not right, for it should be the start of a function instead. That means that the end of the if statement is missing. But where should that closing brace for the if statement go? It doesn’t make sense to enclose both the return and the confirm.

    	if (response.success)
    	{
          new jBox('Notice', {
		    color: 'red',
		    content: 'Please fill in your name and email'
		    });
        } else {
		  new jBox('Notice', {
 		    color: 'green',
		    content: 'You filled in the textfields'
		  });
          myConfirm.close();
          return false;
        }

So moving the return out of the if statement makes sense:

    	if (response.success)
    	{
          new jBox('Notice', {
		    color: 'red',
		    content: 'Please fill in your name and email'
		    });
        } else {
		  new jBox('Notice', {
 		    color: 'green',
		    content: 'You filled in the textfields'
		  });
          myConfirm.close();
        }
        return false;

But does it make sense for myConfirm to be in the if statement? Someone else other than me would know more about that, so I’ll leave it inside the for loop for now.

What happens when I now try to run that code in my web browser? I’m told: Uncaught SyntaxError: Unexpected token ')' at the open method.

    cancel: function() {
      //disable(),
      window.location.href = "/index.html";
  }).open();

In my code editor when I select the closing parentheses just before the open method, it is the opening brace for the ajax object that’s shown as the opening of it. It’s not valid for a brace to open and a parenthesis to close. { … ), so something’s missing. Let’s put in the closing brace for the cancel function:

    cancel: function() {
      //disable(),
      window.location.href = "/index.html";
    }
  }).open();

And my web browser give me another error at a new location. New is good. This time the error is Uncaught SyntaxError: Unexpected token ')' at a different line. It’s at a strange piece on the line below the open method.

  }).open();
  )};

It seems obvious that the brace and parenthesis are switched around, but it does no harm to check. Placing my cursor on the closing parenthesis I see that the opening part of it is the brace at the start of the confirm function. I now feel more confident about switching around the parenthesis and brace from )}; to }); and check again. The closing parenthesis doesn’t have a matching opening parenthesis. Instead the opening is a curly brace from the new jBox confirm line.

The solution is to use a single closing brace for to close the confirm method, and follow it with }); to close the new jBox confirm.

    }).open();
  }
)};

The deep nesting that you have in your code there does make it more difficult for you to understand what your code is supposed to be doing.

Back to the web browser and I’m told Uncaught ReferenceError: jBox is not defined which spells the end of my troubleshooting. The code structure looks to be valid now, and you can carry on with testing things out in an environment that supports what the code is supposed to do.

1 Like

Now that the code is seems to be cromulent, let’s do something to improve the problem of deep nesting.

A good first step is to name every function, as a preparatory step to later on extract them.

    // confirm: function() {
    confirm: function submitForm() {
...
            // success: function (response) {
            success: function successfulSubmit(response) {
...
            // cancel: function() {
            cancel: function cancelSubmit() {

Now on looking at the code structure, it seems that the confirm and cancel methods should be at the same level, but cancel is currently with the success method. We have found an immediate unintended benefit already from doing this further work. Closing off the ajax and submitForm are needed to remedy that, so that when the submitForm function is closed, we then go on to the cancelSubmit function.

            }.bind(this),
        });
    },
    cancel: function cancelSubmit() {
        //disable(),
        window.location.href = "/index.html";
    }
}).open();

We can now extract out these functions, to make the overall structure of the code easier to understand.

function successfulSubmit(response) {
    ...
}
function submitForm() {
    $.ajax({
        ...
        success: successfulSubmit.bind(this),
    });
}
function cancelSubmit() {
    ...
}
myConfirm = new jBox('Confirm', {
    ...
    confirm: submitForm,
    cancel: cancelSubmit
}).open();
1 Like

A post was merged into an existing topic: What is a function to have arrow keys move cursor?

Paul, thanks for taking the time to reply/instruct. It was extremely helpful. Greatly appreciated… :+1:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.