jquery problems

JavaScript and client side scripting.

Moderator: General Moderators

scifirocket
Forum Commoner
Posts: 31
Joined: Fri Aug 13, 2010 1:24 am

jquery problems

Post by scifirocket »

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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: jquery problems

Post by pickle »

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.
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

Post by scifirocket »

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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: jquery problems

Post by pickle »

#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.
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

Post by scifirocket »

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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: jquery problems

Post by pickle »

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

Post by scifirocket »

pickle wrote:Attach it to the textfield.
so i made this change:
[text]<p class="em_text">
<input onkeyup="getName(this.value).change()" type="text" /></p>
[/text]

it didn't work.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: jquery problems

Post by John Cartwright »

scifirocket wrote:
pickle wrote:Attach it to the textfield.
so i made this change:
[text]<p class="em_text">
<input onkeyup="getName(this.value).change()" type="text" /></p>
[/text]

it didn't work.
You completely misunderstood attaching events :)

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);
      });
   }   
}
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.
scifirocket
Forum Commoner
Posts: 31
Joined: Fri Aug 13, 2010 1:24 am

Re: jquery problems

Post by scifirocket »

John Cartwright wrote:
scifirocket wrote:
pickle wrote:Attach it to the textfield.
so i made this change:
[text]<p class="em_text">
<input onkeyup="getName(this.value).change()" type="text" /></p>
[/text]

it didn't work.
You completely misunderstood attaching events :)

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);
      });
   }   
}
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.
[text]$(document).ready() {
$("#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.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: jquery problems

Post by John Cartwright »

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

Post by scifirocket »

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.
it reports this error:

[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]
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: jquery problems

Post by John Cartwright »

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]
scifirocket
Forum Commoner
Posts: 31
Joined: Fri Aug 13, 2010 1:24 am

Re: jquery problems

Post by scifirocket »

i'm getting the same error in firebug:

[text]missing ; before statement
[Break on this error] $(document).ready() {\n[/text]
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: jquery problems

Post by John Cartwright »

Bah.

[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

Post by scifirocket »

same error message:

[text]function getName(value) {
$(document).ready() {
$("searchb").change(function () {
$.post("searchtest.php", {partialName: $(this).val()},function(data) {
$("#results").html(data);
});
});
});
[/text]
Post Reply