Page 1 of 2

jquery problems

Posted: Fri Sep 24, 2010 3:51 pm
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.

Re: jquery problems

Posted: Mon Sep 27, 2010 10:20 am
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.

Re: jquery problems

Posted: Thu Sep 30, 2010 10:12 pm
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?

Re: jquery problems

Posted: Fri Oct 01, 2010 9:39 am
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.

Re: jquery problems

Posted: Fri Oct 01, 2010 10:26 pm
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?

Re: jquery problems

Posted: Mon Oct 04, 2010 9:48 am
by pickle
Attach it to the textfield.

Re: jquery problems

Posted: Fri Oct 08, 2010 2:45 pm
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.

Re: jquery problems

Posted: Fri Oct 08, 2010 2:57 pm
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.

Re: jquery problems

Posted: Fri Oct 08, 2010 3:44 pm
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.

Re: jquery problems

Posted: Fri Oct 08, 2010 3:49 pm
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.

Re: jquery problems

Posted: Fri Oct 08, 2010 3:57 pm
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]

Re: jquery problems

Posted: Fri Oct 08, 2010 4:22 pm
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]

Re: jquery problems

Posted: Fri Oct 08, 2010 9:55 pm
by scifirocket
i'm getting the same error in firebug:

[text]missing ; before statement
[Break on this error] $(document).ready() {\n[/text]

Re: jquery problems

Posted: Sat Oct 09, 2010 1:17 am
by John Cartwright
Bah.

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

Re: jquery problems

Posted: Sat Oct 09, 2010 9:16 am
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]