I ran into a bit of trouble while trying to load an external HTML page into a div using jQuery-ajax.
I had this div: <div id="content"></div>
and wanted to fill it with $("#content").load("include/add.html");
It loads the HTML file perfectly, but inside that add.html is a button that should load add2.html(also using .load), but it seems that neither the button nor the datepicker in that file work.
I'm guessing the .load function is responsible for that?
This is the content of add2.html:
<p>Nr: <input type="text"></input></p>
<p>Name: <input type="text"></input></p>
<p>Date: <input type="text" id="datepicker"></input></p>
Next
Please help, I'm desperate :D
As the file is included to the page after the events are bound, the events do not apply to the elements in 'add.html'. You need to bind the events again or use .on() method. In the case of the datepicker, it's easier to go with the first approach:
$("#content").load("include/add.html", function() {
// Apply datepicker to elements in 'add.html'
$('#content .date').datepicker();
});
For the button in add.html, you can use delegation:
$(document).on('click', '#content .button_in_add', function() {
alert("I work even when included dynamically!");
$('#content').load('include/add2.html');
});
Note that .on() bins does not go inside the .load() callback as the datepicker part did. If you have any elements in 'add2.html', you need to repeat the same steps for that also.
Related
I have a html file and js file I want to execute JS when a button is clicked in html. for this I can use onclick event in html but the condition is that I should not modify the HTML file.
I tried to add eventlistener in my JS but that didn't worked.
<p align=center>
<button class="stdbutton" id=button2 name=button2>
Click Me
</button>
</p>
$("button2").click(function() {
alert("button2 clicked");
});
please see the fiddle link for further reference: http://jsfiddle.net/gqpr0g9w/
thanks in advance
Try the FIDDLE,
Basically the first issue with your fiddle was you are using js library other than jquery. Jquery code won't execute without referencing the jquery library.
Secondly you are using an invalid selector,
$("button2")
you can replace this with an id based selector (# selector) as per your markup
$("#button2")
And finally try wrapping the code under jquery closure under document ready event that will ensure that the event will attach when the related object is loaded on the browser.
Finally will becomes
$(document).ready(function() {
$("#button2").click(function() {
alert("button2 clicked");
});
});
Hope it works for you..
Include jQuery in your jsfiddle. Use one of the below to attach an event listener for click using jQuery
$("#button2").on("click", function() {
alert("button 2 clicked");
});
or
$("#button2").click(function() {
alert("button2 clicked");
});
case jQuery is included in the html:
js file -
$("#button2").click(function() {
alert("button2 clicked");
});
// notice the # symbol before the word "button2" representing that we are looking for an ID
case jQuery is NOT included in the html:
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/myJavaScript.js"></script>
jQuery script must first be included
and then you can execute the same code as shown above.
Well, you are trying to use jQuery, but there is no jQuery included in your html-File. In fact there is no script included in your html at all like
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/myJavaScript.js"></script>
I don't think you will be able to do that without modifying the html-file.
I am trying to make an element disappear when clicked, the elements are dynamic.
$("#toast-container").on("click", "div.toast", function() {
$(this).fadeOut("fast", function() {
$(this).remove();
});
});
I have tried the code with just $(this).remove() and it works but using fadeOut it doesn't. I have no idea why and it looks absolutely fine to me
I have a easy solution.
HTML
<div id="toast-container">
<div class="toast">
Click Me
</div>
</div>
jQuery
$("div.toast").click(function(){
$(this).parent("#toast-container").fadeOut('slow');
// run your another event.
})
Check my live demo on jsfiddle
well when adding elements dynamically to DOM tree i think your events may register at creation of the page but when you add an element dynamically you should use another jquery function which is called delegate
see the documentation
What is this?
"div.toast"
If your div class is "toast", it should just be ".toast" (it will work with the div.toad, but syntactically, this is not really correct.
That said, your function works fine when I drop it in a fiddle. Are you certain that you are not getting any console errors perhaps related to another feature/function? Check your console.
I'm trying to use AJAX loading a set of sucessive pages in a main page, as I show you in the next picture:
I learned (thanks to this community!) to call other pages' content, by assigning the load() function to the onclick event of a button, like this:
$(document).ready(function() {
$('#btn').click(function() {
$('#result').load('./poi-data-no-heading.html');
});
});
But what if I have one button with id="btn" on every page? The functionality of any button with that id will be the same always, because (I think) the document.ready is not triggered when I use the load() method, so it's never replaced with new functionality.
E.g. initial functionality should be navigate from page 1 to page 2, and when page 2 is loaded, the functionality should be to navigate from page 2 to page 3.
As Js developer, I would do the following:
<!-- In the HTML file -->
<button id="btn" onclick="loadContent()">Load</button>
<div id="result"></div>
/* In the JS file */
function loadContent(){
/*the code to retrieve content*/
$('#result').load('http://fiddle.jshell.net/webdevem/JfcJp/show/');
}
This way I could assign the functionality to every button, no matter what's the ID or if the document.ready is triggered. But mixing Js with JQuery is not an option... So, how do you think I should manage to do something similar with JQuery?
Thanks in advance.
P/d: Here is a useful fiddle I used to try ideas: http://jsfiddle.net/gal007/vkcug7t7/1/
You could use the on() event from jQuery, which can listen for events on elements dynamically rendered (you can't do that with the click() method). So in this case you have to listen to the event on a parent element, one that doesn't change with the load method. On that button, use an HTML5 data-* attribute to define the id that you wish to load.
HTML:
<btn id="result" data-load-id="1">Load</btn>
Javascript:
$('#container').on('click', '#result', function() {
var id_to_load = $(this).data('load-id');
load('/url?' + id_to_load);
});
I've updated your fiddle : jsfiddle
<input type="text" />
<input type="file" />
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
I can get browse option (open dialog box) when I click the test box. But I cannot get browse option when I trigger text box's click using jquery trigger method.
$('input[type=file]').trigger('click');
How do i solve this?
What helped for me is to set the event-listener inside:
$(document).ready(function(){
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
}};
That used to do the trick for me. You might try it as well.
You can wrap your code inside DOM ready handler $(function() {...}); to make sure your DOM elements are loaded properly before executing your jQuery code.
$(function(
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
)};
My belief is your selector $('input[type=text]') is not selecting , give it some id and use it like
$("#text").click(function(){
$("#file").trigger("click");
});
I have a bit of a problem with a jQuery dialog and the way scripts are handled.
In the dialog html, I have
<input id="test">
If I do
<script type="text/javascript>
$('#test').val("haha")
</script>
after the input, it shows up. If I put it before, it doesn't work.
Now the problem is I'm trying to change the value of $('#test') using a click trigger, and I can't!
$('.testbutton').click(function() {
alert();
$('#test').val("haha");
});
The alert works, and the initial val replacement works, which means there aren't any duplicate or missing input areas.
The total script as it is now, not working:
<input type="button" class="testbutton" />
<input type="text" size="10" id="test" name="test" value="">
$('#test').val("currentvalue"); // This works
$('.testbutton').click(function() {
alert();
$('#test').val("haha");
});
Update
The dialog shows the correct value in #test once the dialog is closed and then reopened. Could this be something I'm missing?
Put your jQuery code into $(document).ready(function () {...your code...}). This will make it executed after browser creates DOM tree for your page. Otherwise javascript is not able to search/manipulate DOM elements correctly. It will look as following:
$(document).ready(function () {
$('.testbutton').click(function() {
$('#test').val("haha");
});
});
Update:
If your HTML code is loaded dynamically, then use live to bind event handler:
$(document).ready(function () {
$('.testbutton').live("click", function() {
$('#test').val("haha");
});
});
I guess you should wrap your code inside of a $(function() { //code here }); to make sure your code is run only when your DOM is ready.
The problem ended up being the # in test. For some reason the replacement works with a class identifier instead of a id identifier. I suppose it's because the # will replace only one instance, and for some reason that I have yet to discover, there is more than one instance of the dialog (or a hidden one).
Thanks for all your suggestions!