Response title
This is preview!
Move this topic
accordion loading data fromn database not working
in Using jQuery UI
•
7 years ago
I have an accordion and a sql database, below is my html
My problem is it does ALWAYS bring out data into the accordion when
I click on the Link. Sometimes it can be two clicks.
Any ideas how to fix my problem?
<script>
$("accordion").accordion({
autoHeight:false, heightStyle: "content",cache:false
});
$("h2,"#accordion").click(function(e) {
var contentDiv = (this).next("div");
contentDiv.load($(this).find("a").attr("href");
});
</script>
<div id="accordion">
<h2 id="<%=lnkPid%>">
<a href="load.asp?pid=lnkPid"><%=strPerson%></a>
</h2>
</div>
<div id="<%=lnkPid%>"></div>
1
Replies(5)
Are you sure its needs two clicks?
It may be sometime your ajax is slow and before it finished you clicked it again.
Better you keep checking from console for the ajax called or not while you think it requires two clicks.
Or you can have an loader icon which you can make visible while ajax call and hide when ajax responded.
If loader doesn't comes on click then you will be sure 1st click doesn't worked.
It may be sometime your ajax is slow and before it finished you clicked it again.
Better you keep checking from console for the ajax called or not while you think it requires two clicks.
Or you can have an loader icon which you can make visible while ajax call and hide when ajax responded.
If loader doesn't comes on click then you will be sure 1st click doesn't worked.
Leave a comment on Sµßhrånil∂'s reply
Why is this an accordion? You don't have a heading followed by its
content, or multiple headings even (or is that just an artefact of your snippet).
Leave a comment on kbwood.au's reply
There is more than one thing wrong with this.
You have <a> inside of
<h2>. If
<a> has
some different margin than <h2> and so the
margins do not collapse, now user might click on either the <a> or the <h2> depending on
exactly where they click.
The biggest target, though, in any case, will be the <a> and if the
user clicks there, they will get a normal navigation, since I see now
code to .preventDefault()
on the <a> tag.
Then the click will bubble up to the <h2>, and that
will run your Ajax code.
At that point, it is "off to the races". Literally.
Leave a comment on watusiware's reply
As well, it appears you have two elements with the same ID. (Assuming
your template code <%=
InkPid %>
produces the same string in both cases.)
That is invalid HTML.
Irrelevant to this particular problem, since you don't
reference that ID for element search in the code that you show. But
suspect the goofy HTML structure and wanting to get click on the <h2> is meant as
a work-around for the invalid HTML.
Leave a comment on watusiware's reply
More problems:
1.
$("accordion").accordion({
Must be a typo when
you posted to the forum, I'd guess, because this makes
an accordion out of elements like
<accordian>.
Did you mean to place
a
#
at the front?
2.
The binding in your script
cannot work, because it comes before the elements it
references. It needs to go after, or else use a delegation.
Again, assuming you transposed the order when you posted to
the forum. One of the reasons it's always better to
provide a link to your site or use a demo site like jsFiddle
instead of posting code snippets to the forum.
3.
var contentDiv = (this).next("div");
Did you mean to write
$(this)
?
----
I'd also advise not conflating database keys with HTML IDs. They
have completely different purposes. Just because it is called
"id" doesn't mean it's the best place to hang your
database key in the HTML. I always use data- attributes for
this, and put them on the outer-most container that "goes
with" the database row. If you also place some CSS class on that
container that indicates that it represents some sort of database
table item, then you can easily dig it out using .closest() and .data() should you need
it in some code.
Here there is really no need, though, since you have an href to
hang it on, and I don't see anything about the code you've
shown us that needs to use the key value in your Javascript.
Simplify.
<div class='lnkpid-accordion'>
<h2>
<a href="load.asp?pid=lnkPid"><%=strPerson%></a>
</h2>
</div>
<div></div>
<script>
$(".lnkpid-accordion").accordion({
autoHeight:false,
heightStyle: "content",cache:false
});
$(".lnkpid-accordion
a").click(function(e) {
var $a = $(this);
var $contentDiv = $a.closest(".lnkpid-accordion").next("div");
$contentDiv.load($a.attr("href");
e.preventDefault();
});
</script>
(But did you meant
to place your content INSIDE the
accordion, instead of after it?)
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to darrylw99's question