In my project, I have set up a lightbox containing a form where user inputs are used to populate an HTML file loaded and appended to the main HTML page with the load() function. While I can successfully load the data onto the page, I am facing challenges in displaying this data in another lightbox by triggering a click event on a button followed by using prev() to identify and show the content. Unfortunately, this method is not working as expected, leading me to consider incorporating a success event listener for $.ajax.
Below is an example of how the code would look like:
Lightbox:
<div id="lightbox">
<form>
<input type="text" id="textbox1">
<input type="submit" id="submit1" value="submit">
</form>
</div>
Load function:
$('#submit1').click(function(e) {
e.preventDefault();
$('div#result').append($('<div').load('file.html', function() {
var input = $('#textbox1').val();
$(this).find('td.data').text(input);
});
});
The destination HTML element for the loaded data:
<div id="result"></div>File.html
<table>
<tr>
<td>Cell 1</td><td class="data"></td><td><button value="View"></button>
</tr></table>
I aim to access and display the text within td.data upon clicking the "View" button in the third td cell above, so that I can showcase it in another lightbox. It appears that the text might not be readily available for retrieval due to its initial absence. Should I utilize ajax (success handler) in this scenario? If yes, how do I manage the appending and loading process simultaneously on the page?
Appreciate any guidance you can provide!
Regards, Derek