JQuery Mobile Select doesn't refresh - javascript

I have 2 select.
<select name="paketart" id="paketart">
<!--Via Jquery-->
</select>
<select name="terminart" id="terminart">
<!--Via Jquery-->
</select>
And the Javascript code.
$(document).ready(function() {
$("#kundenselectid").change(function() {
$('#terminart').empty();
$('#paketart').empty();
$.getJSON( "/Daten/GetPakete.php", {id : $('#kundenselectid').val()},function( data ) {
var first = true;
$.each( data, function( key, val ) {
if (first)
{
$('#paketart').append('<option value="' + val['geId'] + '" selected>' + val['paName'] + ' - ' + val['Rest'] + '</option>');
$.getJSON( "/Daten/GetTerminart.php", {id : $('#paketart').val()},function( data ) {
$.each( data, function( key2, val2 ) {
$('#terminart').append('<option value="' + val2['taId'] + '">' + val2['taName'] + ' - ' + val2['taDauer'] + '</option>');
});
});
} else {
$('#paketart').append('<option value="' + val['geId'] + '">' + val['paName'] + ' - ' + val['Rest'] + '</option>');
}
});
});
$('#terminart').selectmenu('refresh', true);
$('#paketart').selectmenu('refresh', true);
});
});
But the Problem is it doesn't select the first option.
The options are added but I cant select them.
Any suggestions?

Related

How to select single element value which created dynamically in html using jQuery / Javascript?

I have a scenario like this:
for (var k in active) {
notifications.append(
'<a href="javascript:toast();">' +
'<div>' +
'<input class="phone_number" type="hidden" id='+active[k].phone_number+' value='+active[k].phone_number+'>'+
'</input>'+
'<span class="notify bg-blue">' + '<i class="fa fa-clock-o"></i>' + '</span>' +
'<span>' +
'<span>Sim ' + active[k].phone_number + ' Expires in ' + active[k].expiry_count + 'days</span>' +
'<br/>' +
'<span class="time">Just Now</span>' +
'</span>' +
'</div>' +
'</input>'+
'</a>');
}
i created dynamic elements using jade template engine.
here i need to identify each <a> click and i nedd to get the value of hidden field.
function toast() {
var grade;
//var phone_number=document.getElementById('phone_number').value;
$.each($('.phone_number'), function () {
grade = $(this).val();
alert(grade);
});
}
by doing this i got a loop of value. which i didn't want. i need single item value. how to solve this ?
pass this to the toast
'<a href="javascript:toast(this);">' +
and change the toast method to
function toast( thisObj )
{
var grade = $( thisObj ).parent().find( '.phone_number[type="hidden"]' ).attr( "value" );
alert( grade );
}
notifications = $(".notifications")
active = [{ phone_number: "982334",expiry_count: "1"},
{ phone_number: "982334",expiry_count: "1"}]
var k;
for (var k in active) {
notifications.append(
'<a href="javascript:toast();">' +
'<div>' +
'<input class="phone_number" type="hidden" id='+active[k].phone_number+' value='+active[k].phone_number+'>'+
'</input>'+
'<span class="notify bg-blue">' + '<i class="fa fa-clock-o"></i>' + '</span>' +
'<span>' +
'<span>Sim ' + active[k].phone_number + ' Expires in ' + active[k].expiry_count + 'days</span>' +
'<br/>' +
'<span class="time">Just Now</span>' +
'</span>' +
'</div>' +
'</input>'+
'</a>');
}
$(document).on('click', 'a', function(){
alert($(this).find('.phone_number').val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notifications"></div>
Its simple.Try this
$(document).on('click', 'a', function(){
alert($(this).find('.phone_number').val())
})
Send the toast function the k you are iterating over
'<a href="javascript:toast(' + k + ');">'
then use k in your function
function toast(k) {
//use k (maybe select by id)
}

using javascript how do i put rss feed into a list and show only 4 of them

I have the rss titles going into a dropdown box and they change when each one is clicked on but i want about 4 rss feeds showing on the page so i dont need the dropdown box.
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "rss_warriors.php",
dataType: "xml",
cache: false,
success: parse_rss
});
function parse_rss(rss_feed)
{
console.log(rss_feed);
$('#output').append('<select>');
$(rss_feed).find("item").each(function()
{
$('select').append('<option value="' +
$(this).find('title').text() + '">' +
$(this).find('title').text() + '</option>');
});
line_record(0,rss_feed);
$("select").on("change", function(evt)
{
line_record( $("select option:selected").index(),rss_feed)
});
}
function line_record(sel_index,rss_feed)
{
var local_index = sel_index;
var image_url;
var item_title;
var item_description;
var item_pubDate;
image_url = $(rss_feed).find("item").eq(local_index).find("thumbnail").last().attr("url");
item_title = $(rss_feed).find("item").eq(local_index).find("title").text();
item_description = $(rss_feed).find("item").eq(local_index).find("description").text();
item_pubDate = $(rss_feed).find("item").eq(local_index).find("pubDate").text();
$("#img_warriors").empty();
$("#txt_warriors").empty();
$("#img_warriors").append("<img src='" + image_url + "'>");
$("#txt_warriors").append("<span class='title_large'>" + item_title + "</span>");
$("#txt_warriors").append("<p>" + item_description + "</p>");
$("#txt_warriors").append("<p>" + item_pubDate + "</p>");
}
});
Not sure if it is what you mean, but what about :
$(rss_feed).find("item").each(function(i) {
if (i <=3) {
$('select').append('<option value="' +
$(this).find('title').text() + '">' +
$(this).find('title').text() + '</option>');
}
});

Programmatically trigger jquery dropdown change event as soon as the page loads

I have 2 dropdownlist that will fire an event if both of them are changed.
(meaning, any changes on the indices will fire a json request that is based on the dropdownlist's current value and append them to my table).
My question is that,as soon as the page loaded, are there any ways to pre-select their indices and fire the event at the same time? I am planning to set them based on the current term and school year.
Here is my jquery code:
$schoolyear = $('select#schoolyear');
$schoolterm = $('select#schoolterm')
$tbl = $('#classview');
$schoolyear.change(function () {
getCL();
});
$schoolterm.change(function () {
getCL();
});
function getCL() {
$.getJSON('#Url.Action("getClassList","Enrollment")', { term: $schoolterm.val(), year: $schoolyear.val() }, function (e) {
$tbl.find('tbody').remove();
if (e.length > 0) {
$(e).each(function (index, e) {
$tbl.append('<tr><td>' + e.subj + '</td><td>' + e.days + '</td><td>' + e.cstart + '</td><td>' + e.cend + '</td><td>' + e.professor + '</td><td>' + e.units + '</td><td>' + e.status +
'</td>' + '<td>' + '<form action="/Enrollment/dropClass" method="post">' + '<input type="hidden" name="test" value="'+e.id+'"/>' +
' Delete ' + '</form></td></tr>')
});
}
else {
$tbl.append('<tr><td colspan="8">No match found</td></tr>');
}
//compute t
});
}
Can trigger the change on one of them while setting value
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var term = Math.ceil(month/4);// needs verification on how term is set
$schoolyear
.change(getCL)
.val(year);//set year value
$schoolterm
.change(getCL)
// trigger change after setting value, will call getCL()
.val(term).change();
Try just adding getCL() at the bottom of your script.
$schoolyear = $('select#schoolyear');
$schoolterm = $('select#schoolterm')
$tbl = $('#classview');
$schoolyear.change(function () {
getCL();
});
$schoolterm.change(function () {
getCL();
});
function getCL() {
$.getJSON('#Url.Action("getClassList","Enrollment")', { term: $schoolterm.val(), year: $schoolyear.val() }, function (e) {
$tbl.find('tbody').remove();
if (e.length > 0) {
$(e).each(function (index, e) {
$tbl.append('<tr><td>' + e.subj + '</td><td>' + e.days + '</td><td>' + e.cstart + '</td><td>' + e.cend + '</td><td>' + e.professor + '</td><td>' + e.units + '</td><td>' + e.status +
'</td>' + '<td>' + '<form action="/Enrollment/dropClass" method="post">' + '<input type="hidden" name="test" value="'+e.id+'"/>' +
' Delete ' + '</form></td></tr>')
});
}
else {
$tbl.append('<tr><td colspan="8">No match found</td></tr>');
}
//compute t
});
}
getCL(); //this will run once when page is loaded.
To answer your other question, you can set a default pre-selected option in the dropdown by adding selected to your dropdown. For example:
<select>
<option value="2012">2012</option>
<option value="2013" selected>2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>

Display php data json_encoded with ajax

I convert my php code to json with json_encoded function.
After I write ajax code to display my data in ajax but when running don't display my data.
My json code:
[
{"Name":"fasher","Description":"2500 kg","Namyandegi":"20,500,000","Bazar":"22,410,000"}
,
{"Name":"shob","Description":"1000 kg","Namyandegi":"10,400,000","Bazar":"12,220,000"}
]
and ajax file:
<script type='text/javascript'>
$(document).ready(function(){
$.getJSON('saipa.php', function(data) {
$.each(data, function(key, val) {
$('ul').append('<li id="shoker">' + val.Name + ' ' + val.Description + ' ' + val.Namyandegi + ' ' + val.Bazar + '</li>');
});
});
});
</script>
<body>
<ul><li id="shoker"></li></ul>
</body>
Use the index overload $.each()
$.each(data, function(index) {
$('ul').append('<li id="shoker">' + data[index].Name + ' ' +
data[index].Description + ' ' +
data[index].Namyandegi + ' ' +
data[index].Bazar + '</li>'
);
});

jquery multiselect after change removing selected values

have big problem.
have jquery multiselect plugin from here
$.ajax({
url: 'my url',
type: 'post',
data: {'data': data1, 'data2': 'data2'},
dataType: 'json',
success: function(data){
if(data.length >= 1){
$('#selector').find('option').remove();
$.each(data, function(key, value) {
if ($("#selector option[value='" + value.email + "']").length == 0){
$("#selector").append('<option value="'+ value.email +'" data-id="'+value.id+'" data-name="' + value.name + '" data-surname="' + value.surname + '">'+ value.name + ' ' + value.surname + ' ' + ' (' + value.email + ') sent (' + value.sent + ')' +'</option>').multiselect("destroy").multiselect( { sortable : false } );
}
});
}else{
$('#selector').find('option').remove();
$('#selector').append('').multiselect("destroy").multiselect( { sortable : false } );
}
}
});
and after change (call this function, whitch selecting cantacts from other list) my selected values disapears

Categories