How to apply style from jQuery autocomplete CSS using Django? - javascript

I am trying to implement JQuery Autocomplete plugin using Django.
I've been able to wire the thing together and I can actually see the result back in the HTML template.
My problem is that the JQuery Autocomplete CSS doesn't seem to work.
The results I get are not well-formatted/styled, have no background and you cannot even select them.
What is it that I am missing?
I have these three files in my media folder the same folder:
autocomplete.js
dimensions.js
autocomplete.css
In my html template I have the following function:
$(function(){
setAutoComplete("tags", "tagResults", "/taglookup/?query=");
});
My textfield looks like this;
<input type="text" name="tags" value="">
Where do I put the tagResults in my HTML template document? Every time I try to introduce a DIV with id="tagResults", JQuery throws an error.
Any ideas?

Related

How to change the CSS of particular tag inside of iframe using JavaScript?

I'm working on a product where my requirement is when user focus on particular text box then change the background color of particular tag using the class of that tag inside iFrame. I have tried few solutions from stack but got no luck.
Here is my code
Below is Html code.
<input type="number" class="form-control bodyStyle" name="bodyFontSizeDesk" id="bodyFontSizeDesk" value="" placeholder="px">
Below is my js code.
$('.bodyStyle').on('focus', function() {
$('iframe').contents().find(".headings").css('background', 'red');
});
Below is the tag inside iframe.
<h1 class="headings">Street artist & painter based in New Delhi.</h1>
Any lead will be appreciated.
Thank you.

How to you get the contents of an iFrame to insert into a database?

I have created a wysiwyg text editor using an iframe and am trying to save the contents of this.
The HTML for my iframe is:
<iframe name="richTextField" id="wysiwyg" src="page?page_id=3"></iframe>
I am then using a hidden input to submit this to the database:
<input type="hidden" id="text_content" name="text_content" value="">
I am trying to get the contents of this into the value of the input field using JS like this:
$text_content = #wysiwyg.document.getElementsByTagName('body')[0].textContent;
$("#text_content").attr("value", $text_content);
If I set $text_content to just a random string it will work but it won't get the contents of the iframe.
I have tried $("#wysiwyg document body").textContent, #wysiwyg.document.getElementsByTagName('body')[0].textContent and richTextField.document.getElementsByTagName('body')[0].textContent.
richTextField.document.getElementsByTagName('body')[0].textContent is actually what I used in the JS for toggling to the source but it will not work when trying to set it as a variable.
Should I be trying to do something like php serialize() to get this as a variable I can work with? Or are the terms I've tried as my selectors just wrong? Any help with this will be greatly appreciated.
For future reference, this is what I used:
richTextField.document.getElementsByTagName('body')[0].innerHTML;

How can you use a spring form tag to assign an html value to a variable using jquery/javascript?

I have a drag and drop UI. Its like a bucket list. What I have done is I have seperated the forms and the UI html for easier data manipulation. I have an empty form like this: (Take note that I am using spring form tags "form:")
<form:form method="POST" id="sampleForm" commandName="sampleForm" modelAttribute="sampleForm" class="navbar-form navbar-center">
<table id="formToBeSaved">
</table>
</form:form>
And then I have a script that is triggered whenever my other sortable receives an item. Sample below:
$("#sortable2").sortable({
connectWith : "#sortable2 ul",
scroll: false,
receive: function(event,ui) {
var saveElement = '<tr id="saveRow['+statusCounter+']"><td><form:input type="hidden" '+
'path="sampleFormModel['+statusCounter+']." class="form-control" '+
'id="name['+statusCounter+'].sampleForm" value="'+ someValue +'"></form:input></td></tr>'
console.log(saveElement);
$("#formToBeSaved").append(saveElement);
statusCounter = statusCounter + 1;
console.log(statusCounter);
};
},
Now the problem is, whenever I submit the form thru ajax an error occurs. It seems that the system does not recognize my < form:input > tag (since I am using spring) because I've just assigned it as a string into a variable. Is there a way to fix this? Thanks stackoverflow community!
You are using Spring XML templates, but the web browser can only work with HTML. This works when you are declaring your code in JSP files because Sprint will parse them and transform them to HTML.
So instead of manually adding JSP to the document, you should edit your JSP files in a way they generate the JSP you expect. In this case, you could use <c:forEach> to generate each <tr>. This answer could help you to do that.
If you only have access to the datas required by these <tr> dynamically, I do not know Sprint enough to help you. Maybe you could find some resources on this question.

Datatables modify filter html

I'm using the jQuery Datatables plugin and I would like to customize some of the generated HTML for the filter.
Specifically, they generate the following HTML:
<div class="dataTables_filter" id="example_filter">
<label>Search: <input type="text" aria-controls="example"></label>
However, I would like my HTML to be more like this:
<div class="filter-search">
<label class="search-label">
<input type="text" placeholder="Search by name" />
<span class="search-icon"></span>
</label>
I've looked around and all I could find was something about changing the class, but in this case I want to change more than just the class.
I'm sure I can hack at the DOM after the table loads, but I was hoping there would be some way to do this as part of the config/initialization of the Datatable.
You can by modifying datatables oLanguage sSearch option:
$('#example').dataTable({
oLanguage: {
sSearch: '<i>Other Search Text</i>'
}
});
Without messing with the DOM after table load, I don't think there is a way to "change" the markup datatables generates for the filter without hacking the datatables plugin itself.
However, one decent alternative would be to simply implement your own search filter.
To make a custom filter OUTSIDE the datatables markup:
Step 1:
Omit the 'f' portion of the sDom parameter: https://datatables.net/usage/options
Step 2:
Write your own markup for a search field
Step 3:
Use something similar to the accepted answer for this question to actually filter on your own custom search field: Datatables - Search Box outside datatable
Otherwise, you're left with just making custom css rules for the markup generated by 'f' and/or moving it around.

How do I make the jquery dialog work with the themeroller themes?

I am trying out the dialog from jquery UI. All the online demos use flora.css.
I can't get the dialog to display correctly with the css file generated by the themeroller application.
Am I missing something? Should these things work out of the box?
Update: Thanks Brock. When I cleaned up my code to make a sample, I realized that the HTML in demo.html (that comes with the themeroller.zip) is a little too verbose.
All I needed to do was give the dialog div the attribute class="ui-dialog" like this:
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
I'll accept your answer. Thanks for your time.
I think it is because you have the classes different.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)
Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.
I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.
Try getting rid of the class attribute or using the ui-dialog class.

Categories

Resources