Databases
StackOverflow2013
Postsdbo
POusing .ajax to submit and display data but css doesn't take effect until page is literally refreshed
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POusing .ajax to submit and display data but css doesn't take effect until page is literally refreshed
    primarykey
    data
    text
    <p>I am using jquery's .ajax function to send data to a database table and display the data on the page without refreshing the page.</p> <p>In the query where I am displaying the content from the db table, each entry is wrapped in a div class named <em>.wrap</em></p> <p>The class has a bottom margin of 30 pixels. When I use my form, and the newly added data is displayed the css doesn't show up. The margin is non-existent, but wheni refresh the page manually the css takes affect. What could be the problem? Below is my code</p> <pre><code>$(function() { $('#form').submit(function(e) { var data = $(this).serialize(); // Stop the form actually posting e.preventDefault(); // Send the request $.ajax({ type: "POST", url: "submit.php", data: data, cache: false, beforeSend: function() { var error = ''; if (!$.trim($("#cat").val())) { error = "&lt;p&gt;the cat field is empty&lt;/p&gt;"; } if (!$.trim($("#box").val())) { error += "&lt;p&gt;the box field is empty&lt;/p&gt;"; } if (error) { $(".fb-error").html(error); $(".fb-error").css( "display", "block" ); xhr.abort(); } }, success: function(html){ $(".fb-error").css( "display", "none" ); $('textarea#box').val(''); $("#box-wrap").prepend(html); } }); }); }); </code></pre> <p>EDIT: </p> <p>The problem is that when i submit my form and the content appears for the first time my .wrap class is not present around the new content. but when I refresh the page the .wrap class is present around the newly added content.</p> <p>So the problem is a lack of the .wrap class immediately after the new content appears but I don't know why or how to fix it. The .wrap class is around each piece of data except the new piece.</p> <p>Each row is inside it's own class. Like</p> <pre><code>&lt;div class="wrap"&gt;row 3&lt;/div&gt; &lt;div class="wrap"&gt;row 2&lt;/div&gt; &lt;div class="wrap"&gt;row 1&lt;/div&gt; </code></pre> <p>This is what it looks like when I add a new entry to the db when sending my form via ajax.</p> <pre><code>row 4 &lt;div class="wrap"&gt;row 3&lt;/div&gt; &lt;div class="wrap"&gt;row 2&lt;/div&gt; &lt;div class="wrap"&gt;row 1&lt;/div&gt; </code></pre> <p>After I refresh it looks like</p> <pre><code>&lt;div class="wrap"&gt;row 4&lt;/div&gt; &lt;div class="wrap"&gt;row 3&lt;/div&gt; &lt;div class="wrap"&gt;row 2&lt;/div&gt; &lt;div class="wrap"&gt;row 1&lt;/div&gt; </code></pre> <p>The way I am displaying my results on my server side</p> <pre><code>foreach ($query as $row) { echo '&lt;div class="wrap"&gt;' . $row["box"] . '&lt;/div&gt;'; } </code></pre> <p>Here is my submit.php. I've wiped everything out for troubleshooting.. This is exactly what i am currently working with.</p> <pre><code>include 'connect.php'; $string = strip_tags($_POST["box"]); $stmt = $dbh-&gt;prepare("INSERT INTO boxes (box) VALUES (:box)"); $stmt-&gt;execute(array( ":box" =&gt; $string )); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USgregor
    1. USgregor
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POusing .ajax to submit and display data but css doesn't take effect until page is literally refreshed
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POusing .ajax to submit and display data but css doesn't take effect until page is literally refreshed
      1. This table or related slice is empty.
      1. VTDownMod
    1. COAfter your AJAX call the output HTML is probably not what you're expecting. When you refresh the HTML is generated differently. Use your browser's inspector to find out which CSS rules are being applied (and which aren't).
      singulars
      1. POusing .ajax to submit and display data but css doesn't take effect until page is literally refreshed
      1. USHalcyon
    2. COThis could be a needle in a haystack type of problem. I'd recommend getting both versions of the page open and inspecting the elements with the developer tools to figure out what the difference is. Once you know what it is then you can figure out how to fix it.
      singulars
      1. POusing .ajax to submit and display data but css doesn't take effect until page is literally refreshed
      1. USArcher
    3. COI know what the difference is. After I submit my form and the content appears the .wrap class isn't present around the newly added content. But when I refresh the .wrap class is present.
      singulars
      1. POusing .ajax to submit and display data but css doesn't take effect until page is literally refreshed
      1. USgregor
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload