Quick-Fix for JQuery Not Appending in the Right Place
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi there, I have a fairly simple JQuery error that I'd like to fix.

I want the "mainEditor" class to be inside of the "row" class. But instead, my code is seeming to attach a row class to the very bottom of the page and it's messing up my styling.

My code is attached below in CSS and JS snippets. In addition, I've included two PNGs - one of the current error, and one of what's desired.

addNewEditor() is called immediately on document.ready(). If the user presses a key combo, addNewEditor() is called once again.

https://github.com/fccardiff/jquery_error

If this problem is too complex for this bounty, please let me know and I'll increase it.

Thanks a ton!

To make it easier, would be great if you attach the sample code(html) for the resulting image
bruno-goncalves 9 months ago
same like bruno, or give us the right order playing functions
Chlegou 9 months ago
your code isn't completed! the best thing is, to give us a compiled html code, we can figure out how to adjust it with css, then you can add it to your js code
Chlegou 9 months ago
Hi there, "done" is a callback function in Javascript for when it's complete. I guess it'd be similar to a return statement. As for function order, I'll attach that now.
fccardiff 9 months ago
the thing is, we can't run your js functions to get html code, so i suggest, you give us the result you have, then we can make it.
Chlegou 9 months ago
I've gone ahead and put all the JS/html code up in the git repo.
fccardiff 9 months ago
"js/transcribe.js" and "css/transcribe.css" are they the js and css you have in the git repo?
Chlegou 9 months ago
Yep! They are.
fccardiff 9 months ago
this is my email, nicolastsue@gmail.com can you email me?
Chlegou 9 months ago
I'd prefer to stay on Bountify for now, thanks.
fccardiff 9 months ago
awarded to farolanf

Crowdsource coding tasks.

2 Solutions


Ok, Here is my working solution.

i fix it anyway, but I suggest also, since you're using bootstrap, to move to full bootsrap. when you can adjust them quickly and nicely.

here is a link of your working code:

link: http://orbitcoins.website/demos/demo%20-%20jquery_error/snippet.html

Here is the download link:

Link: https://drive.google.com/open?id=0B2wCjF-lIcvpdFVEVTI4UXhmVTA

UPDATE:

well, the problem is, that every new row is devised in a half (two columns) , first half is for event speakers, second half is for editor. and you are not actually creating new rows like you are assuming, and mismatching the style, but when creating a new row, you will hide the new text area (textarea.hide(); //line 163) witch mean, you will keep only the first column, that's why always from the second "eventSpeakers" you will get the style mismatched (lo second column).

Instead, you are Inserting a new styled textarea, in the second column of the first row in a loop function:

$('textarea[data-editor]').each(...) //line 153.

the insertion is handled by this function: (int the 2nd column of the 1st row always!!)

.insertBefore(textarea);//line 156-161;

SOLUTION:

as a solution, i changed: .insertBefore(textarea); by .appendTo(textarea); this, will keep your logic, inserting new elements in a row. and also commented textarea.hide(); //line 163 because they are the basic elements we are creating. like that, elements are shown in a row, but i lost the style! you have to find out how to add the style in a different way!

i think like that, i kept the good display part, it's up to you to apply the style in a way or another.

here is a link of your working code: (same link i have updated the files)

link: http://orbitcoins.website/demos/demo%20-%20jquery_error/snippet.html

Here is the download link: (new files)

Link: https://drive.google.com/open?id=0B2wCjF-lIcvpdFpTZnFINU9lUGc

This has fixed it a bit, but not completely - unfortunately, the speaker label is showing at the bottom like so. See http://imgur.com/a/QhKSI
fccardiff 9 months ago
well the code you gave me has only one row. so i adjusted it. i didn't find out how to add a new element from your interface. most of buttons wasn't active. give me a generated code with 5 to 7 rows, and i will work on it. commit it on github and notify me
Chlegou 9 months ago
I changed the paths of the HTML file on GitHub to include snippet.js and cssCode.css. You should be able to add another div by pressing Enter twice.
fccardiff 9 months ago
ok i will look on it, stay close.
Chlegou 9 months ago
i downloaded your code again, but wasn't able to create a new row by pressing "enter" twice!
Chlegou 9 months ago
can you make a botton.onClick(createNewRow) action? this will help a lot!
Chlegou 9 months ago
I've updated the git repo so it should append a new editor for you to replicate the error
fccardiff 9 months ago
bounty is updated. i fixed the error, but you need to fix the design also. read more in bounty.
Chlegou 9 months ago
Hi, Yes, this is the problem. Unfortunately, I need to run that code - including hiding the textarea, etc. So my append code must include the speaker label. The styling of the textarea is the main issue, because it's an Ace Editor, so it cannot be a simple "textarea" object.
fccardiff 9 months ago
that's why from the beginning, i suggested rewriting the code not fixing it :p because the way you wrote it, didn't follow your logic. they are not the same! even it can't be made with $5 that's why, i sent you my email :p . anyway, i tried to help, and this is what i did ;) you have my email, you can email me if no one have solve it as you desire.
Chlegou 9 months ago
Winning solution

Here's my solution https://github.com/farolanf/jquery_error (working, fixed the problem).

Please check it out.

Thank you for the excellent and quick fix. I will award the bounty now. Thanks again!
fccardiff 9 months ago
If you can manage to get all the speaker labels and the text boxes in a div, I will award an extra tip of $5. :)
fccardiff 9 months ago
Enclosing div for rows added. Please check it out.
farolanf 9 months ago
Hi there, it almost works -- however, I need all the editors to be in a single "rows" div. The current solution is appending multiple divs under class "rows". I will tip as soon as it works! Thanks! :)
fccardiff 9 months ago
Which means speakers and editors in their own enclosing divs? As in <div><div class="speakers"....</div></div> and <div><div class="mainEditor"....</div></div>?
farolanf 9 months ago
Sorry I didn't explain well. So like <div class="rows"> <div class="row"><div class="mainEditor"><div class="row"><div class="mainEditor"> </div> etc. The purpose being so that all of the editors are inside a div that contains a scrollbar, so the entire page won't move when an additional editor is added. Thanks for the help! :)
fccardiff 9 months ago
I updated so the rows scroll independently. Please check the new version.
farolanf 9 months ago
View Timeline