jQuery Forum

In my quest to implement ajax for the first time i've hit a brick wall. i've been searching for hours for a solution but with no success.   Here  is the problem.

this code works and shows an the alert

1. function SaveReport(){
2. $j.ajax({
3.     type: "POST",
4.     url: "newXMLDocument.xml",
5.     dataType: "xml",
6.     success: function(xml)
7.             {
8.                 if ($j("status",xml).text() == '1')
9.                     {
10.                 alert('status=1');
11.                     }
12.             }
13. });

Here is the XML document-

1. <?xml version="1.0" encoding="ISO-8859-9"?>
2. <response>
3.  <status>1</status>
4.  <time>1170323512</time>
5.  <message>
6.    <author>John Citizen</author>
7.    <text>Hello world!</text>
8.  </message>
9.  <message>
10.    <author>John Citizen</author>
11.    <text>Hello world again!</text>
12.  </message>
13. </response>

This code failed, notice the difference is that i'm calling a php file instead of an xml file

1. function SaveReport(){
2. $j.ajax({
3.     type: "POST",
4.     url: "savereport.php",
5.     dataType: "xml",
6.     success: function(xml)
7.             {
8.                 if ($j("status",xml).text() == '1')
9.                     {
10.                 alert('status=1');
11.                     }
12.             }
13. });

Here is the PHP code

1. <?php
2. //echo xml
3. header("Content-type: text/xml");
4. 
   
5. echo "
6. <?xml version=\"1.0\" encoding=\"ISO-8859-9\"?>
7. <response>
8.  <status>1</status>
9.  <time>1170323512</time>
10.  <message>
11.    <author>John Citizen</author>
12.    <text>Hello world!</text>
13.  </message>
14.  <message>
15.    <author>John Citizen</author>
16.    <text>Hello world again!</text>
17.  </message>
18. </response>"
19. ?>

why is it not working? my PHP code is outputting the contents of the xml document.  Thanks

OK, I've done some looking around on the web, and there are some tutorials but a lot of them are above my head.  I'll explain the main goal and ask my specific question.    The main goal is to submit a large form to the database, and if it is successful, direct the user to a specific page. Initially given my experience level I would have loaded a page and passed the form data to the new page via $_GET.  That page would save the data and if successful, notify the user and provide a link for them to click to get to another page.  Well, the form data can be very large (lots of textarea's) and I am concerned that it could possibly become larger than 2048 charachers (apparently a limit that IE has).  Plus I decided it would be a good idea for me to learn other ways to approach this problem. 

I want to use jquery post to saveform.php, saveform.php will enter the data into the database and then if it is successful must return something (XML...?)  the user will be notified that the form has been saved and the page will be redirected to a location where they can choose to enter a new form.  

Ultimately I have 3 areas that I need help with

1. The $post() code
2. How to return something from saveform.php (preferably xml I think, If i know how to do that I can apply it in             otherlocations)
3. How to handle the xml return with javascript

Thanks for your help

I have a form that is pretty large, so to break it up I hide certain fields unless the information is required.
(example: If you select that you have a dog, more form fields show that ask about the dog. otherwise they are hidden) 

The problem is this. Lets say that I select that I a have a dog, put in some information in the newly shown fields, and then decide I don't want to say that I have a dog.  If I select no to the dog question (the radio button that shows or hides the fields) the information I entered is still there.  I need the information in those fields to be cleared when the fields are hidden.

this is the structure of my current HTML

1. <div class="dog_hidden">
2.       <label for="color"> Color of Dog</label>
3.       <input type="text" name="color"/ >
4. </div>
5. <div> class="dog_hidden">
6.       <label for="breed">Breed of dog</label>
7.       <input type="text" name="breed"/>
8. </div>

If the person says the have a dog, then all fields with class .dog_hidden will be shown, otherwise they are hidden.  How can I select all form field types contained within a div of class="dog_hidden" and clear there value (either reset or set to an empty string " ") .

The goal is that every time the fields are hidden they need to be cleared or zeroed.  Its important that this information never get put into the database (all fields with a value will be entered).

Thanks!

Talon

Problem is hard to explain, so I'll just show you.  check out this youtube link.  http://www.youtube.com/watch?v=8NY1KI2iVII

You can see that the divs are repositioning themselves.  I have tried removing the effects and the focus() with no success.    It works fine in chrome and firefox but not in IE. After some testing It displays only the top <div> correctly.  in this case its #business, however if I were to rearrange the <div>'s the one nearest the top would work correctly when selected.  Any advice?  I'm using IE8.

Here is the offending code.

1.      <div class="field">
2.                 <label  for="location">Location</label>
3.                 <input id="location" name="location" type="text"/>
4.             </div>
5.             <div class="field">
6.                 <label for="eventdate">Event Date</label>
7.                 <input id="eventdate" type="text"/>
8.             </div>
9.             <div class="field">
10.                 <label for="meethingtype">Type of Meeting</label>
11.                 <select id="meetingtype" name="meetingtype">
12.                     <option value="city_c_meeting">City Council Meeting</option>
13.                     <option value="mayor">Meeting With Mayor</option>
14.                     <option value="councilperson">Meeting With Council Person </option>
15.                     <option value="business">Meeting With Business </option>
16.                     <option value="othermeeting">Other</option>
17.                 </select>
18.             </div>
19.         
20.             <div class="field textbox" id="business">
21.                 <label for="businessname">Business Name</label>
22.                 <input type="text" id="businessname" size="20">
23.             </div>
24.                <div class="field textbox" id="othermeeting">
25.                 <label for="othermeetingtype">Meeting Type</label>
26.                 <input type="text" id="othermeetingtype" size="20">
27.             </div>
28.             <div class="field textbox" id="councilperson">
29.                 <label for="councilpersonname">Name</label>
30.                 <input type="text" id="councilpersonname" size="20">
31.             </div>

and the javascript

1.         $j(document).ready(function()
2.         {
3.             $j('.field, input, select, label').focus(function(){
4.             $j(this).parents('.field').addClass("over");
5.             }).blur(function()
6.                 {
7.                     $j(this).parents('.field').removeClass("over");
8.                 });
9.                     $j('.textbox').hide();
10.                     $j('#meetingtype').change(function() {
11.                     $j('.textbox').hide();
12.                     $j('#' + $j(this).val()).show("slide",{},1000);
13.                     $j('#councilpersonname, #businessname, #othermeetingtype').focus();
14.                                                         });
15.                   
16. });

I have an html drop down list.  the list has an 'other' option.  when the other option is selected I want a text box to pop up to the left of it for entry. I was thinking about using a hidden <div> to contain the text box.  and when other is selected to unhide it.  How do I unhide it when other is selected?  Thanks.

The question I have is more theory/best practice question.  I'll tell you my goal (which I've been working for some time but have yet to find an elegant solution) and what I've tried.  I'd like to hear how more experience programmers would approach the problem. 


Before I started using jquery it seemed very simple.  the page.html would be divided into 2 main <div> tags. I would use ajax to load an external webpage content.html into area 2.  Things worked great, The most important was that it allowed for separate files for content, keeping things very neat.

When I started using jquery, I had to use the jquery load method, and live()  to allow the jquery ui datepicker to function(or any jquery code) from the dynamically loaded page.  At this point, things were working well except that the datepicker would not show until you first had to click the field, click off of the field, and click the field again.  I was told that using  a callback on .load() would work.  It did, which brings us to the current problem. Area 2 is going to have a lot of various pages and information that may be shown at any given time (all contained within separate pages)  It would be difficult to use callback functions for every page that may be displayed.  It makes it so that I can't compartmentalize the content into separate files because the jquery code basically has to be in the main page, not within the separate html files.

How would you guys approach this situation? Even if I have to start fresh with a totally new approach I'd be up for it. I see this type of layout all over so i'm wondering how others accomplish it.  Thanks.

OK, I have an interesting problem.  The page has a datepicker on it. When the page first loads I'm required to click somewhere on the page (just in blank space) and then click the datepicker in order for it to come up. If the page loads and I immediately move the mouse to the date picker it does not load.  I think the problem is related to the menu bar that is on the page (this menu bar was created by another programmer and is a created using php and jquery). Why could this be happening?  I'm thinking that it is related to his code and its halting javascript from being executed until the focus is on another part of the page (just a guess, i'm very new at this).  Is there a way to make the focus change automatically?

I'm not sure if I explained myself well, so if you have any questions about the situation I'll try to explain better.  Thanks for your help.

talonosi

Here is my problem, been working on it for a while now but still having a few problems.

The goal is to load external code into a <div>.  from the research i've done and the help on this forum the best way to load the content is to use the .load jquery function.  This is working properly and it loads static pages without a problem.   My goal now is to be able to use jquery in the newly loaded content. the problem that I have is that when the content is loaded into the <div> the event handlers do not work.  I've been told that I should use .livequery or .live to accomplish this.  I'm having trouble getting either function to work properly.  what is the proper way to use .live or .livequery in this situation?

Thanks.

Clay

For starters i'm new to jquery and javascript, hence my post here.  I've tried to do research but I'm not finding the answers.  Here is the problem. the web page i'm working on has 2 area's or panes. one that changes dynamically via ajax and one that stays the same to control the dynamic area.  The dynamic content is loaded with the following function to load a given page into the <div>. 

1. function loadPage(filename,id)
2. {
3.     var http = getHTTPObject();
4.     http.open("GET",filename,true);
5.     http.onreadystatechange =
6.     function()
7.     {
8.         if(http.readyState == 4)
9.         {
10.             document.getElementById(id).innerHTML = http.responseText;
11.         }
12.     };
13.     http.send(null);
14. }

      When the content is loaded into the div jquery does not work. More specifically i'm using the jquery ui datepicker.  The page that is loaded via loadPage() work fine if its not called by the function. but once it is it seems all javascript does not function. Any ideas?  Thanks!

Clay