This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have an html page which gets loaded via ajax, the newly loaded html content has the following html. It typically works great when I load the html first and then initialize the javascript.
Change password
My js:
$('.ajax-button').on('click', OnLoadContent);
function OnLoadContent(e) {
e.preventDefault();
var pageurl = $(this).data('url');
$.ajax({
type: "GET",
url: pageurl,
success: function(data) {
alert(data);
$("#content-container").html(data);
window.history.pushState({path:pageurl}, '', pageurl);
},
error: function(response) {
alert("ERROR:" + response.responseText);
}
});
}
However since it's new html content that's being loaded I think the problem is the javascript already exists when the html content is loaded via ajax, so the click functionality doesn't work unless I click again. I'm wondering how I can fix this?
Delegate the click higher up the dom...
$('body').on('click', '.ajax-button', OnLoadContent);
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I have two pages, first page is having html now i am calling first page html on the second page via jquery and the code is given below.
$(".cat_ring").click(function(){
var x =$(this).val();
var alphabet=$('.soganii').val();
$.ajax({
url : '******************',
method : 'POST',
data : {id:x, alpha:alphabet},
success : function(data){
$(".soganiiiii").html(data);
}
});
});
now the html part which i am fetching from previous page to new page having one radio button. by which i want to show & hide a div. which i am trying to do by below code.
$('.custom').click(function () {
alert();
$('#product').show('fast');
});
$('#product1').click(function () {
$('#product').show('fast');
});
i can show the previous page html content to new page but my js is not working when i want to use radio button of fetched content.
Thanks in advance
You need to delegate your events because you have dynamically added elements
$('.soganiiiii').on('click','.custom',function () {
alert();
$('#product').show('fast');
});
$('.soganiiiii').on('click','#product1',function () {
$('#product').show('fast');
});
This question already has answers here:
How to select an element loaded through the jQuery load() function?
(2 answers)
Closed 6 years ago.
I am loading data into
<div id="content_8">
</div>
using the following function:
...
var number = 8; //i.e.
$.ajax
({
url: "load.inc.php",
dataTypeString:"html",
data: "var="+number,
success: function(html)
{
$('#content_'+number).html(html);
}
});
This works well, but: the html contains different IDs and the loaded html looks like for example
<tr id="someid_8_1234">...</tr>
<tr id="someid_8_7294">...</tr>
<tr id="someid_8_9999">...</tr>
Since they are not yet registered in the DOM, I can't use this code
$('[id^=someid_]').click(function(){
$(this).toggle();
});
I am getting crazy, all hints I found so far point me to delegate() or live() which I don't understand and they mostly point to single examples but not to hundreds of IDs, is there a way to attach the whole HTML-Block in the DOM?
Thanks in advance!
use this for dynamcically created elements:
$(document).on('click','[id^=someid_]',function()
{
///your code
});
Maybe ...
success: function(html) {
var newContent = $.parseHTML(html)
$('#content_'+number).html(newContent);
$('[id^=someid_]', newContent).click(function(){
$(this).toggle();
});
}
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
Having a bit of trouble figuring out what is going wrong here and wondered if anyone might be able to help me out. I'm using JQuery throughout my site but for some reason on this particular page it does not seem to be working.
This code here:
$("#keyword").autocomplete({
source:'../../pages/ajax/autocomplete/autocomplete_tags.php',
dataType: 'json',
minLength:1
});
//When you hit the search button load the new tags
$("#srchBtn").click(function(e){
e.preventDefault();
var tag_name = $('#keyword').val();
$(".dashboardtable").load('../../pages/ajax/autocomplete/search_tags.php', {tag_name: tag_name },function(response, status, xhr){
$(".dashboardtable").html(response);
$("#keyword").val("");
$("#keyword").attr("placeholder", "Search Tags...");
});
});
What should happen is when the user begins typing it begins pulling suggestions out of the database and when they click the search button it loads the results into a div using AJAX. I noticed it wasn't working and I decided I'd try a simple test:
$('#srchBtn').click(function(){
console.log('hit');
})
But nothing appeared in the console. I then tried
console.log($('#srchBtn')); and It does seem to be getting a reference to my dom object, it just isn't firing the click event for some reason.
I've got the following scripts at the top of the page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="../scripts/auto-complete/tag_list_search.js"></script>
and I am getting no errors in my console. So what could possibly be the problem? Any help is much appreciated. Also this is my HTML:
<input type="text" id="keyword" placeholder="Search Tags..." size="33"/>
<input type="button" class="" id="srchBtn" value="Search"/>
Please wrap the code in jquery ready function...(in case this is not done)
$(function(){ // jquery ready function
$("#keyword").autocomplete({
source:'../../pages/ajax/autocomplete/autocomplete_tags.php',
dataType: 'json',
minLength:1
});
//When you hit the search button load the new tags
$("#srchBtn").click(function(e){
e.preventDefault();
var tag_name = $('#keyword').val();
$(".dashboardtable").load('../../pages/ajax/autocomplete/search_tags.php', {tag_name: tag_name },function(response, status, xhr){
$(".dashboardtable").html(response);
$("#keyword").val("");
$("#keyword").attr("placeholder", "Search Tags...");
});
});
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
My JQUERY can't see echo PHP.
Here is the php statement that I echo in an external PHP file -
`echo ("<a href='#' id='bb'>hello</a>");
Here is the JQUERY also in an external js file -
$('a').click(function() {
var linkId;
linkId = $(this).attr('id');
alert(linkId);`
And finally I have an HTML file with a <div> that my php is being sent to via ajax.
Now my php echo statement above shows in the HTML file, but when I click it the JQUERY doesn't see it. I tested it by adding an anchor tag in the html file and it works fine. Any help would be appreciated. Thanksenter code here
Try
$('#parentID').on('click','a' , function(){
var linkId;
linkId = $(this).attr('id');
alert(linkId);`
});
Your javascript is not complete. You are not closing the function call. A jQuery click function call needs to be like `$('#element').click(function() { ... });
Also, you are not preventing the default link behavior from happening, so your page will refresh. I don't think you want the page to refresh, right? You need to capture the click event and stop it using preventDefault();
So the script should be:
$('a').click(function(e) {
var linkId;
linkId = $(this).attr('id');
alert(linkId);
e.preventDefault();
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
When I use jQuery selectors for add dynamically generated html in hidden div, they don't work. How to add something in hidden div with jquery?
I need to make div hidden while adding content after ajax query, because I should generate many html blocks and add them on page, I want to add all blocks in hidden div and then show all content (make div visible).
You can use jQuery's hide() and show() function to accomplish this, which is a little cleaner than the .css() ZeJur used. Have a look at my Plunker example
Example:
<div class="hiddenContent">I am hidden div</div>
<button class="addDynamicContent">Add dynamic content to div - hide while doing</button>
Script:
<script>
$('.addDynamicContent').click(function() {
$.ajax({
url: "http://api.icndb.com/jokes/random",
beforeSend: function() {
$('.hiddenContent').hide();
console.log('I hide before request');
},
success: function(response) {
$('.hiddenContent').html(response.value.joke);
$('.hiddenContent').show();
console.log('I show after I got the content');
}
});
});
</script>
Check out Plunker
To hide Your element use jQuery .css() method
$('#panel').css('visibility', 'hidden');
and to show it back:
$('#panel').css('visibility', 'visible');
If You need to hide your element before loading a new items You can use beforeSend function:
beforeSend: function(){
$('#panel').css('visibility', 'hidden');
}
and after all Your data is loaded and parsed use success function to show it again:
success: function(data){
$('#panel').append('<div>' + parsedData + '</div>').css('visibility', 'visible');
}
and all together:
$.ajax({
method: "POST",
url: "sample.php",
dataType: "json",
beforeSend: function(){
$('#panel').css('visibility', 'hidden');
},
success: function(data){
$('#panel').append('<div>' + parsedData + '</div>').css('visibility', 'visible');
},
});