I wanted to create a php template popup will appear on a small window by clicking jquery select menu.
For that reason I used select menu:
<div class="form-group">
<select id="lunchBegins" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Select a Popup" onchange="javascript:handleSelect(this)">
<option value="first_popup" value="1">Popup A</option>
<option value="second_popup">Popup B</option>
</select>
and javascript:
function handleSelect(elm)
{
window.location = elm.value+".php";
}
But it doesn't create a popup.it redirects me to the php file.Also I want that when it will open a popup, .php extension will be hidden.
Can you help me in this case.
Window.locations redirects you
Therefore you should use jquery .load method or ajax for loading your php file :)
Related
I have the following code on another webpage on my site with a form (say on page index.html): JSFiddle
<select class="select form-control" id="dropdown" name="dropdown" onchange="showForm()">
i.e a dropdown form.
I want to have a link on another webpage that will go to this page, and have the "Sales" option already selected.
<option value="1">
Sales
</option>
from the drop down menu (instead of the current default option), how do I create this?
Query parameters can be used to achieve the result you want, but you will need to parse the query parameter manually on your current page, since there is no standard JavaScript method for doing it.
You can write the following code on your page to automatically select the option:
$(document).ready(function() {
// Parse your query parameters here, and assign them to a variable named `queryParams`
var option = queryParams.type;
$("#dropdown").val(option);
});
Now you can create an anchor with the URL of this page, e.g. http://yourpage.url?type=1, which will redirect to this page, and will automatically change the value of your dropdown accordingly.
You must add some kind of router functionality with Javascript in your site.
I think the simplest thing you could do it to have a script in that page that checks the url if it has say a #bar hash like so: http://yoursite.com/foo.html#bar.
<script>
// make sure you run this on DOM ready like in $.ready() in jQuery or in a script just before closing the body tag
if(window.location.hash === 'bar') {
// add the selected attribute to the <option> you want
}
</script>
Try with append() function of jquery .and pass this with in onchange function call .And also added with document.ready for create the link on document load with selected value
function showForm(that){
var s = $(that).children('option:selected').text()
$('#link_box').append(''+s+'</br>')
}
$(document).ready(function(){ // for window load
showForm($('select'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group ">
<label class="control-label" for="dropdown">
What can we help you with?
</label>
<select class="select form-control" id="dropdown" name="dropdown" onchange="showForm(this)">
<option value="0" disabled>
Select an option
</option>
<option value="1" selected>
Sales
</option>
<option value="2">
Complaints
</option>
<option value="3">
Queries
</option>
<option value="4">
Ideas
</option>
</select>
</div>
<div id="link_box">
<!-- its a link append box-->
</div>
I have a json file exciting an array of images. I have fancy box install and when you click the image an inline div will appear. With in the inline div I display the image and in have a dropdown box to display options for selecting. I idea is to select an option then go to the corresponding page. I can get this to work with links but I want it to use a dropdown feature. No function will execute within the fancy box window.
function fruitselect() {
var e = document.getElementById("mySelect");
var strUser = e.options[e.selectedIndex].value;
alert(strUser);
};
<form>
Select your favorite fruit:
<select id="mySelect" onchange="fruitselect()">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
Is there a way to do this?
It is very hard to understand your comment and I do not see any issue with your code: http://codepen.io/anon/pen/pPpVxe?editors=1010
Also, you can disable "touch" feature if it is causing some trouble:
<a data-fancybox data-options='{"src": "#content", "touch": false}' href="javascript:;">
Open demo
</a>
I have created a website with javascript dropdown option menu.
This is my menu.php file
<select onchange="if (this.value) window.location.href=this.value">
<option value="/home.php">Home</option>
<option value="/aboutme.php">About Me</option>
<option value="/work.php">Work</option>
<option value="/contect.php">Contect Me</option>
</select>
I have included this file on every pages of website.
It works fine.
Now what I want is : When I click on the aboutMe from dropdown menu in "home" It should redirect me to About Me page and dropdown menu in aboutme page should remain at about me. So far it is redirecting successfully, but dropdown menu always remains on "Home".
Is there a way to solve this ? or Should I create a saparate file for each pages?
I am confused. Please Help.
Give your select an id:
<select id="page" onchange="if (this.value) window.location.href=this.value">
and use the script:
<script>
window.onload = function(){
document.getElementById('page').value = window.location.href;
}
</script>
I'm using jquery mobile. In my form I have two selectmenu filterable plugin. After I push the button (not submitting the page, only calling a javascript async function that sends parameters to server), the structure of the page is not the same as before. The filter textboxes are shown below each "select" method, and nothing works! I expanded the elements of the page, and I saw that it automatically wraps element with tag (after the function ends). So maybe that's why the structure is disassembled. Any idea how to fix this problem?
UPDATE:
This is the code for html (other codes are originally from jQuery):
<div class="ui-field-contain">
<select id="lstProjects" data-native-menu="false" class="filterable-select">
<option>Select Project</option>
</select>
</div>
<div class="ui-field-contain">
<select id="lstDuration" data-native-menu="false" class="filterable-select">
<option>Select Duration</option>
</select>
</div>
I am having a JSP page which includes another JSP which has all the common customized popup boxes. On my main JSP page I have a button that says "Cancel". when I press this the Javascript is invoking a div which is present in the JSP file which I have included.
The invoked pop up has a div and in it there is a dropdown box. The user can select the reason from the dropdown box. Now if the user closes the pop-up box and clicks the Cancel button again, the dropdown box persists the value that was selected earlier.
I want to make the value to go to default. If I refresh the page the value is removed. I tried to refresh the page but then it gives an alert to confirm the submission, which doesn't look good in the terms of user experience.
I am using Struts 2.
How can I do this?
I found the solution for the problem. Posting here for others.
My html code
<select name="cancel.cancelReasonCode"
id="selectCancellationReason"
data-theme="c"
data-mini="true"
data-native-menu="false"
tabindex="-1">
<option value="0">Select Cancellation Reason</option>
<option value="3">Created by mistake</option>
<option value="2">Incorrect Id</option>
<option value="1">Data not available</option>
</select>
Javascript code
var myselect = $("select#selectCancellationReason");
myselect[0].selectedIndex = 0;
myselect.selectmenu("refresh");
I am using jquery and jquery mobile in my application.