We Keep Coding

Spectrum Color-Picker not working in Internet Explorer

I'm using Spectrum Color picker in a javascript project I'm working on. https://bgrins.github.io/spectrum/
It works fine in FireFox, but not in Internet Explorer. The fancy color picker popup degrades to a simple text input field. Here is the section of code that creates the input field:
function updateTables() {
$("#tableTwo tbody").empty();
for (var i = 0; i < polygons.length; i++) {
//var pColor = new RGBColor();
var pColor = rgbaToHex(polygons[i].color);
$("#tableTwo tbody").append('\n<tr '
+ (selectedPoly == i ? 'style="color:white;background-color:red"' : '')
+ '><td><input onchange="changeGeometryName(' + i + ')"'
+ (selectedPoly != i ? 'onfocus="polySelectedFromTable(' + i + ')"' : '') + 'type="text" size="11" '
+ 'id="polygonName' + i + 'Input" value="' + polygons[i].name + '" /></td>' + "<td><input type='color'"
+ ' onchange="setColor(' + i + ')" id="color' + i + '" value="' + pColor + '"/></td>' + "</tr>");
}
}
And then I have these two lines in my HTML file:
<script src='spectrum.js'></script>
<link rel='stylesheet' href='spectrum.css' />
The documentation says the input will degrade to a text input if javascript isn't working, but I know that can't be the issue sense the rest of the project works fine. Any help is greatly appreciated!

Oh hi!
So firstly, the spectrum documentation was a bit confusing about this so it took me a while to find, but the answer is actually really, really dumb once you find it:
You're not using spectrum.
So, firstly, the documentation says:
If you just want to provide a polyfill for the native color input, the easiest way is to create an input with the type of color. Once a user's browser supports a native color control, it will opt to use their native control instead. Spectrum Docs
So, this is what we were trying to do, without realizing we weren't really using spectrum. Instead, we were using the HTML 5 color input type spec, which isn't supported by IE (See color input type support)
So, to enable spectrum, we actually need to make a call to the spectrum library, and then it works:
$('#color' + id).spectrum({ color: pColor(, other-parameters-here)});

Add new filed and clone in bootstrap 3 modal?

I am using some append new data in form, that does not exists
HTML
Phone number :
JS
$(document).ready(function(){
var phone_number_form_index=0;
$("#add_phone_number").click(function(){
phone_number_form_index++;
$(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index));
$("#phone_number_form" + phone_number_form_index).css("display","inline");
$("#phone_number_form" + phone_number_form_index + " :input").each(function(){
$(this).attr("name",$(this).attr("name") + phone_number_form_index);
$(this).attr("id",$(this).attr("id") + phone_number_form_index);
});
$("#remove_phone_number" + phone_number_form_index).click(function(){
$(this).closest("div").remove();
});
});
});
And here is working fiddle
http://jsfiddle.net/wc28f/3/
I am trying to add to boostrap 3 modal, but i have no luck, here is that same code in bootstrap 3 modal
http://www.bootply.com/J9cv7EZv6K
Does can be extended this exmaple like select, but what i need post array of that select values
http://www.bootply.com/S9WGrK0WhL
Here is my example, what i need is to
phone_number1 becomes phone_number[1],
and qty1 to becomes qty[1]

Working demo
I have removed line and it worked
$("#phone_number_form" + phone_number_form_index).css("display","inline");
Used this:
$("#phone_number_form" + phone_number_form_index).removeClass("hidden");
You want phone_number[1] try this:
$(this).attr("name",$(this).attr("name") +"["+ phone_number_form_index+"]");
Updated DEMO

Jquery Replace function not working properly in ie7 and ie 8

I have the following Raduio buttons with Labeles associated with that.
<div id="dependents">
<input ng-non-bindable type="radio" id='Partner' name="relationship" class="dependent-relation" value='P' />
<label for="Partner">Prtner</label>
<input ng-non-bindable type="radio" id='Child' name="relationship" class="dependent-relation" value='C' />
<label for="Child">Child</label>
</div>
Above div will be added dynamically to the page. We can have multiple dependants.
So every time while appending this div, i'm changing the Id, name of Radio button along with for label. Below is the script i'm trying to replace.
var html = htmlContent; // html content will be above code
html = html.replace('Partner', 'Partner' + count); // Replacing Id : Working fine
html = html.replace('for="Partner"', 'for="Partner' + count + '"'); // Replacing for : Not working
html = html.replace('Child', 'Child' + count); // Replacing Id : Working fine
html = html.replace('for="Child"', 'for="Child' + count + '"'); // Replacing for : Not working
This is working perfect in IE9, IE 10, chrome, but its not working IE7 and IE8.
Can any one help me on this?
I have found the problem...
I think whenever i tried to replace like this
html = html.replace('name="relationship"', 'name="relationship"' + count + '"');
its not working(only in IE 8 & 7). Any suggestion???

the reason it does not work is because before you are replacing the same word.
Try with:
var html = "<div id="Dependents"> ... </div>";
html = html.replace('for="Partner"', 'for="Partner2' + count + '"');
html = html.replace('Partner', 'Partner' + count);
html = html.replace('Partner2', 'Partner');
html = html.replace('for="Child"', 'for="Child2' + count + '"');
html = html.replace('Child', 'Child' + count);
html = html.replace('Child2', 'Child');

setTimeout and window.location (location.href) not working

I want to redirect user to index.php in 5 seconds, but it redirects me right away. I don't want to use jQuery in this simple code.
<script>
setTimeout(function(){location.href="index.php", 5000} );
</script>

This is the right way...
setTimeout(function(){location.href="index.php"} , 5000);
You can check the docs here:
https://developer.mozilla.org/en/docs/DOM/window.setTimeout
Syntax :
var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]);
var timeoutID = window.setTimeout(code, [delay]);
Example :
WriteDatePlease();
setTimeout(function(){WriteDatePlease();} , 5000);
function WriteDatePlease(){
var currentDate = new Date()
var dateAndTime = "Last Sync: " + currentDate.getDate() + "/"
+ (currentDate.getMonth()+1) + "/"
+ currentDate.getFullYear() + " # "
+ currentDate.getHours() + ":"
+ currentDate.getMinutes() + ":"
+ currentDate.getSeconds();
$('.result').append("<p>" + dateAndTime + "</p>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="result"></div>

This also works:
setTimeout ("window.location='index.php'", 5000);

I know this thread has already been solved and its somewhat 2 years later that i have come accross this, I personally just used the example from Joan's answer and modified it to work exactly how i need it to as the location.href will not redirect the TOP or Parent page when called within an iframe.
So for anyone looking for a way to redirect after 5 seconds but within an iframe and to redirect the TOP / Parent page aswell here is how i have achieved that based on Joan's answer to the Original Question.
<script type="text/javascript">
setTimeout(function(){window.top.location="index.php"} , 5000);
</script>
And if you wanted to call this by using PHP as i personally did do here is how you would use the echo command to redirect the user after 5 seconds.
echo '<script type="text/javascript">setTimeout(function(){window.top.location="index.php"} , 5000);</script>';
Hope this helps anyone else searching for the same solution.
Thanks

term_exists not working in Javascript

I finally got my back-end to create the wheel codes from the checked taxonomies in the add custom post admin area.
Now, I want to add that tire code to the wheel_type taxonomy.
The below code ran great, until I added the if statement under //Add code to Taxonomy
Now nothing is working, but I get nothing in the error console.
I figure it must be a stupid syntax mistake - can anyone help me out?
Or am I missing something else?
jQuery('#replace').click(function(){
//get tire code and name
var code = jQuery('input[name="tire_code"]').val();
var name = jQuery('input[name="tire_name"]').val();
var bname = jQuery('input[name="tire_bname"]').val();
alert(code + " + " + name + " + " + bname);
//get tire brand
var tirebran = jQuery('#tire_brandchecklist').find(":checked").parent('label').text();
tirebran = jQuery.trim( tirebran );
//Add code to Taxonomy
if( term_exists( code, wheel_type ){
continue;
}
else
{
wp_insert_term( code, wheel_type );
}
//update title
var title = code + ' : ' + name + ' tires';
if(tirebran!=''){
title += ' with ' + bname + ' letters';
}
jQuery('input[name="post_title"]').focus().val(title);
});
//-->
</script>

unless i've misunderstood your question, you're trying to call wordpress methods via javascript.
term_exists() and wp_insert_term() are PHP methods within the wordpress code, not accessible directly via Javascript (unless you have written interfaces to them).

continue doesn't make any sense there; just check for !term_exists... and call wp_insert_term when it doesn't exist.
if (!term_exists(code, wheel_type)) {
wp_insert_term(code, wheel_type);
}
The continue statement is for continuing loops from the top of the loop; it does not stand on its own.