We Keep Coding

Django-CKEditor Widget not loading dynamically

I am having problem on loading the second and next ckeditor widget on the front-end form in html. It works well in admin. When I click add more form set dynamically, the widget not come out but showing textarea instead, it just works on the first (initalized) form. I already follow the documentation step by step for basic requirements. I am using Django with django-ckeditor package. Got no javascript errors on the page.
Sorry for not showing any codes before. This is part of the javascript which dynamically adding another form set after button clicked:
<script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor-init.js"></script>
$('#add_more_work').click(function(){
var form_idx = $('#id_form_set-TOTAL_FORMS').val();
$('#form_set_work').append($('#empty_form_work').html().replace(/__prefix__/g, form_idx));
$('#id_form_set-TOTAL_FORMS').val(parseInt(form_idx) + 1);});
The field which use the ckeditor widget not loading after it added dynamically by this button but instead, it shows plain textarea. Did I miss anything?

You might want to look at using the formset:added and formset:removed JavaScript signals available from Django 1.9 onwards.
A simple method (combined from django-content-editor and feincms3 ) might look like this:
(function($) {
$(document).on('formset:added', function newForm(event, row) {
row.find('textarea').each(function() {
CKEDITOR.replace(this.id);
});
});
})(django.jQuery);
I'll leave the handling of formset:removed to the reader.

Loading HTML forms through php then using JQuery to submit forms

I have a dilema which I'm unsure how to approach right now. I know that JQuery needs to have a unique set of ID's to be called in the document ready function. I go through PHP and read my mysql table to print out these HTML forms and with each form is a button that will add a new item to this table.
The issue here is that I cannot have an idea of how many forms there will be so I would like to write the JQuery code so that it can dynamically read anytime that the button is clicked, but know which button was clicked so that the proper ID's can pass.
I've seen some examples but they have more to do with CSS styling, are there any ideas or thoughts as to how this problem could be remedied?

If you are writing out the forms in a for loop with php you can assign each submit button an id using the iterator, like submit_1, submit_2 etc and then you can have an on click handler in jquery using a selector contains, something like:
$(document).on('click', 'input[id*="submit_"]', function() {
//code goes here
alert( $(this).prop('id') );
});

How to grab the contents of a div and insert it into a hidden input

I built a simple CMS in Laravel 4. I've decided to switch from my old editor to this markdown editor.
My old editor used a textbox and so all I had to do was submit the form and it was passed from the view to the controller and inserted into the database etc.
However, this new editor works by turning the markdown into html and that html is inserted within a div that looks like this:
<div id="preview" class="wmd-preview"></div>
I still want to use my old form to submit the contents of the div, so my question is this:
Is there a way to insert the contents of my "preview" div into some sort of hidden input in my form?
Alternatively, is there a better way to submit the contents of my post?

get the content of your div by its id
var a = document.getElementById('preview').innerHTML;
document.getElementById('hid').value = a //create a hidden input give it an id hid

To answer your question about firing the function every time a key is pressed, I would use a jQuery event listener like .keyup().
http://api.jquery.com/keyup/

Remove Chrome Autofill text onclick with Javascript or JQuery

I'm having trouble removing the text that is generated by Chrome autofill with JQuery. Thus far I have been doing this.
$(document).ready(function () {
$(".link").click(function () {
$("#textbox").val("");
return false;
});
This removes the text just fine except if it was auto fill text. I would like to be able to remove this text without disabling autocomplete altogether i.e. I don't want to use autocomplete="off."
Right now I'm using JQuery but I'm not opposed to just using plain Javascript instead.
P.S. These text boxes are ASP.NET MVC3 Html.TextBoxFor's. I don't know if that makes a difference.

Perhaps you can use the autocomplete="off" attribute on elements or on the form itself. Related question here Is there a W3C valid way to disable autocomplete in a HTML form?

Possible to manipulate javascript generated elements?

I have a page dynamically generated with javascript and it contains several input fields and a button. When I click the button, nothing happens...Is it because it is a javascript object and not a "real" dom object? If so, is there a way to interact with the object?
I just wrote a simple alert to see if the button is even working.
jQuery("#button").click(function() {
alert("yes it's working");
});
On first page load this works...I believe on first page load it is PHP generated and when I click to another section, this same button will show up BUT the page does not refresh so this leads me to believe when I click on to another section, it is dynamically re-generated with JS.
Now if I click the button, nothing happens...no errors or no alerts...

You need to use .live because at the point in time when you assign the handler the element doesn't exist.
$('#button').live('click', function() {
});
You should also look into delegate if you're doing this with multiple elements for efficiency purposes.

I think I get what you're saying.
When you run jQuery('#button'), it searches for the elements then and there. The event is attached to the button itself, not to the query string #button.
jQuery does, however, offer the behavior you want.
jQuery('#button').live('click', function () { /* on click event */ });
live attaches to the query string, not the elements, so it will apply to any #button ever generated in the future.