Spectrum, option showInput, show a input text not editable - javascript

I have implemented a Spectrum color Picker, it works perfectly, except for the showInput option which makes the text input not editable, it is not even selectable, it does not even focus on itself. If I select the color, however, the hexadecimal value appears in the input, so it works halfway. But I can't select it to manually set the hex value I want it to have.
This is the Jquery code :
$("#divPickerColor").spectrum({
showInput : true ,
preferredFormat: "hex",
showButtons: false,
allowEmpty:true
});
this is the html code :
<script id="configurazioni-inserimento-modifica-stato-avanzamento" type="text/template">
<div>
<form id="formAddStatoAvanzamento" role="form" action="/" method="POST"
data-parsley-validate>
<div class="form-group">
<div class="row">
<div id="colorazione" class="col-lg-12">
<input type="text" id="divPickerColor" />
</div>
</div>
</div>
</form>
</div>
</script>
This script is called by a function to display it on a modal.
The tour is complex and I can't post all the code to you, I tried to put the main nodes in it. What I can say further is that I have looked at the CSS properties of the input, it has no disabling properties. I also tried to forcibly put them with JQuery in the console but nothing changed. The input generated by Spectrum is not editable and has no focus on itself.
I add that I have tried the same code in an html page outside my application, everything works perfectly. I think it's something related to the fact that this portion of html is included in a script. Does anyone know why and how to fix it?

As #BugCatcherJoe wrote at the question comment, the answer is at the next link:
https://github.com/bgrins/spectrum/issues/161
The solution that works for me was removing 'tabindex=-1' from the modal attributes.

Related

Unwanted ngClick gets fired in IE11 browser

We have written customised checkbox which has divs for square and label.
Issue:Checkbox div has ng-click which should only be fired when clicked on square box but it also get fired if I click on Text next to it in IE11 Version 11.0.9600.16428.
Our implementation is working fine in Chrome and Mozilla but gives above issue when executed in IE11.
Sample Code link: (Please run this code in Chrome & IE11)
http://jsbin.com/luzogucasi/5/edit?html,js,output
Please help.
I have also raised issue in github
That is only expected behavior, because you used for="k".
The for attribute will target the id="k", and whenever you clicked on label it will focus element with id="k" which you mention in for attribute.
Remove attribute for="k" from label will work proper on each browser.
HTML
<div>
<div id="k" ng-click="userClicked()" class="disp">
<div class="check-no"></div>
<div class="check-yes" ng-show="checked"></div>
</div>
<label class="disp label">
{{checkText}}
</label>
</div>
NOTE
This is not angular related issue
JS BIN
Hope this could help you, Thanks.

jQuery Clone() not behaving as it should within asp.net page

I have a search box that needs to be within a form so that it can post to another page for a search functionality to work.
I originally had this working fine in Firefox by using an iFrame, but using the search box would simply refresh the when using Internet Explorer.
I found out that it worked fine if I simply created another form underneath the current one, however this obviously leaves it in the wrong place on the page.
I attempted to use the jQuery clone() method that I have succesfully used elsewhere on the site, but this is refusing to work.
I looked around and found another way of using the clone() method and I have it working fine within jsfiddle, but it will not work on my site.
This is the div that I want to populate:
<div id="CustomerSearch">
2
</div>
And this is the div that I want to be cloned:
<form name="frmCustomerList" action="../CustomerList/default.asp" method="post">
<div id="CustomerSearchClone">
1
Customer Search: <br />
<input type="text"id="txtSearch" name="txtSearch" class="Searchbox" />
<input type="submit" value="View" name="txtSearchSubmit" />
</div>
</form>
This is the script that I am using in an external file:
var CustomerSearch = jQuery('#CustomerSearch');
var CustomerSearchClone = jQuery('#CustomerSearchClone');
CustomerSearch.html(CustomerSearchClone.clone(true));
I have it working in JSFiddle here: http://jsfiddle.net/de9kc/92/
Any ideas?
Thanks guys
I'm not a .NET guy but the div you are pasting too is still within a form tag so I'm not certain that this wouldn't cause a hiccup for .NET at submission time (or postback, or whatever).
However, with respect to getting the cloned form elements where you wanted them per the layout you demonstrate in your question;
I modified the pre-result html like so:
//html
<form id="form1" runat="server">
<div id="CustomerSearch">2 Customer Search:</div>
</form>
<form name="frmCustomerList" action="../CustomerList/default.asp" method="post">
<div id="CustomerSearchClone">1 Customer Search:
<br />
<input type="text" id="txtSearch" name="txtSearch" class="Searchbox" />
<input type="submit" value="View" name="txtSearchSubmit" />
</div>
</form>
then i used this jQuery:
// the vars you already created
var CustomerSearch = jQuery('#CustomerSearch');
var CustomerSearchClone = jQuery('#CustomerSearchClone');
// using .clone(true, true) for deepWithDataAndEvents - not sure if you want this?
// will the .clone(true, true) retain input's link to original form id? I'm uncertain
// using .children() because clone's intended destination already has a div container
CustomerSearchClone.children().clone(true, true).appendTo(CustomerSearch);
// hide clone's source after cloning; no sense in having both search boxes visible
CustomerSearchClone.hide();
Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. (per http://api.jquery.com/clone/)
But you are appending the cloned elements into a different form tag, so maybe a non-issue.
I'm just learning jQuery myself, but I thought I would give the solution a shot ;-$
JSFiddle here: http://jsfiddle.net/de9kc/190/

How to unlock a jquery ui check button when content is replaced with Backbone.js?

I have a web application which replaces content. This content has jquery ui check buttons. When I replace the content if a button already exists then don't add it again:
if(!$('label[for=checkWeekM]').hasClass('ui-button'))
$('.checkWeek').button();
If I push the button (its state is checked) and if I replace the content, the button starts locked until the same content is replaced again.
I use Backbone.js to replace the content
jsfiddle
How can I unlock the check button?
You are duplicating id attributes and that leads to bad HTML, bad HTML leads to frustration, frustration leads to anger, etc.
You have this in your template that you have hidden inside a <div>:
<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>
Then you insert that same HTML into your .content-central. Now you have two elements in your page with the same id attribute and two <label> elements pointing to them. When you add the jQuery-UI button wrapper, you end up with a slightly modified version of your <label> as the visible element for your checkbox; but, that <label> will be associated with two DOM elements through the for attribute and everything falls apart.
The solution is to stop using a <div> to store your templates. If you use a <script> instead, the browser won't parse the content as HTML and you won't have duplicate id attributes. Something like this:
<script id="template-central-home" type="text/x-template">
<div data-template-name="">
<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>
</div>
</script>
and then this to access the HTML:
content.view = new ContentView({
model: content,
template: $('#template-' + template_name).html()
});
Demo: http://jsfiddle.net/ambiguous/qffsm/
There are two quick lessons here:
Having valid HTML is quite important.
Don't store templates in hidden <div>s, store them in <script>s with a type attribute other than text/html so that browser won't try to interpret them as HTML.
I took a detailed look at your fiddle after you mentioned this problem. The solution I suggested here was more like a quick fix.
If you want to follow the right thing to avoid long term problems and side effects you should consider what is mentioned here. This way your problem is solved and there are no other bugs.

jQuery .html(): Missing elements from beginning of div

I'm selecting a <div>, like so:
var html = $('div#mydiv').html();
Both in console, and in the DOM when I paste the html var back in, there are two elements missing from the beginning of the div, which is structured like so:
<div id="mydiv">
<input type="checkbox" />
<label for="input"></label>
<div class="notes"></div>
...
</div>
I'm only getting from the 'notes' div on down - NOT the input or label. It's the weirdest thing. Any ideas?
EDIT: By 'ideas', I mean - yes, I know this should work just fine. I'm wondering what bugs could be causing the weirdness. There is some PHP laced into the input and label - but those output just fine in the div where they originate, but do NOT show up in the console or in the div where I'm setting the html via jQuery. I'm looking to see if there's malformed HTML, but I don't think so.

Javascript form innerHTML

i have an issue with innerHTML and getElementsById(); method but I am not sure if these two methods are the root of the issues i have.
here goes my code :
<script type="text/javascript">
function clearTextField(){
document.getElementsById("commentText").value = "";
};
function sendComment(){
var commentaire = document.getElementById("commentText").value;
var htmlPresent = document.getElementById("posted");
htmlPresent.innerHTML = commentaire;
clearTextField();
};
</script>
and my HTML code goes like this:
<!doctype html>
<html>
<head></head>
<body>
<p id="posted">
Text to replaced when user click Send a comment button
</p>
<form>
<textarea id="commentText" type="text" name="comment" rows="10" cols="40"></textarea>
<button id="send" onclick="sendComment()">Send a comment</button>
</form>
</body>
</html>
So theorically, this code would get the user input from the textarea and replace the text in between the <p> markups. It actually works for half a second : I see the text rapidly change to what user have put in the textarea, the text between the <p> markup is replaced by user input from <textarea> and it goes immediately back to the original text.
Afterward, when I check the source code, html code hasn't changed one bit, given the html should have been replaced by whatever user input from the textarea.
I have tried three different broswer, I also have tried with getElementByTagName(); method without success.
Do I miss something ? My code seems legit and clean, but something is escaping my grasp.
What I wanted out of this code is to replace HTML code between a given markup (like <p>) by the user input in the textarea, but it only replace it for a few milliseconds and return to original html.
Any help would be appreciated.
EDIT : I want to add text to the html page. changing the text visible on the page. not necessarily in the source. . .
There is no document.getElementsById, however there is a document.getElementById. This is probably the source of your problem.
I don't think there is any document.getElementsById function. It should be document.getElementById.
"To set or get the text value of input or textarea elements, use the .val() method."
Check out the jquery site... http://api.jquery.com/val/

Categories

Resources