Databases
StackOverflow2013
Postsdbo
POCannot Modify/Manipulate Dynamic Content From Ajax/JSON Response for A Dynamic PHP Form
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCannot Modify/Manipulate Dynamic Content From Ajax/JSON Response for A Dynamic PHP Form
    primarykey
    data
    text
    <p>I need a dynamic form which is supposed to work like this:</p> <ol> <li>When user press "ADD" button, appear a new ..&lt;.div> DOM to select a package.</li> <li>Depending on the package, the row must change color (by adding/removing some classes).</li> </ol> <p>But I can't get it working. Here is my HTML:</p> <pre><code>&lt;button onclick='addDay();'&gt; &lt;div class='content'&gt; &lt;/div&gt; </code></pre> <p><strong>My Javascript:</strong></p> <pre><code>//FUNCTION 1: LOAD AJAX CONTENT function addDay() { baseUrl = $('input#helper-base-url').val(); //Set caching to false $.ajaxSetup ({ cache: true }); //Set loading image and input, show loading bar var ajaxLoad = "&lt;div class='loading'&gt;&lt;img src='"+baseUrl+"assets/images/loading.gif' alt='Loading...' /&gt;&lt;/div&gt;"; var jsonUrl = baseUrl+"car/add_day/"+count; $("div#loading").html(ajaxLoad); $("div#content").hide(); $.getJSON( jsonUrl, {}, function(json) { temp = ""; if(json.success==true) { temp = json.content; } //Display the result $("div#content").show(); $("div#content").html($("div#content").html()+temp); $("div#loading").hide(); }); } //FUNCTION 2: MODIFY AJAX CONTENT $("#content").on("change", "select.switch", function (e) { e.preventDefault(); //Get which row is to be changed in background's color id = this.id; id = id.substr(6); //Add class "package1" which change row's background color row = "row"+id; row.addClass('package1'); </code></pre> <p>});</p> <p><strong>My PHP</strong></p> <pre><code>function add_day($count) { $temp = "&lt;div class='row".$count."'&gt; &lt;select id='switch".$count."' class='switch'&gt; &lt;option value='1'&gt;Package 1&lt;/option&gt; &lt;option value='2'&gt;Package 2&lt;/option&gt; &lt;/select&gt; &lt;/div&gt;"; $result = array( 'success' =&gt; true, 'content' =&gt; $temp, ); $json = json_encode($result); echo $json; } </code></pre> <p>PS. The form is not as simple as this but to make the problem solving easier, I remove the details. But I can't seem to change the class on the fly. Do we have a solution or a good work around here?</p> <p><strong>Edit 1:</strong> Sorry I didn't make myself clear before. I had no problem with getting the id or variable (it was okay, when I alert it the right value comes out - but after I add the class, no color changes is seen). I run it:</p> <p>a. On button click, load Ajax content.</p> <p>b. Ajax content (which results contains a ) loaded successfully.</p> <p>c. FAIL: On change, add class "package1" to the div row. (So, I had no problem with getting the right id or class name. When I alert the variables it gives the right result, BUT the color doesn't change. I can't check whether class is successfully added or not.)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USwhy.you.and.i
    1. USwhy.you.and.i
    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
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COyou get any warning or error?
      singulars
      1. POCannot Modify/Manipulate Dynamic Content From Ajax/JSON Response for A Dynamic PHP Form
      1. USPurus
    2. CONo error in Error Console.
      singulars
      1. POCannot Modify/Manipulate Dynamic Content From Ajax/JSON Response for A Dynamic PHP Form
      1. USwhy.you.and.i
 

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