trevor1940
asked on
jQuery: passing variables from AJAX generated html into javscript function
Hi
I've been struggling to get this to work and have attempted several solutions none work
Workflow:
User clicks a URL which calls a PHP script, this loads into a div below the link
Within the new content is a button which has attributes these need passing into a new function which again loads new content in this Div
I tried passing 2 variables within the onclick like here This caused ReferenceError: MyWord is not defined or SyntaxError: missing ) after argument list if using My Word
I'm now getting
"id {object HTMLButtonElement) Tag undefined
HTML
HTML generated from first load function
I've been struggling to get this to work and have attempted several solutions none work
Workflow:
User clicks a URL which calls a PHP script, this loads into a div below the link
Within the new content is a button which has attributes these need passing into a new function which again loads new content in this Div
I tried passing 2 variables within the onclick like here This caused ReferenceError: MyWord is not defined or SyntaxError: missing ) after argument list if using My Word
I'm now getting
"id {object HTMLButtonElement) Tag undefined
$(function(){
$('a').click(function(e) {
e.preventDefault();
$(this).next('.resp').load( $(this).attr('href') );
});
function myFunction(me){
var ID = me.getAttribute("id");
var Tag = me.getAttribute("tag");
$(this).closest(".resp").html ("<p>ID " + ID + "Tag" + Tag + "</p>>");
}
});
HTML
<div>
<a id="1" href="myfile.php?param=My Word&ID=1">My Word</a>
<div id='resp_1' class='resp'></div>
<a id="2" href="myfile.php?param=MyWord&ID=2">MyWord</a>
<div id='resp_2' class='resp'></div>
</div>
HTML generated from first load function
<button id="Butt_1" data-tag="My Word" onclick="myFunction(this)">My Word</button>
<!-- or second URL -->
<button id="Butt_2" data-tag="MyWord" onclick="myFunction(this)">MyWord</button>
Last Comment
ASKER
Are you getting errors or is it just not working.Yes
"id {object HTMLButtonElement) Tag undefined
I changed $('a').click(function(e)
to
$(document).on("click", "a", function(e)
also tried
$('a').on("click", function(e)
I'm still getting the same error
<a> click is being intercepted and loaded into the next <div>The Button code is generated by PHP as a result of this click / query
Clicking this button I get the error
What are you expecting to happen when you click the button?
I see the problem - working on a sample now
ASKER
I've also changed
On clicking the generated button I now get error
"id undefined Tag undefined"
function myFunction(){
var ID = $(this).attr('id');
var Tag = $(this).attr("data-tag");
$(this).closest(".resp").html ("<p>ID " + ID + "Tag" + Tag + "</p>>");
}
On clicking the generated button I now get error
"id undefined Tag undefined"
ASKER
On clicking the button I'm expecting the div containing the button to be replaced
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Julian Thanx
After 2 days It works, I've been trying to work it out myself and tried multiple things which is probably why i've been confused.
BTW my dev is done on a closed system so I'm surprised there wasn't more typos or errors in the code posted here like location of MyFunction
For future reference can to explain the following
Why use
$('a').on("click", function(e)
and not
$('a').click(function(e)
I was under the impression using the jQuery .load() handled binding new content to the dom
According to the jQuery manual you get the data attributes like so
var tag = $(this).data('tag');
Why did this fail and you code work
var tag = this.dataset.tag
In the PHP I've not seen the use of {} around variables why is this used
<button id="Butt_{$id}" data-tag="{$id}">My Word</button>
After 2 days It works, I've been trying to work it out myself and tried multiple things which is probably why i've been confused.
BTW my dev is done on a closed system so I'm surprised there wasn't more typos or errors in the code posted here like location of MyFunction
For future reference can to explain the following
Why use
$('a').on("click", function(e)
and not
$('a').click(function(e)
I was under the impression using the jQuery .load() handled binding new content to the dom
According to the jQuery manual you get the data attributes like so
var tag = $(this).data('tag');
Why did this fail and you code work
var tag = this.dataset.tag
In the PHP I've not seen the use of {} around variables why is this used
<button id="Butt_{$id}" data-tag="{$id}">My Word</button>
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thanx I think I'll need to study this in the morning
One thing that seems to catch me is when too bind elements that don't exist
So what do you do when the only static element is the body or <body> <div class=content> and you have multiple buttons / elements loaded dynamically that need to call different functions depending on there parent or class which is also loaded dynamically?
You can't call this because each button will do the same thing
and if I'm understanding correctly you can't do this either because Myclass dosn't exist when $(function is run
nor this as ".ButtonParent" dosn't exist when $(function is run
I'm guessing you'll have to load the content and then call a 'BindIt' function and put the code within it?
I realise I'm taking this to ex-streams and I'm going off topic now
One thing that seems to catch me is when too bind elements that don't exist
You need to bind the .on() to a parent element that is static
So what do you do when the only static element is the body or <body> <div class=content> and you have multiple buttons / elements loaded dynamically that need to call different functions depending on there parent or class which is also loaded dynamically?
You can't call this because each button will do the same thing
$('.content').on('click','button', function() { ...
and if I'm understanding correctly you can't do this either because Myclass dosn't exist when $(function is run
$('.content').on('click','button .Myclass', function() { ...
nor this as ".ButtonParent" dosn't exist when $(function is run
$('.ButtonParent').on('click','button', function() { ...
I'm guessing you'll have to load the content and then call a 'BindIt' function and put the code within it?
I realise I'm taking this to ex-streams and I'm going off topic now
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thank you for your help and more so for the explanation
You are welcome.
HTML
HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.
62K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
There are a lot of variables in this question.
For instance you have $('a').click - if you are expecting this to bind to <a> elements in the returned html it won't as it is statically bound - you would need to use .on() for that to work.
I am also not clear on the flow. I understand the first bit where the <a> click is being intercepted and loaded into the next <div> but where does the <button> code come in - is that what is being loaded into the <div> - if so what is it that is not working?