I am trying to change the source image of an image HTML element <img src="/some/dynamic/path"></img>.
How I take the this.id is very complex and is outside the context of this question, but suffice to know that it is obtained by PHP and at the time of click, on a list item (not showed here), the identifier is already set and ready for use. The console.log ensures that.
The problem is that when I click on the element, the modal appears to me, but I do not see the image. By debugging on the browser I noticed that the src field is always empty.
I suppose the cause of the problem is to be found in the Javascript code I posted. In particular, the execution of the two instructions is somewhat asynchronous.
What do you think about it? Do you need further details?
The modal code:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<img id="modalImage" src="">
</div>
</div>
</div>
</div>
And the JS code:
$(".listShowCard").click(function() {
console.log("/images/cards/"+this.id+".png");
$("#modalImage").src="/images/cards/"+this.id+".png";
$("#myModal").modal('show');
});
use:
document.getElementById('modalImage').src=`/images/cards/${this.id}.png`;
When you're using elements with IDs, try to avoid jQuery, since the call is so much slower than pure JS call.
$("#modalImage").attr('src', "/images/cards/" + this.id + ".png")
Related
I have the following HTML. Its a form inside of a modal window:
<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="requestModalLabel">
<div class="modal-dialog wide-modal" role="document">
<form novalidate>
<div class="modal-content">
....
</div>
</form>
</div>
</div>
Whenever the form is opened, I want to render a fresh version of the form, free of any old inputs or error messages. The following handler gets the data for hidden fields plus the form's HTML I can obtain the data for the form along with the raw HTML for the form via an Ajax request:
$(document).on('click', '#por-detail-tbl .dropdown-menu', e => {
// This route will get fresh form HTML also.
$.get(`/projects/${$(e.target).attr('project-id')}`, res => {
$('#requestModal').replaceWith(res.html)
...more code here to populate hidden fields...
})
})
I would expect the $('#requestModal') element to be replaced with whatever res.html is (in this case, a new version of the form). Instead, res.html is getting inserted as the last element in the document body. The old $('#requestModal') is still there.
Here is a snippet from res.html:
<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="requestModalLabel">
<div class="modal-dialog wide-modal" role="document">
<form novalidate>
<div class="modal-content">
...
</div>
</form>
<div>
</div>
I'm able to use this technique successfully in other Ajax callbacks. Any ideas why this one is behaving strangely?
You actually want jQuery's .html() function here.
In your original code, the replaceWith() function replaces $('#requestModal'). But the element you replaced is the element that's been manipulated by Bootstrap to perform the modal behavior you expect.
So I think you really want to set the content of the div.modal-dialog element to just the form and its children. If you can pare down res.html to just the form and children, you can change $('#requestModal').replaceWith(res.html) to $('#requestModal').find('div.modal-dialog').html(res.html).
I am trying to retrieve text from a .txt file using jQuery (I am also using Bootstrap). I am very new to web design but I am familiar somewhat with coding. I have the following button in my HTML:
<button type="button" class="btn btn-primary-outline-btn text-btn" data-toggle="modal" data-src="test.txt" data-target="#textModal"><img class="video_icon" src="assets/icons/parchment_icon.png" alt="text"</button>
As you can see, the target of the button is a modal which loads up text like so:
<!-- Text Modal -->
<div class="modal fade" id="textModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p id="outputText">File not found.</p>
</div>
</div>
</div>
</div>
My JS file looks like this (changed following one of the answers):
$(".text-btn").on("click", textFunction);
function textFunction() {
var el = document.getElementById('test');
console.log(el.getAttribute('data-src'));
jQuery.get(el.getAttribute('data-src'), function(data) {
$( '#outputText' ).html(data.replace('n',''));
});
}
Whilst the filepath outputs to the console correctly, I am unsure how to use jQuery to utilise this so that it will input the file contents into the modal-body. Additionally, my issue is now how to make the variable assigned through getElementById correctly correspond to the button pressed. Moreover, I am not sure how to use getAttribute or attr in jQuery to obtain the data source in javascript.
This is an issue as I will have multiple buttons with multiple file sources so I would like the jQuery to retrieve from each button's respective data source. Is there a way in which I can do this...?
You have to set the full file url in data-src then use:
$('.text-btn').on('click', function() {
$.get($(this).data('src'), function(data) {
$('#outputText').html(data);
});
});
For the case of multiple buttons, you can use an onclick event on each, which will fire textFunction. Then, inside the text function, you can retrieve the correct button's data-src using jQuery's data() function:
//assuming all your relevant buttons have class `text-btn`
//call textFunction on button click
$(".text-btn").on("click", textFunction);
function textFunction() {
//inside event handler, `this` points to the button that triggered the event
jQuery.get($(this).data('src'), function(data) {
alert(data);
$( '#outputText' ).html(data.replace('n',''));
});
}
I am using Materialize framework in my rails app. I have this element that launch a modal on click:
<div data-target="modal1" class="modal-trigger" data-code="<%=code%>">lalala</div>
I want to catch the data-code in js and save it to variable. I've done something like this following the official documentation:
$('.modal-trigger').leanModal({
ready: function() {
var a = $(this).attr("data-code");
},
}
The variable "a" is undefined. How I can pass data-attr in Materialize modal? What is the best way? Thanks.
Update: I'd like to then display the value of data-code in the modal. This is the code:
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<p>The Code</p>
</div>
</div>
Update1: I eventually solved it with clickOn method and append the data attr to a particular div but wondering if it is possible to pass it also through modal.
I have the same modal dialog for three different buttons.
However, depending upon which button is clicked, I need to dynamically set the title of the modal dialog.
I thought this would be simple setting the title in the appropriate javascript function using jQuery. However, when debugging, I can see the title is set accordingly in the code, but after the modal is displayed, the modal title is blank.
How can I properly display the modal title accordingly?
Here is the pertinent part of the HTML:
<div class="modal fade" id="btnJournalVoucherEditGrid" tabindex="-1" role="dialog" aria-labelledby="btnJournalVoucherEditGrid-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="btnJournalVoucherEditGrid-label"></h4>
Here is the JS
function onEditJournalVoucher(gdId, rwID)
{
$('#btnJournalVoucherEditGrid-label').val("Edit Journal Voucher")
Well, you're trying to use .val() on an H4 tag. Should it not be:
$('#btnJournalVoucherEditGrid-label').text("Edit Journal Voucher");
or
$('#btnJournalVoucherEditGrid-label').html("Edit Journal Voucher");
.val() is the right mindset, but what it does in JQuery is why it won't work in this situation. Take an element that has a value="something" attribute, for example:
<input id="example" type="text" name="something" value="something"/>
Targeting this id using $("#example") and calling .val() can access or change the value="something" attribute. Now take a look at a <label> element:
<label id="example"> This is some text </label>
Notice the lack of a value="something" attribute? In this case, since "This is some text" is simply plain-text, using:
$("#example").text("Updated Text");
is the correct way to go about this. Hope that helps clear things up!
.val() is used for form elements (like inputs, checkboxes, etc.)
For divs/other elements (e.g. h4 in your situation) use either .text() or .html() depending on the situation you want to do.
In this case since this is just text change your line to:
$('#btnJournalVoucherEditGrid-label').text("Edit Journal Voucher");
It should be
function onEditJournalVoucher(gdId, rwID)
{
$('#btnJournalVoucherEditGrid-label').html("Edit Journal Voucher")
Try text() function instead of val():
$('#btnJournalVoucherEditGrid-label').text("Edit Journal Voucher")
I would set the title in the button:
<button id="edit-journal-voucher" data-title="Edit Journal Voucher" data-toggle="modal" data-target="#btnJournalVoucherEditGrid">Edit this Journal</button>
Then in the JS do something like:
$("#edit-journal-voucher").on("click", funtion(e){
e.preventDefault();
var title = $(this).data('title');
$("h4#btnJournalVoucherEditGrid-label").html(title);
});
I'm not very experience with JavaScript and jQuery and I'm really needing help to think something through. I'm trying to display information to the user in a similar way to the Metro UI interface in Windows 8.
In essence I've got a page fulled with tiles of different sizes (just like Metro/Modern UI) and a tiny bit of information on each tile such as the date of a post. I'd like to be able to click the tile and for a text popup to appear with the information relevant to the tile that was clicked on.
I figure this would be an easy task if the content was static, but since I'm building the tiles based on a Facebook RSS feed, I'm having quite a bit of difficulty even figuring out how I would store and display the main text of the tile. To get my point across I've done an extremely simple sample of a box, and what I'd like.
<html>
<body>
<div class="large-box">
<p>Date</p>
<p>Basic synopsis</p>
<div class="body-text">
<p>This is the body text that I want hidden to start with, but visible in the pop-up.</p>
</div>
</div>
</body>
</html>
Now, I don't have a problem with creating tiles and populating them with the date and any other information, but I have no clue how to make the text inside the body-text div not visible inside the tile, but only when clicked and seen in a pop-up.
Honestly I don't even know if I should be storing the text inside the tile like that at all, but it's the only way I can think of organizing my data. If you may remember, I'll have up to 25 of these tiles going down the screen and I need to be able to access each one. As well, the reason I'm thinking like this in the first place is because I previously used jQuery UI Accordion which had the text it displayed hidden, then shown when clicked.
At this point, even if you can't help me with any working code samples or snippets and help or push in the right direction would be really appreciated.
If you're receiving dynamic content from some known location then you're not going to be able to write this statically.
This will require some fancy footwork on your end with JavaScript, since there is some much not known with what you've got going on I can offer you some start up code.
I will highly recommend that you create these tiles dynamically.
//load the string content from where ever you're querying it from
var tile = getTileContent();
var lb = document.body.querySelector('large-box'),
bt = document.createElement('div'),
showContent = function () {
//toggel
if (bt.isOpen) {
this.innerHTML = '';
bt.isOpen = false;
}else {
this.innerHTML = '<p>' + this.content + '</p>';
bt.isOpen = true;
};
};
bt.className = 'body-text';
bt.onclick = showContent;
bt.content = tile;
bt.isOpen = false;
lb.appendChild(bt);
What you need is a javascript framework with modal popup component, for example the bootstrap modal dialogs:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Title of the post in a tile
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Post title</h4>
</div>
<div class="modal-body">
...Post content...
</div>
</div>
</div>
</div>