Under the "subjunctivisor" graphic on https://www.lawlessfrench.com/subjunctivisor/ there is a drop-down box based on simple JavaScript: you choose an item and are automatically forwarded to that page.
If you click the drop-down while the page is still loading, it sometimes works. But if you wait until the page fully loads, nothing happens when you click the drop-down - you can't even make a selection.
I've looked at this with web console but don't see any obvious errors.
Here's the relevant part of the script:
<script type="text/javascript">function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") { location=form.select.options[index].value;}} </SCRIPT>
<FORM NAME="form1"> <SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1">
<option value="">Choose a verb or expression</option>
<option value="https://www.lawlessfrench.com/subjunctivisor/accepter/">accepter que</option>
<option value="https://www.lawlessfrench.com/subjunctivisor/accorder/">accorder que</option>
(omitted 250 other options)
</select>
</form>
It appears that your right-click blocker has functions to disable select elements (for some strange reason). Remove it because it doesn't do you any good anyway.
Look for this function in particular (and its IE equivalent):
function disableselect(e) { ... }
It resides in an inline script tag that looks like this:
<script type="text/rocketscript" data-rocketoptimized="true">
Update: I may have misinterpreted what that function does. It's worth a try removing it, however.
Solution: the Content Copy Protection & Prevent Image Save plugin had an option to disable selection. Once I unchecked that option, the js worked.
Related
I decided to go with a shortcut method of getting a dropdown list of countries and states by using the geodata configurator:
<select name="country" class="countries order-alpha" id="countryId">
<option value="">Select Country</option>
</select>
<select name="state" class="states order-alpha" id="stateId">
<option value="">Select State</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//geodata.solutions/includes/countrystate.js"></script>
I get this to work perfectly in JSBin but I can not get it to work on my site (Flask/Jinja).
I copied and pasted as you see here (though I did move the script tags to the bottom above the {% endblock %} of my template).
The fact the code works on JSBin but just gives me nothing on my site: https://gyazo.com/a67c8f738e95d57efac2c74e426c37b1
Makes me believe this is some mixup with Python or another JS Script.
I have <script src="https://code.jquery.com/jquery-3.5.1.min.js "... and <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> both loading too (from the base template).
From what I can tell all the scripts have loaded. Any other reason why the dropdown select isn't working?
I'm Andy, the developer of geodata.solutions.
It's difficult to say what the issue is without seeing your app, but the general things apply:
-Use the web developer console to see if anything is thrown up.
-My initial thoughts if no js errors are thrown is that you have another element with id countryId, and that's why it's not changing the dropdown.
-If you make a local copy of countrystate.js and use that, you can add console logs to the various events to see where the issue is. It's that initial function this.getCountries that you want to look at, which is triggered by the function at the bottom
jQuery(function() {
var loc = new locationInfo();
loc.getCountries();
jQuery(".countries").on("change", function(ev) {
var countryId = jQuery("option:selected", this).attr('countryid');
if(countryId != ''){
loc.getStates(countryId);
}
else{
jQuery(".states option:gt(0)").remove();
}
});
jQuery(".states").on("change", function(ev) {
var stateId = jQuery("option:selected", this).val();
if(stateId != ''){
loc.confCity(stateId);
}
});
});
-I'm not a python dev, so if it is related to a conflict with python, then someone with that background might have experience.
Please let me know how you get on. Anything I can do to make it more platform-neutral is appreciated.
I have some links in my navigation bar dropdown that all direct to the same page, but depending on the link that was clicked, it should select a specific select box option on this page. I decided to store the href link value in local storage and call the value when the linked page is loaded using jQuery, but I get the message "null" when the new page is loaded.
This is the html of the navigation bar dropdown links:
Jackets
Shoes
Shirts
JavaScript to store selected value in local storage:
window.onload = function() {
var linkInput = $('a[href="newpage.php"]').click(function () {
($(this).data('select'));
localStorage.setItem("storelinkInput",linkInput);
}
JavaScript in newpage.php:
window.onload = alert(localStorage.getItem("storelinkInput"));
var $select = $('#selector');
$select.val("storelinkInput");
HTML of select box in newpage.php:
<form>
<select id="selector">
<option value="option1">Jackets</option>
<option value="option2">Shoes</option>
<option value="option3">Shirts</option>
</select>
</form>
Honestly I am not sure if it is the best solution to use local storage for this purpose, or if it would be better to use PHP for this. Any suggestions that would point me in the right direction are much appreciated!
Thanks to Lars' comment I could fix the code and now it is running. In case someone is looking for a solution to this or a similar question here is the functional code:
This is the html of the navigation bar dropdown links:
Jackets
Shoes
Shirts
JavaScript to store selected value in local storage:
$(document).ready(function(){
$('a[href="newpage.php"]').click(
function () {
var toStore = $(this).data('select');
localStorage.setItem("storelinkInput", toStore);
});
});
HTML of select box in newpage.php:
<form>
<select id="selector">
<option value="option1">Jackets</option>
<option value="option2">Shoes</option>
<option value="option3">Shirts</option>
</select>
</form>
JavaScript in newpage.php:
$('#selector').val(localStorage.getItem("storelinkInput"));
It is important to place the second javascript ("$('#selector').val...") after the select box in the html/PHP file.
I'm using Eric Hynds jquery API for jQuery UI MultiSelect-dropdown Widget
I'm having one dropdown which selects job category (multiselect) It takes effects of included api script.
On each select from dropdown i'm making a jQuery ajax request to find job rolls for a particular category. And again displaying those job rolls in dropdown to give multiselect effect of jquery API. But that generated dropdown won't take effect of multiple dropdown as first dropdown. I have done all necessary things like initializing API call for that generated dropdown.
Here is the code:
$(function(){
$("#job_locations, #industries, #job_functions, #roll_list").multiselect({
noneSelectedText: "Select an Option",
selectedText: "# of # checked"
}).multiselectfilter();
});
#job_locations, #industries, #job_functions takes the effect of API but generated dropdown #roll_list won't take that effect. This ids are given to <select> tag
Third dropdown is not cating the effects
Is there something like generated result won't catch the effect of already loaded script?
Edit:
The php code i'm using to print ajax response
$select=' <select id="roll_list" name="roll_list[]" multiple="multiple">';
foreach($array as $function_name=>$roll_array){
$select.="<optgroup label='".$function_name."'>";
foreach($roll_array as $index=>$roll_info){
$select.="<option value='".$roll_info['role_id']."'>".$roll_info['role_name']."</option>";
}
$select.="</optgroup>";
}
$select.="</select>";
echo $select;
HTML code:
<select id="roll_list" name="roll_list[]" class="multi_select_dropdown" multiple="multiple" onchange="dispInventry();" style="width: 400px;">
<optgroup label="Customer Service/ Call Centre/ BPO">
<option value="14">Fresher</option>
<option value="15">Trainee/ Management Trainee</option>
<option value="16">Technical Support Executive ( voice)</option>
<option value="17">Technical Support Representative (Non- v)</option>
<option value="46">External Consultant</option>
</optgroup>
</select>
I'm i doing something wrong? How to tackle this? I can provide all necessary code if needed.
Thanx in advance
make
function create_mutisilect() {
$("#job_locations, #industries, #job_functions, #roll_list").multiselect({
noneSelectedText: "Select an Option",
selectedText: "# of # checked"
}).multiselectfilter();
}
it a separate function out side document.ready and
1.call it in document.ready
2.call it after your ajax call
$(document).ready(function(){
create_mutisilect();//1
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
ceate_mutisilect();//2
}
});
});
<form id="search" action="/search" method="get" autocomplete="off">
<div>
<input type="button" name="test_button" value="test" />
</div>
</form>
<script>
document.getElementById("test_button").value = "changed_test"
</script>
Just as the HTML code above shows, I have defined a button with name test_button and value test and changing its value with the code in the script tag.
Now I am debugging a large webpage which is using a mechanism like this using Firebug and Firefox in Linux.
I want to know how I can find the script that changes the value attribute of the <input ... />, but the web page is too large, various <script> and anonymous functions which are auto-executed made it nearly impossible to find the specific script manually.
Since I am in Linux, I cannot use any Microsoft tools to search the whole web page. I only have Firebug and Chrome. Can Firebug realize that? Does anyone have a good idea of how to find the specific <script> that changed the value?
Add some code like this to the document, right after the form with the button:
<script>
var node = document.getElementById("test_button");
Object.defineProperty(node, 'value', {
set: function() { throw new Error('button value modified'); }
});
</script>
This will throw an error when anything tries to modify the button's value.
Expand the error and click the last line number shown. This will take you straight to the line that set the value of the button.
Here's a demo: http://jsfiddle.net/XSJZN/
Tested in Chrome 17.
I've been working on a wordpress site for an internship and I'm wanting to embed javascript code in a page to create a dropdown menu that navigates the browser to the selected page.
I'm wondering, is there something special you need to do to allow js to work in a wp page?
I tried the following code embedded in the page using the html side of posting option:
<script language="javascript" type="text/javascript">
<!--
function menu_goto( menuform )
{
// see http://www.thesitewizard.com/archive/navigation.shtml
// for an explanation of this script and how to use it on your
// own site
var baseurl = "173.236.164.86/where-to-buy/" ;
selecteditem = menuform.newurl.selectedIndex ;
newurl = menuform.newurl.options[ selecteditem ].value ;
if (newurl.length != 0) {
top.location.href = baseurl + newurl ;
}
}
//-->
</script>
<form action="dummyvalue">
<select name="newurl" onchange="menu_goto(this.form)">
<option value="" selected="selected">----- Select A Product -----</option>
<option value="vene-prototype-version/">VENE Prototype Version</option>
<option value="configuration-vene-version/">VENE Configuration Version</option>
<option value="customized-vene-version/"> VENE Customized Version</option>
</select>
</form>
The dropdown menu appears, but fails to redirect the browser on change.
I have tried surrounding the code in the page with the tags and that has no effect either.
http://173.236.164.86/where-to-buy/
thanks for the help!
Developer Tools show a parse error in your JS. Probably from WP automatically inserting paragraph returns. Remove all the white space and carriage returns in the JS and try it.