0

I'm new to jQuery and am struggling to figure out an issue that's plaguing me.

In my code, I am appending a new form after a DIV, and have set up a custom button for submission. I set up an on-click jQuery event, but am having trouble accessing one of the local variables successfully.

....
callbacks {
  open function() {
    this.wrap.on('click.pinhandler' .socialLink', function(e) {
var fileName = $(this).attr('fileName');
var eventName = $(this).attr('eventName');
var destination = "test@test.com";
$(".test-area").after('<input type="email" id="emailShare" placeholder="enter your email">
<div id="btnSubmit"><div id="btnLabel">GO</div>
<script>
$("#btnSubmitA").on("click", 
  function(event) { 
    destination=$("#emailShare").val();
    console.log("About to send mail: " + destination); 
    $.ajax({
      type: "GET",
      url: "https://myURL/api.php?fileName=' +fileName+ '&eventName=' +eventName+ '&destination=' +destination+ '",
      headers: { "Access-Control-Allow-Origin": "https://babelandphoto.com/babeconnect/getShortcode.php" },
      cache: false,
      success: function(data) { 
        console.log("Response:" + data["status"] + this.destination)
      }
    }); 
   });
   </script>');
  });
 }
}
...

This is all embedded in a callback from a Magnific Popup button, in which a user clicks a button within the popup and the above is triggered. In my code, I am setting the global destination variable with the code;

destination=$("#emailShare").val();

Just before my AJAX call, I am logging the state of destination, with successfully reports the proper user input of the #emailShare text field. I am logging like so;

console.log("About to send mail to " + destination)

Both before the call, and in the response, I am successfully logging the proper variable. But the actual variable being sent to the API is still the global variable, having never been updated.

I recognize this is complex, but I"m unsure if there's a better way...

ZbadhabitZ
  • 2,753
  • 1
  • 25
  • 45
  • Where in your .ajax() call is `destination` updated? – Jonathan M Mar 09 '18 at 02:46
  • please show more code – huan feng Mar 09 '18 at 02:46
  • 5
    Your `url:` field concatenation is done incorrectly. – Randy Casburn Mar 09 '18 at 02:46
  • Can you elaborate @RandyCasburn? And @JonathanM, the `destination` variable is not updating in the AJAX call, but rather before the AJAX call/Console log, during a click event. My only thinking is that since the Console.log is functioning normally, the great jQuery function and click event is functioning normally. – ZbadhabitZ Mar 09 '18 at 02:49
  • the commingling of single/double quotes during your url concatenation is treating your variables to be sent as string representations only. – Napoli Mar 09 '18 at 02:51
  • I put it in an answer so you can see the syntax highlighting. – Randy Casburn Mar 09 '18 at 02:52
  • regardless, if `destination` is being set inside the `function()` which holds your `$.ajax()` call, the value will be lost as that's a local scope, and not global; but we would need to see your code. – Napoli Mar 09 '18 at 02:53
  • @ZbadhabitZ please fix the elephant in the room, the concatenation isn't formatted properly, fix that and let us know if the issue is still persisting because nobody can help without you fixing that first. – jdmdevdotnet Mar 09 '18 at 03:05
  • 1
    @ZbadhabitZ - Also, please provide a Minimal, Complete, Verifiable Example --> https://stackoverflow.com/help/mcve – Randy Casburn Mar 09 '18 at 03:09
  • I've updated the question with greater detail about what I'm after. Despite the question on concatenation, this above example works normally with all variables *except* the `destination`. – ZbadhabitZ Mar 09 '18 at 03:22
  • @Taplar it would if it was accidentally preceded w/ a `var`, which we didn't know due to partial code being posted. – Napoli Mar 09 '18 at 03:26
  • Hold on. Why is that script in an append? Is this append logic ever running twice? The fact that you are already inside javascript, and you are appending another script is *very* strange. – Taplar Mar 09 '18 at 03:27
  • @Napoli his current question has it as a global. – Taplar Mar 09 '18 at 03:27
  • @Taplar yea, edited 20 mins after i made the suggestion. – Napoli Mar 09 '18 at 03:29
  • @ZbadhabitZ can you please provide more scope? `var fileName = $(this).attr('fileName');` is using `this` which means it is referencing either something from an event, or some loop or something, that could shed some light on what you are doing. – Taplar Mar 09 '18 at 03:42
  • Add `destination: $("#emailShare").val()` as one of your ajax options and you should be all set with `this.destination` in your success call. – Napoli Mar 09 '18 at 03:52
  • I've updated again to further show where this code lives. This is all within a callback from a *Magnific Popup* plug-in, in which I've a created a button and, when the user clicks said button, the input form appears and their data can be entered. To answer @Taplar - Yes, this code keeps getting called multiple times and I don't know why. I tried putting all of the scripts in either my parent JS file, and inline in my HTML with the – ZbadhabitZ Mar 09 '18 at 05:06
  • Ok, so you got some issues here. First off, this logic is happening in a click handler. Meaning it will be creating these elements multiple times, and you are using ids in it. That's invalid markup. Also you will be creating duplicate bindings as the script you are appending is creating a click handler each time. You are going to have issues with this. I strongly recommend refactoring this logic to not create duplicate ids and not duplicate bind. – Taplar Mar 09 '18 at 16:07
  • Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Taplar Mar 09 '18 at 16:07
  • Also related to https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page – Taplar Mar 09 '18 at 16:08

1 Answers1

0

For anyone that stumbles across this, @taplar's comment in the above question got me on the right path. Specifically, this Stackoverflow post, discussed how to bind to dynamically created elements.

By refactoring my code, I ended up using the following;

$(document).on('click', '.doSocial', function(){
  //stuff happens here
});

In my case, .doSocial is a class applied to dynamically created buttons. Once the user clicks a .doSocial button, I use the //do stuff here section to add my additional dynamic HTML elements, including the form field which is now recognized by my AJAX function. If @taplar would like to answer, I'll happily mark it as correct.

ZbadhabitZ
  • 2,753
  • 1
  • 25
  • 45