Similar to: jquery modal dialog onclick?
However I have a different requirement and cannot apply the solutions provided in that post.
At the moment I am using JQuery within php to parse through an xml file and produce content on a HTML page:
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "uploads/data.xml",
dataType: "xml",
error: function() {
$('#message').text('Please upload the XML file.');
},
success: xmlParser
});
});
function xmlParser(xml){
$('.tmpli').hide();
$(xml).find("vendor-one").each(function(){
$("#vendor-one").append('<li class="sweet">' + $(this).find("name").text() + '</li>');
$(".sweet").fadeIn();
});
}
</script>
I attempted an alert triggered by onClick however it's not able to contain images:
$(xml).find("vendor-one").each(function(){
$("#vendor-one").append('<li class="sweet" onClick="alert(\''+$(this).find("name").text()+'\');">' + $(this).find("name").text() + '</li>');
$(".sweet").fadeIn();
});
I then attempted this however it opens a dialog box for every li element on the page and I'm unsure how to edit the text and add an image:
$(xml).find("vendor-one").each(function(){
$("#vendor-one").append('<li class="sweet">' + $(this).find("name").text() + '</li>');
$(".sweet").fadeIn();
$('li.sweet').click(function(){ $('li.sweet').dialog(); });
});
I need a facility where I am able to click on each individual li item created and have a message box appear that contains an image and text.
I was intending to use this: Modal Dialog however I'm unsure of how to mend it to my needs.
How do you do this?
Instead of using the manual onclick inline option, you can use the Javascript way to do it.
document.getElementById('ElementID').addEventListener('click', function(event){
console.log(event);
});
Or the JQuery way (which results in the same thing) :
$('#ElementID').click(function(event){
console.log(event);
});
Related
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.
I've checked out this question which was asked about dynamically changing Bootstrap popover content. But the solution doesn't seem to be working out for my case where I want to show fresh data to the user every time they press the button to reveal my popover by changing the data-template directly.
here's my .js code:
$(function () {
myUrl = "" + window.location.protocol + "//" + window.location.host + "/" + "Demo/Notification/LoadingStats";
$.ajax({
url: myUrl,
type: 'GET',
success: function (data) {
$('[data-toggle="popover"]').popover({
template: data
});
}
})
The above code is the working code I have at this moment which displays the data I want correctly, but does not change fluidly or when the user opens it. Only when the page is reloaded does the data update.
The below code is my non-functioning attempt at changing the data-template based on the reference I linked above. It seems to be firing, according to the alerts and debuggers I've thrown inside, but doesn't seem to do anything (it doesn't even display the popover once)
I've even tried using setInterval(myfunction, 2000);
$('[data-toggle="popover"]').on('show.bs.popover', function () {
$.ajax({
url: myUrl,
type: 'GET',
success: function (data) {
$('[data-toggle="popover"]').popover({
template: data
});
}
})
});
//these following three lines are firing correctly, just not doing what I want (refreshing the popover)
var popover = $('[data-toggle="popover"]').data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
})
});
Any ideas on what I might be doing wrong,
or how to go about Dynamically changing the data-template of a popover?
UPDATE
I've been overlooking the data-html="true" attribute which is why I've been thinking I had to use the data-template instead of data-content. You can NOT dynamically update the data-template, but you totally can dynamically update the data-content. I hope this helped someone out there who overlooked the data-html.
I've been overlooking the data-html="true" attribute which is why I've been thinking I had to use the data-template instead of data-content. You can NOT dynamically update the data-template, but you totally can dynamically update the data-content. I hope this helped someone out there who overlooked the data-html.
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.
In code behind I have the following code that gets the [IDphoto] from an SQL database. Now I want to send the IDphoto as a parameter to a jQuery function onClick. How can I do that?
Code behind
sb.AppendFormat("<a onclick='popup()' href='#" + IDphoto + "'>");
jQuery
function popup() {
$(document).ready(function () {
// Here I want to get the value of IDphoto ...
});
}
UPDATE
I've updated the codes based on TrueBlueAussie reply:
photos_sb.AppendFormat("<a href=\"#\" class=\"photo\" data-photo=\"" + IDphoto + "\">");
$(document).ready(function () {
// Here I want to get the value of IDphoto ...
$('a.photo').click(function(e){
// Stop the link click from moving to the page top
e.preventDefault();
var id = $(this).attr("data-photo");
alert(id);
});
});
Nothing is happening. The click doesn't fire the jQuery function!
A few words of advice:
Do not use inline onclick attribute handlers with jQuery. That adds unneeded complexity and separation of the event code from the event registration code.
Use double-quote on HTML attribute values. Most browser accept either, but double-quoting is safer for compatibility.
Also use data- attributes to provide meta-data (rather than bury it in the href). Make the href a plain bookmark link (#).
Use a common class on any photo links to allow simpler jQuery matching (and styling):
$(function(){...}); is a handy shortcut for $(document).ready(function(){...});
e.g
sb.AppendFormat("");
and add a jQuery click handler that looks for clicks on any .photo links:
$(function () {
// Here I want to get the value of IDphoto ...
$('a.photo').click(function(e){
// Stop the link click from moving to the page top
e.preventDefault();
var id = $(this).attr("data-photo");
alert(id);
});
});
Here is a mockup of the above using some sample links:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/wqkxwz2j/
why not just send the IDphoto to same popup function from your Code-Behind:
sb.AppendFormat("<a onclick='popup("+IDphoto+")' href='#" + IDphoto + "'>");
jQuery
function popup(myVarID) {
$(document).ready(function () {
// Here I want to get the value of IDphoto ...
});
}
Not fully understand what you want. But here is example:
Code behind:
sb.AppendFormat("<a onclick='popup("+IDphoto +")' href='#'>");
Javascript
function popup(IDphoto) {
console.log(IDphoto);
}
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