Adding Country FormHelper Bootstrap inside js not working - javascript

I am trying to add
<span class="bfh-countries" data-country="US" data-flags="true"></span>
inside my js script, but it does not show anything. If I add it in my HTML it works fine, but when I added in some several ways one of this is
var flag = document.createElement("span");
flag.setAttribute("class", "bfh-countries" );
flag.setAttribute("data-country", "US" );
flag.setAttribute("data-flags", "true" );
I think is possible that the css and js needed for data-countries are not loaded yet when this script is running, but both scripts are above this code.

you need to add your node to the body
document.body.append(flag)

I think you need to select your element.
Try this -
var flag = document.createElement("span");
var tag = document.getElementsByTagName("span");
tag.setAttribute("class", "bfh-countries" );
tag.setAttribute("data-country", "US" );
tag.setAttribute("data-flags", "true" );
Not tested, hope it will work.
Note that this technique will select all the span.

Check this working code.
function addNew() {
var flag = document.createElement("SPAN");
flag.setAttribute("class", "bfh-countries");
flag.setAttribute("data-country", "US");
flag.setAttribute("data-flags", "true");
document.getElementById('result').appendChild(flag);
$("form select.bfh-countries, span.bfh-countries, div.bfh-countries").each(function () {
var b;
b = $(this),
b.hasClass("bfh-selectbox") && b.bfhselectbox(b.data()),
b.bfhcountries(b.data())
})
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.min.js"></script>
<button onclick="addNew()">Add Flag</button>
<div id="result"></div>

Related

jQuery UI Autocomplete JSON array vs. JS-Array

Hoi folks, i am not confirm to js. My Problem ist if i define an array for autocomplete in the code it works, if i use an json-array( also from an external source) it dosent. What am i doing wrong ?
jsonData='{"kantone":["VD","FR","GE"]}
var alternate=["TG","ZG","ZH"];
window.availableKanton = JSON.parse(jsonData);
$(function() {
$( "#startkanton" ).autocomplete({
source: window.availableKanton.kantone // dont work if i take the alternate it does
});
});
I pasted your code into the snippet below, and it's working.
The only thing I had to do was to close the string (by putting a ') into the first line.
var jsonData = '{"kantone":["VD","FR","GE"]}';
var alternate = ["TG", "ZG", "ZH"];
window.availableKanton = JSON.parse(jsonData);
$(function() {
$("#startkanton").autocomplete({
source: window.availableKanton.kantone // working
});
});
<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input id="startkanton">

Why FooTable not callable?

I am working on a project where we are trying to implement a jQuery plugin called Footable. It works by calling the function .footable() on the table being selected by jQuery. When I tried to call this function I got a type error: undefined is not a function.
We are also using prototypejs in this project so at first I though that the problem was that footable was using $.() instead of jQuery.(), and it was. I went in and changed the $[.(] to jQuery hoping that it would fix the problem, but I am still unable to call .footable().
You should also know that I am loading footble.js from an Iframe. I'm not sure if that would cause any problems.
I'm not sure what to try next. Any advice is appreciated.
Thanks in advance
UPDATE 1
I have tried entering the following code in the console
var $j = jQuery.noConflict();
$j('<table></table>').footable();
In an environment that successfully loads footable an object is returned with the footable classes. In my enviornment I get a "TypeError: undefined is not a function".
make sure load jquery first, and then footable
and $ is alias from jQuery, so its should not a problem, u can use $() or jQuery()
based on your question, you should use $() or jQuery(), not $.() or jQuery.()
I think you're on the right track with there being a conflict.
Here's a plunk that demonstrates the issue: http://plnkr.co/edit/2sR7F2W0QGJAcXxgez14
In the plunk, if JQuery is still reference by $ and you add the reference to Prototype, you see that Footable stops working. If you use the JQuery NoConflict and then use that instead of $, Footable starts work as expected again.
Here's where I define the scripts:
<head>
<link data-require="bootstrap-css#3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="footable.core.css" />
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="jqueryui#*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script>var $j = jQuery.noConflict();</script>
<script src="footable.js"></script>
<script src="footable.filter.js"></script>
<script data-require="prototype#*" data-semver="1.7.1+0" src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
</head>
Then when I use JQuery and Call footable():
$j(function() {
window.footable.options.filter.filterFunction = function(index) {
var $t = $j(this),
$table = $t.parents('table:first'),
filter = $table.data('current-filter').toUpperCase(),
columns = $t.find('td');
var regEx = new RegExp("\\b" + filter + "\\b");
var result = false;
for (i = 0; i < columns.length; i++) {
var text = $j(columns[i]).text();
result = regEx.test(text.toUpperCase());
if (result === true)
break;
if (!$table.data('filter-text-only')) {
text = $j(columns[i]).data("value");
if (text)
result = regEx.test(text.toString().toUpperCase());
}
if (result === true)
break;
}
return result;
};
$j('table').footable().bind('footable_filtering', function(e) {
var selected = $j('.filter-status').find(':selected').text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
e.clear = !e.filter;
}
});
}
If you want to continue to use $ jquery you could do something like: (jQuery and prototype.js conflict, how to keep jQuery as $?)
(function($) {
$('table').footable();
})(jQuery);

Validate loading CSS with JavaScript

I have two style sheets, one default style and one Christmas style. I would like the Christmas style to be loaded in December and the default to be used in every other month.
I have written the code below which achieves what I want, however if I put it in to a validator I get the error: "document type does not allow element "link" here". I was wondering how I could make this code validate?
<head>
<script type="text/javascript">
var i = new Date();
var m = i.getMonth();
if (m==11) {
document.write('<link rel="stylesheet" type="text/css" href="mystyle-christmas.css" />');
} else {
document.write('<link rel="stylesheet" type="text/css" href="mystyle-default.css" />');
}
</script>
</head>
The validator has problems because you're not using CDATA, thus the validator will parse your javascript. Use the following to solve your problem:
<head>
<script>
//<![CDATA[
// Your code here
// ]]>
</script>
</head>
Btw, the following is a better way to do it:
<head>
<script type="text/javascript">
var i = new Date(),
m = i.getMonth(),
l = document.createElement( 'link' )
l.rel = 'stylesheet'
if ( m === 11 ) {
l.href = 'mystyle-christmas.css'
}
else {
l.href = 'mystyle-default.css'
}
document.getElementsByTagName( 'HEAD' )[ 0 ].appendChild( l )
</script>
</head>
And an even better way is to have your javascript in an external js file.
Try creating the element instead of using document.write:
var christmas = document.createElement("link");
christmas.setAttribute("rel", "stylesheet");
christmas.setAttribute("type", "text/css");
christmas.setAttribute("href", "mystyle-christmas.css");
document.getElementsByTagName("head")[0].appendChild(christmas)

How to change the innerHTML of a div in the main page according to the div value in the included page?

I have included a file named test.php in the file index.php
lets assume index.php is like this
<html>
<head>
</head>
<body>
<h1 id="dash">Index</h1>
<div id='tab.php'>
<?php include('tab.php'); ?>
</div>
</body>
</html>
and tab.php is like this
<html>
<head>
</head>
<body>
<ul>
<li id='date' onClick="change_head(this.id);">Dates</li>
<li id='appoint' onClick="change_head(this.id);">Appointments</li>
<ul>
</body>
</html>
Here what i would like to do is, if the list item date is clicked(list items are actually tabs). The inner html of the h1 tag with id dash should be changed to Dates and if the list item appoint is clicked the inner html of same h1 tag with id dash should change to appointments.
how can i do that ?? i tried the usual javascript way by taking the ids and applying the if condition to change the innerHTML but it was not working..anyone pls help me how to do it
JAVASCRIPT (this is the js i tried to achive it...i added this in index.php)
function change_head(id){
dash = document.getElementById('dash').innerHTML;
if(id == date){
dash = "Date";
}
else if(id == appoint){
dash = "Appointment";
}
else{
dash = "Index";
}
}
You could try using jquery... something like this:
<script type="text/javascript">
$(document).ready(function () {
$("li#date").click(function () {
$("h1#dash").val("Dates");
});
$("li#appoint").click(function () {
$("h1#dash").val("Appointments");
});
});
</script>
Of course, if you had more of these tabs, I would create a single click event handler for all "li" elements and switch on the ID :-)
Assuming you're new to jquery, you'd also have to include the jquery script in your page. Something like:
<script src="/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
Check out jquery.com to get started.
If you want do it with JavaScript (i.e. without page reloading), so you need use DOM innerHTML.
Something like (if you didn't use jQuery), didn't test this code through, hope you get idea:
var changetext = function(e,t) {
e.innerHTML = t;
},
elemheader = document.getElementById('dash'),
elemdate = document.getElementById('date'),
elemappoint = document.getElementById('appoint');
if (elemdate.addEventListener) {
elemdate.addEventListener('click',changetext(elemheader,'Date'),false);
}
if (elemappoint.addEventListener) {
elemappoint.addEventListener('click',changetext(elemheader,'Appoint'),false);
}

Javascript DOM failing when moving a CKEditor node

I need to be able to swap CKEditor rich text areas throughout my webpage. My current script works great when there's no CKEditor applied, but does not successfully move the text area (and entered text) when CKEditor is applied. Here's some code(it needs ckeditor to work):
<html>
<head>
<title>Sample - CKEditor</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
<body>
<form method="post">
<p>
My Editor:<br />
first link
<textarea name="editor1"><p>Initial value.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
</p>
<p>
My Editor2:<br />
<textarea name="editor2"><p>Initial value2.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor2' );
</script>
</p>
<p>
<input type="submit" />
</p>
</form>
</body>
</html>
<script>
function swap(from, to){
if(from && to){
var parent = from.parentNode;
var t;
if(parent){
t = parent.removeChild(from);
parent.insertBefore(t, to);
t = null;
}
delete(t);
delete(parent);
}
}
</script>
If you comment out the CKEDITOR.replace() calls, there's no problem doing the swap. Any suggestions for how I can fix this? Thanks.
Turns out it's a bug. http://cksource.com/forums/viewtopic.php?t=18417
You have to destroy instances do your dom move and then apply CKEDITOR again
something like
var target = $( evt.target ).closest('.root');
var next = target.next();
var cke = target.find('.cke' ).attr('id')
cke = cke.replace('cke_','');
CKEDITOR.instances[cke].destroy();
var cke = next.find('.cke' ).attr('id')
cke = cke.replace('cke_','');
CKEDITOR.instances[cke].destroy();
next.after(target);
CKEDITOR.replace( $( 'textarea' , target)[0] ,{height: '250px'});
CKEDITOR.replace( $( 'textarea' , next)[0] ,{height: '250px'});
Here is my method, using jQuery.
My context: I want to move "div1" after "div2". Each DIV contains a textarea with CKEditor.
<div id="div1"><textarea id="txt1">Bla bla</textarea></div>
<div id="div2"><textarea id="txt2">Lorem ipsum</textarea></div>
<script>
CKEDITOR.replace('txt1');
CKEDITOR.replace('txt2');
</script>
Then, to move "div1" after "div2":
<script>
var current = $('#div1');
var next = current.next();//Same as $("div2")
//Remove instance of CKE
//but first, get the data from the wysiwyg editor
//(what you have typed can be lost)
var CKEinstance1 = CKEDITOR.instances['txt1'];
$('#txt1').html(CKEinstance1.getData());
CKEDITOR.remove(CKEinstance1);
//Also remove the wysiwyg from the DOM
//Its ID is always prefixed by "cke_" and followed by the textarea ID
$('#cke_txt1').remove();
//Move Div1 after Div2
current.insertAfter(next);
//Rebind CKE to txt1
CKEDITOR.replace('txt1');
</script>

Categories

Resources