Develop Reference

Make click-event on "responsive" dropdown item in javascript

I have a maven-project and get the users via a spark get-call from a database:
function allUsers(){
$.ajax({
dataType: 'json', //to parse string into JSON object
type: 'GET',
url: 'webAthen/api/users',
success: function (data){
$('.userDropdown').html("");
for(i=0; i < data.length; i++){
$('.userDropdown').append("<option>" + data[i].userName + "</option>");
}
}
});
}
Know if I click on such a user in the Dropbox, I want the information of this user right in labels like:
$('.userDropdown').val().click(function(){
alert($('.userDropdown').val() + " was clicked :-)");
});
I inserted the alert to get an alert with the username that was clicked, but it doesn't work at all. If you need further code, just let me know! I already googled and found some examples with firm values. But my dropdown-entries are kind of dynamically from the database.

After looking at your code, I feel like, the option tags are created dynamically. So the newly created options/elements are not bound by Click listener.
$(document).on("click", ".userDropdown > option", function(){
// Your code...
});
The above code will Listen to the onClick event of document first, and later it's narrowed down to the targeted element.

Passing loop data as variable from JavaScript to AJAX via Bootstrap modal

My code below was used to retrieve records from a loop using JavaScript. Everything works fine. Each of the records button has a unique id that when click
should alert users_id in a Bootstrap Modal popup.
The problem is that the looped button that contains users_id is not alerting anything when each button is clicked.
Below is the code for retrieving records in JavaScript along with Bootstrap modal button:
<script>
$(document).ready(function () {
$.post('users.php', function(response){
$.each(JSON.parse(response).items, function(i,v) {
$('.userslist').append('<span>'+v.id+'</span> Profile');
});
});
});
</script>
Below is the code for posting the users_id and then alert it:
<script>
$(document).ready(function(){
$(".modalLink").click(function() {
var id = $(this).attr("id");
alert(id);
var dataString = 'id='+ id;
$.ajax({
type: "POST",
url: "ajax_modal.php",
data: dataString,
cache: false,
success: function(data) {
$("#rmm").html(data);
}
});
});
});
</script>
but if I take the Modal button outside the retrieve records in a javascript loop
it will alert users_id and everything will work fine as in code below
Profile
Can someone help me make each of the JavaScript looped button to post its own unique users_id and then alert it in a Bootstrap modal popup. I have attached a screen shot of the result obtained from the JavaScript loop.
Thanks

If I understand your question properly;
Try changing
$(".modalLink").click(function() {
to
$(document).on('click', '.modalLink', function() {
Without seeing the rest of your code or a working fiddle, I suspect your content is dynamic and JQ cannot bind the click handler, simply because there is no content to bind to. this answer does a good job of explaining the difference between .on and .click.
If you get the expected result, I would drop the document selector and use the closest parent static element.

Javascript function to show div with php content only flashes up

I've written a javascript function to show a PHP within a Div. It seems to work, except that the php to be shown only flashes up for a brief second. Is there any way to get it to stay shown until I select an option to close it.
Many thanks
function showBiog(keysop){
$.ajax({
url: 'test2.php?number=' + keysop,
type: 'POST',
dataType: 'html',
data: $('#SubmitForm').serialize(),
success: function(content)
{
$("#DisplayDiv").html(content);
}
});
event.preventDefault();
$('#submit_btn_id').click();
}

Dropdown jQuery box to close after clicking outside

I'm looking to get that a dropdown box closes after clicking outside of it with jquery. I've tried the below code already but seems something is not working correctly, so when I remove the part from "body: not(ul.nav li.dropdown)", the script executes well but it doesn't close outside obviously, and when I insert the close part, the script doesn't execute properly. What can be wrong in this syntax or in code that is avoiding both closing and execution to work correctly together?
$(document).ready(function(){
jQuery('ul.nav li.dropdown').click(function() {
jQuery(this).find('.dropdown-menu').fadeIn();
$("#actionStatus").html("");
});
$("body:not(ul.nav li.dropdown)").hover(function(){
$("ul.nav li.dropdown").find('.dropdown-menu').fadeOut();
});
$("#btnSendOption").click(function(){
var data = $("#frmUserOption").serialize();
$.ajax({
url: "/users.php",
data: data,
success: function( data ) {
$("#actionStatus").html("");
$("input[type='radio']").attr('checked', false);
$('.dropdown-menu').delay(1000).fadeOut();
},
error: function(data) {
$("#actionStatus").html("<div class='alertMsg alertMsg-danger'>Error, try again later</div>");
}
});
});
});
Thank you in advance

Replace the content of a div several times

I have a select with my servers and I load information on the selected server without reloading the page. I am using ajax and ReplaceWith().
I tried using live() to replace the information several times, but it only works once, why?
<script>
$(function(){
$('select').live('change', function(){
$.ajax({
type: "POST",
url: "server.php",
data: "hostname=" + $(this).val(),
success: function(data){
$("#results").replaceWith(data);
}
})
});
});
</script>

It is because you are replacing the #results container with the data. The next time the $("#results") selector will not match any elements (because the container was replaced by the previous call).
.html() does not replace the container, but updates the content of the container.

I do not really understand why it works with html() and not with ReplaceWith(), but it works!
<script>
$(function(){
$('select').live('change', function(){
$.ajax({
type: "POST",
url: "serveur.php",
data: "hostname=" + $(this).val(),
success: function(data){
$("#results").html(data);
}
})
});
});
</script>
Sorry to answer my own question.

live() method is kind of deprecated and might work not properly. Try on() instead of.