Response title
This is preview!
Move this topic
Hi,
I'm having issue populating the html responses in 4 separate div's. All the responses are getting populated in the same div and overriding previous ones. Please assist.
Sample here
Thank you!
1
Replies(15)
Hello Jake,
Thank you for the reply. But, they are all appending to the same div. I need all the 4 ID's in 4 div's respectively. Please check here:
Thanks
Leave a comment on jakecigar's reply
Don't use alert() for debugging asynchronous code! It can make good code seem "bad", and bad code seem "good"!
Use console.log().
Leave a comment on watusiware's reply
No idea what you are intending with the code in DCompare().
It seems you make a bad assumption in your setTimeout that the Ajax request will be completed within 200mSec. It might. It might not.
Back up and tell us what you are trying to accomplish. I can't figure it out from this obtuse code.
Leave a comment on watusiware's reply
Hello Jake,
Thank you for posting me the fix but one thing I would like to tell is that, the chkFormSubmissoinIDs array is actually the value from selected check-boxes. So, the user can select from 1 to maximum of 4 checkboxes. From the code you have provided, I'm able to load div1 when one checkbox is selected or multiple, when I select multiple check-boxes at once.
But, if the user goes back and selects say, 2 more check-boxes or deletes one div and selects another checkbox, how do we handle the scenario.
These div's are populated with response for the user to compare divs.
Please assist.
That's the reason I was using the below condition:
- if ($('#div1').html() == "") {
- DFormIn($("#div1"), ID);
- }
- if ($('#div1').html() != "" && $('#div2').html() == "") {
- DFormIn($("#div2"), ID);
- }
- if ($('#div1').html() != "" && $('#div2').html() != "" && $('#div3').html() == "") {
- DFormIn($("#div3"), ID);
- }
Leave a comment on jakecigar's reply
It looks like you want to put them Im the first that is available? Why bother making the divs in advance?
JΛ̊KE
Yes, That is true. I have made 4 div's because the user required to see them on the same screen, 4 at a maximum to compare (vertically). My CSS supports 4 div's and I need to show the response in each of these divs for him to compare. Please assist.
Leave a comment on jakecigar's reply
What do you want to do with the ones after 4?
JΛ̊KE
PS… I just celebrated a 71st birthday with a dear friend. I am toasted.
Do you want to add a different div for each Ajax response or sometime else?
The maximum number of checkboxes that user will be able to select is 4 so that the maximum number of div's to load the response html (to compare, based off of the above checked boxes) is 4. If the user selects more than 4 check-boxes, we need to throw a validation message.
Minimum number of checkboxes that can be selected is 1.
- if (sel_checked == 0) {
- alert("Select at least one record to compare.");
- return false;
- }
- if (sel_checked > 4) {
- alert("You can select maximum of 4 forms to compare.");
- return false;
- }
- if (sel_checked > 0 && sel_checked < 5) {
- // displayFormsToCompare
- }
Leave a comment on jakecigar's reply
Checkboxes? Where did that come from? Update the fiddle with what you really need. Ask a question based on your code.
I’ll check back later in a 8 hours, when you make a real demo and ask a real question about your code.
Think about your question.
JΛ̊KE
Hello Jake,
I apologize for the confusion.
I have updated the fiddle but I'm not able to add response to the divs.
The user should be able to select 1 or more check boxes and on "Compare", the response (input: text) should load into the first available div(s).
Example: If one check-box is selected, on Compare, one div will be loaded with response.
If two check-box are selected, on Compare, two divs will be loaded must be loaded with html response.
If any of the div(s) is closed, the remaining checkbox's should be made available for the user to select and upon selection of new checkbox to compare, the respective response should get added to the next available div.
Here is my updated code: https://jsfiddle.net/smithspd/5kw0jtqo/3/
Thank you for your time.
Leave a comment on jakecigar's reply
You really should do a single AJAX passing in all the data at once. Have it return all the school data, then present it at once. Don’t use multiple AJAX calls.
JΛ̊KE
Hi Jake,
Can you refer me an example on how to achieve this task by sending all the ajax requests at once and how to handle the response.
Thanks!
Leave a comment on jakecigar's reply
It's not "sending all the ajax requests at once". It's sending ONE ajax request. Your server has to send back all of the content in one response.
I'd suggest something like:
- {
- content: [
- {
- selector: '#div1',
- html: '<p>This goes in #div1</p>'
- }, {
- selector: '#div2',
- html: '<p>This goes in #div2</p>'
- }, {
- selector: '#div3',
- html: '<p>This goes in #div3'</p>
- }
- ]
- }
Note that you'll likely need to use some JSON encoder function in your server language to insure proper JSON encoding of the HTML strings. (Need to encode quotation marks and other special characters meaningful to JSON.) In other words, don't piece the JSON together with simple string concatenation. Use the JSON tools available in your server language.
Have your server set the content type to JSON, and/or use $.getJSON() or use $.ajax() with dataType set to 'json'. jQuery will parse the JSON for you into a Javascript object. Then it is simple to access the HTML chunks and apply them to selectors:
- $.each(data.content, function() {
- $(this.selector).html(this.html);
- });
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Smith's question
{"z561063084":[14737000007162459,14737000007162508,14737000007166001,14737000007166003,14737000007166013,14737000007166017,14737000007166023],"z7664639":[14737000007162510,14737000007162512,14737000007166025],"z2950240":[14737000007164599,14737000007164609,14737000007167003,14737000007167007,14737000007167011,14737000007167049]}
Statistics
- 15 Replies
- 6920 Views
- 1 Followers