JQuery mobile adds form element after calling a async function - javascript

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>

Related

Javascript innerHTML messing with html attributes

I'm trying to have a select inside a materialize modal.
So far everything works fine but when I refresh the content of the modal select with an ajax request, the select disappears.
After investigating, I find that the innerHTML is not proper HTML.
Here is what I have :
let modal = htmlResponse.find('#modal')
let modal_old = document.getElementById('modal')
console.log(modal)
console.log(modal.innerHTML)
modal_old.innerHTML = modal.innerHTML
The console log is the following :
<div class="modal-content">
<h4>Title</h4>
<p>Some Text</p>
<select id="mySelect" name="mySelect">
<option value="" disabled selected>Select one user</option>
<option value="2" id="2 ">Name 1</option>
<option value="4" id="4 ">Name 2</option>
</select>
</div>
<div class="modal-footer">
Cancel
Ok
</div>
Followed by
<div class="modal-content">
<h4>Title</h4>
<p>Some text</p>
<select id="mySelect" name="mySelect">
<option value="" disabled="" selected="">Select one user</option>
<option value="2" id="2 ">Name 1</option>
<option value="4" id="4 ">Name 2</option>
</select>
</div>
<div class="modal-footer">
Cancel
Ok
</div>
As we can see, the disabled and selected are replaced with
disabled="" and selected="".
The modal is still opening after the innerHTMl replacement but the select is not visible.
When I inspect the modal (after the ajax replacement) using Chrome dev tools, I see the first output (with the correct select) but it's not displayed.
Is this caused by innerHTML or a bad usage from me?
By the way, I'm testing on macOS High Sierra (10.13.2) with Chrome (63.0.3239.108) which are both in the latest available update.
The website is hosted in a docker container but I don't believe the problem could come from here.
After investigating, I find that the innerHTML is not proper HTML.
It is proper HTML.
See boolean attributes:
A boolean attribute without a value assigned to it (e.g. checked) is implicitly equivalent to one that has the empty string assigned to it (i.e. checked=""). As a consequence, it represents the true value.
So the two sets of HTML express the same information and both do it correctly.
Converting HTML to a DOM and then asking the browser to convert a DOM to HTML will give you normalised HTML, not the original HTML. So the change is normal.
When I inspect the modal (after the ajax replacement) using Chrome dev tools, I see the first output (with the correct select) but it's not displayed.
None of the code in the question would explain it not being displayed. That must be caused by some other part of your code.
The problem was due to the implementation of select in Materialize.
I haven't had any problems with it yet so I didn't read the documentation properly. It's written that a select must be initialized with jQuery.
So I added
$('select').material_select()
and reinitialized the modal
$('.modal').material_select()
and now everything is working.

How do I create a link to pre-select a form option

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>

How to add a DIV to select option using javascript

My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?
Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.

jQuery Mobile Multi-Select from asynchronous data

I have a little problem with jQuery Mobile and AngularJS.
I want a multi-select so the user can chose a category. Categories have parents and childs. The whole structure comes from a database so its an asynchronous call to get the data.
The problem is that the select element has the data but doesn't show it unless you click on the first empty option.
Maybe i'll better show than tell
http://plnkr.co/edit/7UwGjSRfGEnhIvSrtGjV
<div ng-show="catsready" id="jqselect">
<label for="multiselect" class="select">Multi-select:</label>
<select id="multiselect" multiple="multiple" data-native-menu="false" data-icon="bars" data-iconpos="left">
<option>Choose a few options:</option>
<optgroup ng-repeat="parent in cats" label="{{parent.name}}">
<option ng-repeat="child in parent.childs" value="" jq-select>{{child.name}}</option>
</optgroup>
</select>
</div>
After angular has added/changed the optiongroups and options, you need to tell jQM to refresh the selectmenu widget:
$("#multiselect").selectmenu("refresh", true);
API Doc: http://api.jquerymobile.com/selectmenu/#method-refresh

Applying rateit jquery plugin to a select box

I have the following select form element, and I want to apply the rateit jquery plugin to it.
<select class="test" id="Rating" name="Rating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
and I am trying to apply the plugin using $("select.test").rateit();, but despite fireQuery showing data attached the the select element that, no effect is made and I am still left with a select box, and not a line of stars.
EDIT
CSS File is included
Here is the page in question
You're using the plugin wrong. See very simple example: http://jsfiddle.net/rudiedirkx/ZuJ2k/
The select has to be there, but you still have to reference the div when you call the plugin: $('div#rating2').rateit();
The div then has a reference to the select with a data attribute: data-rateit-backingfld="select#Rating"
edit
Actually it looks like you're not using the plugin at all? Where do you call the plugin?
edit
This is your code:
rateItDiv = $('<div class="rateit" data-rateit-backingfld="#Rating"></div>');
$("div#ReviewInputZone select.test").after(rateItDiv);
$('div#rateit').rateit();
On the last line, you reference div#rateit, but that div doesn't exist. You just created a div.rateit, not a div#rateit. Change either of those to the other, and it should work. I'd keep the # because that's slightly faster (but you'd have to be sure there's only one of these rateit dropdowns on a page).
So the new first line:
rateItDiv = $('<div id="rateit" class="rateit" data-rateit-backingfld="#Rating"></div>');
edit
Also, you can test it before you change any code. Just open your Javascript console (Firebug in FF or Developer tools in Chrome) and type: jQuery('div.rateit').rateit();

Categories

Resources