jquery problems
Moderator: General Moderators
-
scifirocket
- Forum Commoner
- Posts: 31
- Joined: Fri Aug 13, 2010 1:24 am
jquery problems
1) load http://eataustineat.com/testfolder/index.php
2) type in 'f' into the text field
3) try and click on a result that populates under the search area (these results are generating dynamically using javascript calls to SQL). the slider should shift the content (using jquery coda-slider) to the left to display the results(called using index.php#2) when you select a link.
Why isn't the slider working in this instance?
if anyone has a better design that would accomplish what i am trying to do, I would also like to hear that.
2) type in 'f' into the text field
3) try and click on a result that populates under the search area (these results are generating dynamically using javascript calls to SQL). the slider should shift the content (using jquery coda-slider) to the left to display the results(called using index.php#2) when you select a link.
Why isn't the slider working in this instance?
if anyone has a better design that would accomplish what i am trying to do, I would also like to hear that.
Re: jquery problems
It doesn't look like you've attached a listener to those results, to trigger the slider.
Other notes:
1) You should never use the onchange element - attach the event listener in Javascript, not your html code.
2) If you're using jQuery anyway - why not use it's much simpler ajax functionality, rather than the relatively more complex native Javascript method?
3) You should update your include jquery & libraries to the latest versions. 1.4.2 had some drastic speed improvements.
Other notes:
1) You should never use the onchange element - attach the event listener in Javascript, not your html code.
2) If you're using jQuery anyway - why not use it's much simpler ajax functionality, rather than the relatively more complex native Javascript method?
3) You should update your include jquery & libraries to the latest versions. 1.4.2 had some drastic speed improvements.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
-
scifirocket
- Forum Commoner
- Posts: 31
- Joined: Fri Aug 13, 2010 1:24 am
Re: jquery problems
Would you be able to tell me if implementing any of the changes you suggest would be difficult? I thought the "#3" was the listener.
I'm not really educated enough to know what exactly what you are suggesting (despite the fact and I'm a computer science major.). Where can I learn to implement exactly what I'm needing to?
I'm not really educated enough to know what exactly what you are suggesting (despite the fact and I'm a computer science major.). Where can I learn to implement exactly what I'm needing to?
Re: jquery problems
#1) Read the jquery documentation on the .change() function - the documentation is actually pretty good
#2) Again, read the documentation on the .ajax() function
#3) Download the latest version of the libraries & link to them rather then the outdated versions you have now.
#2) Again, read the documentation on the .ajax() function
#3) Download the latest version of the libraries & link to them rather then the outdated versions you have now.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
-
scifirocket
- Forum Commoner
- Posts: 31
- Joined: Fri Aug 13, 2010 1:24 am
Re: jquery problems
I am comparing my script:
[text]<script type="text/javascript">
function getName(value) {
$.post("searchtest.php",{partialName:value},function(data) { $("#results").html(data);
})
}
</script>
[/text]
with the example in the jquery documentation:
[text]<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
</script>
[/text]
where whould i do the .change() in my code?
[text]<script type="text/javascript">
function getName(value) {
$.post("searchtest.php",{partialName:value},function(data) { $("#results").html(data);
})
}
</script>
[/text]
with the example in the jquery documentation:
[text]<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
</script>
[/text]
where whould i do the .change() in my code?
Re: jquery problems
Attach it to the textfield.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
-
scifirocket
- Forum Commoner
- Posts: 31
- Joined: Fri Aug 13, 2010 1:24 am
Re: jquery problems
so i made this change:pickle wrote:Attach it to the textfield.
[text]<p class="em_text">
<input onkeyup="getName(this.value).change()" type="text" /></p>
[/text]
it didn't work.
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
Re: jquery problems
You completely misunderstood attaching eventsscifirocket wrote:so i made this change:pickle wrote:Attach it to the textfield.
[text]<p class="em_text">
<input onkeyup="getName(this.value).change()" type="text" /></p>
[/text]
it didn't work.
Something like
Code: Select all
$(document).ready() {
$("#id_of_your_search_box").change(function () {
$.post("searchtest.php", { name: $(this).val() },function(data) {
$("#id_of_your_result_box").html(data);
});
}
}-
scifirocket
- Forum Commoner
- Posts: 31
- Joined: Fri Aug 13, 2010 1:24 am
Re: jquery problems
[text]$(document).ready() {John Cartwright wrote:You completely misunderstood attaching eventsscifirocket wrote:so i made this change:pickle wrote:Attach it to the textfield.
[text]<p class="em_text">
<input onkeyup="getName(this.value).change()" type="text" /></p>
[/text]
it didn't work.
Something like
You basiclaly want to attach a listener that "listens" for changes in the input box, which in turn triggers your ajax request, which fills the results.Code: Select all
$(document).ready() { $("#id_of_your_search_box").change(function () { $.post("searchtest.php", { name: $(this).val() },function(data) { $("#id_of_your_result_box").html(data); }); } }
$("#searchb").change(function () {
$.post("searchtest.php", {partialName:value},function(data) {
$("#results").html(data);
});
}
}[/text]
i think this is what it should look like, but this doesn't work. in fact, it doesn't print out anything.
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
Re: jquery problems
Well I can't really help you out without any debugging information. All I can suggest is downloading Firebug for Firefox to debug the issue.
-
scifirocket
- Forum Commoner
- Posts: 31
- Joined: Fri Aug 13, 2010 1:24 am
Re: jquery problems
it reports this error:John Cartwright wrote:Well I can't really help you out without any debugging information. All I can suggest is downloading Firebug for Firefox to debug the issue.
[text]missing ; before statement
[Break on this error] $(document).ready() {\n[/text]
I'm not seeing where a ";" should go. don't these usually go at the end of statment lines?
[text]$(document).ready() {
$("searchb").change(function () {
$.post("searchtest.php", {partialName:value},function(data) {
$("#results").html(data);
});
}
}
[/text]
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
Re: jquery problems
I had a typo, was missing a ); to close the ready() function.
[text]$(document).ready() {
$("searchb").change(function () {
$.post("searchtest.php", {partialName:value},function(data) {
$("#results").html(data);
});
}
});[/text]
Secondly, you changed the parameters to the post call back to a static string. You need to pass it the val of the input
[text]$.post("searchtest.php", {query: $(this).val()}, etc etc[/text]
[text]$(document).ready() {
$("searchb").change(function () {
$.post("searchtest.php", {partialName:value},function(data) {
$("#results").html(data);
});
}
});[/text]
Secondly, you changed the parameters to the post call back to a static string. You need to pass it the val of the input
[text]$.post("searchtest.php", {query: $(this).val()}, etc etc[/text]
-
scifirocket
- Forum Commoner
- Posts: 31
- Joined: Fri Aug 13, 2010 1:24 am
Re: jquery problems
i'm getting the same error in firebug:
[text]missing ; before statement
[Break on this error] $(document).ready() {\n[/text]
[text]missing ; before statement
[Break on this error] $(document).ready() {\n[/text]
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
Re: jquery problems
Bah.
[text]$(document).ready() {
$("searchb").change(function () {
$.post("searchtest.php", {partialName:value},function(data) {
$("#results").html(data);
});
});
});[/text]
[text]$(document).ready() {
$("searchb").change(function () {
$.post("searchtest.php", {partialName:value},function(data) {
$("#results").html(data);
});
});
});[/text]
-
scifirocket
- Forum Commoner
- Posts: 31
- Joined: Fri Aug 13, 2010 1:24 am
Re: jquery problems
same error message:
[text]function getName(value) {
$(document).ready() {
$("searchb").change(function () {
$.post("searchtest.php", {partialName: $(this).val()},function(data) {
$("#results").html(data);
});
});
});
[/text]
[text]function getName(value) {
$(document).ready() {
$("searchb").change(function () {
$.post("searchtest.php", {partialName: $(this).val()},function(data) {
$("#results").html(data);
});
});
});
[/text]