Effects of external bootstrap library not applied on the JS generated html - javascript

I have a table which is being generated on the webpage after we click he button proceed <button class="btn btn-default" id="proceed">Proceed</button> the external library that i have included in order to make multi select boxes is bootstrap-select. The problem is that while the library is working normally when i include it in my webpage as :
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/css/bootstrap-select.min.css" />
<script type="text/javascript" src="<?php echo base_url();?>/js/bootstrap-select.min.js"></script>
(using codeignitor as a framework) but it doesn't work on the mutiselets i have in my table which are being generated using Jquery as :
$('#proceed').click(function(){
makeTable();
});
and excerpt from the makeTable function (which is were the problem lies) is :
tbody = '<td><select id="fromstation" name="ratelist_party_base" class="selectpicker" multiple><option value="example">example</option></select></td>';$("#tab_logic").append(tbody);
tab_logic being the id of the desired place to append , while ill like to make a few things clear is the the code is working fine and the table is being generated, the only problem is that the mutiselect boxes in my code are not getting the library applied on them , and yes while i know there are better ways of rendering the table (like bootstrap modal) for example , but due to some development reasons that is not a viable option. so someone shed some wisdom . much appreciated

After appending your html you need to call the selectpicker() again. I hope it helps.
tbody = '<td><select id="fromstation" name="ratelist_party_base" class="selectpicker" multiple>'<option value="example">example</option></select></td>';
$("#tab_logic").append(tbody);
$("#fromstation").selectpicker();

Related

search is disabled with select2 library with bootstrap modal

I am trying to use select2 library with my page using php everything working perfect even is behaving well but problem is that i cannot search anything the search is by default disabled which was my main reason to use this library.
<https://jsfiddle.net/udp3qq7t/5/
I don't see any problem in your code. Here is the working demo of select two I extracted from your code.
<select class="scselect" name="cname">
<option>Select</option>
<option>Pakistan</option>
<option>Dubai</option>
<option>Bangladesh</option>
</select>
<script>
$(document).ready(function() {
$(".scselect").select2({});
});
</script>
JSfiddle
Make sure PHP code is not breaking your output
I have sort out the issue by Select2 doesn't work when embedded in a bootstrap modal
post.By (remove tabindex="-1" from modal)

Toggle Visibility of Separate Javascript Files on Same Wordpress Page

Let me preface by saying this is all in relation to a Wordpress page. My knowledge of JS is lacking at best and the concept of installing/loading/enqueueing a function on one area of the site and then calling that function in another area of the site is a something that makes sense to me in my head but is very new to me in practice and might need a little explaining.
I have two separate javascript files that I would like to load on a single page, but toggle visibility/display of either based on radio button input. The JS is provided by a 3rd party and is offsite. Their provided code is this:
<script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>
and
<script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>
Each file presents a separate set of filtered results from their database. How can I incorporate both onto a page but only have one or the other showing based on a radio button form input? I would like the page to start off with nothing visible (hopefully giving time for both JS to load in the background while the user selects an option) and then show one or the other depending on what they selected.
You can see a single one of these in action at http://pricelesspetrescue.org/adoptable-dogs/. I'm trying to incorporate the use of an additional file on that same page based on input from the user and only showing one or the other rather than both.
I have tried to manage the following
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
function displayForm(c) {
if (c.value == "2") {
jQuery('#claremontdogContainer').toggle('show');
jQuery('#chdogContainer').hide();
}
if (c.value == "1") {
jQuery('#chdogContainer').toggle('show');
jQuery('#claremontdogContainer').hide();
}
};
</script>
<label>Please select a location to view:</label>
<form>
<input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Chino Hills
<input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Claremont
</form>
<div style="display:none" id="chdogContainer">
<script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>
<script type="text/javascript">
</script>
</div>
<!-- If I uncomment this second block the whole thing breaks
<div style="display:none" id="claremontdogContainer">
<script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>
<script type="text/javascript">
</script>
</div>
-->
This gets pretty close to what I need. The problem I have is the second script load seems to conflict with the functions they provide in the script. It will display the initial result but does not carry any of the functionality that it should have. http://pricelesspetrescue.org/test-page/ Nothing is clickable inside those results and should be.
Been searching through various similar posts and the wordpress codex and...and...I just haven't been able to come up with anything that seems close enough to what I'm looking for to make the answer click in my head.
Edit: It seems that if I only load one of the scripts in either what I have above or the suggested answer below, all functionality is present when loaded. It's the loading of the second toolkit script that is breaking the page. I'm guessing one would need to be loaded then unloaded before loading the second for it to work. Any ideas?
The toolkit.js file you linked adds some common scripts to the DOM (via document.write function, which is not a good solution - see here: http://www.jameswiseman.com/blog/2011/03/31/jslint-messages-document-write-can-be-a-form-of-eval/), then populates an array (toolkitObjects) with a series of variables that are custom per file and finally loads some other scripts.
It also seems that each file loads a div with a specific class containing all the pets, and each div is identifiable by a specific class ( "rgtk-SOMEID" ) and therefore can be shown/hidden via javascript.
Here is an example of what you can obtain using the div class:
http://jsbin.com/loneyijuye/edit?html,output

How to set datepicker to textbox in fiddle?

Well i been facing issue to conStruct a fiddle where i can explain my problem to everyone clearly . Well i done most part and i needed small assistance on helping me setting up fiddle with datepicker binded to textbox in my fiddle
My fiddle : http://jsfiddle.net/JL26Z/2/
<script id="PhoneTemplate" type="text/html">
<div> // designing template for further use
Well depends on my this resolution i can post my real issue .
Regards
Updated your Fiddle:
In your fiddle, if you are using Knockout.js , other files can be added in the External Resources Tab. You need to add jQuery UI reference to it.
Add these lines to your code.
Html :
<input type="text" id="date" />
Js :
$(document).ready(function(){
$('#date').datepicker();
});
Note : This is just an answer to include datepicker in the fiddle.
For the whole functionality you should refer this answer - Link.

trying to make an already clickable div open fancybox

im not much of a coder. just sort of self taught through wordpress. i have a site I've hacked together from a blank theme and I've taken it pretty far.
the last step i want to do is have my #brick open the permalink page with either rel, or class of fancybox.
using WP fancybox plugin.
here is what I'm doing to make the div clickable in the first place
<div id="brick" onclick="location.href='<?php the_permalink(); ?>';" style="cursor:pointer;">
where in this line would i add rel="fancybox" or class="fancybox"?
thank you in advance.
Since you already have the href set in your <a> tag, like this part of your code.
<h2 class="entry-title"><a rel="bookmark" title="Permalink to Art and commerce in the digital age" href="http://throughthelattice.com/art-and-commerce-in-the-digital-age/">Art and commerce in the digital age</a></h2>
... then, I would do :
Remove this line
<script src="//throughthelattice.com/wp-content/themes/lh_wordpress_blank_theme/js/jquery-1.7.1.min.js"></script>
... you already loaded jQuery v1.8.3 in your <head> section
Replace all id="brick" by class="brick"
Replace this script
<script>
$('#brick').fancybox();
</script>
... by this :
<script>
jQuery(document).ready(function () {
jQuery("a[rel='bookmark']").fancybox({
"type": "iframe"
});
}); // ready
</script>
See JSFIDDLE
Rather straight forward to add rel or class properties to an element:
<div id="brick" onclick="location.href='<?php the_permalink(); ?>';" style="cursor:pointer;" rel="fancybox" class="fancybox">
And the JavaScript could be:
$("div.fancybox").fancybox();
or whatever selector you'd like to use. Since you can select with jQuery using a combination of class, id or tag name.

controlling the width for a select box

i was trying to change the width of a particular optional value under <select> attribute, something like this. But i am getting troubled as in IE the select box along with the option value gets expanded. Is there any simple way to make the <option> only to expand and not the <select> box.. mainly in IE ....
<select width="123" style="width: 123px;">...</select>
Seems to be quite compatible solution working with all newer browsers.
This can be done using the jQuery plugin found at
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo
The plugin is very simple to use. Here's a breakdown of some full working code.
HTML
<select id="test" >
<option>choose on</option>
<option>aaaaaaaaaaaaaaaaaaaaaaa</option>
<option>bbbbbbbbbbbbbbbbbbbbbbb</option>
<option>ccccccccccccccccccccccc</option>
<option>ddddddddddddddddddddddd</option>
</select>
CSS
#test{
width:100px;
border:1px solid red;
}
jQuery
Don't forget to include the jQuery Js file and this plugins' Js file.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://files.jainaewen.com/files/javascript/jquery/ie-select-style/jquery.ie-select-style.min.js"></script>
Then put the following right after:
<script type="text/javascript">
$('#test').ieSelectStyle();
</script>
All this should go before the closing </body> tag
Check working example at http://jsfiddle.net/7Vv8u/2/
Styling <select> items is a bit of a problem since there is no cross-browser solution without using JavaScript - since each browser handles rendering of the form controls differently.
I would suggest using an <ul> element and applying the functionality/design to act more like a <select> element - using JavaScript
this article may help you with this

Categories