I am using an Ajax function for show the auto suggestions for search field. But, I've to search field on the same page. So, when I am trying to use this then one is work and another one isn't. It's because Both of those are using couple of same ID and Class. I style them with CSS for different width and height.
Can anyone please help me know how may I add one more ID and Class on the below code for each field?
$(document).ready(function() {
$("#email").keyup(function() {
var searchid = $(this).val();
var dataString = 'type=' + searchid;
if (searchid != ' ') {
$.ajax({
type: "POST",
url: "type_process.php",
data: dataString,
cache: false,
success: function(html) {
$("#result").html(html).show();
}
});
}
return false;
});
$(document).click(function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("get_types")) {
jQuery("#result").fadeOut();
}
});
$('#email').click(function(){
jQuery("#result").fadeIn();
});
});
When you select 2 element (or more) you can refer to a single one by specifing the element index.
$('.item').eq(0); // return the first element in a collection with class '.item'
or
$('.item').eq(1); // return second element in a collection with class '.item'
BTW, you should avoid having elements with the same ID in the DOM
If you want to select lots of differents elements, use a Class tag instead.
Mark all your elements with the same class, like: class="mySelectorClass" and then, use a jquery selector:
$(".mySelectorClass").each(function(index,value){
// ... your code for each element goes here!
});
https://api.jquery.com/jQuery.each/
Related
I have a web page where I have defined one DIV element with id "selectedProduct", now while I click on particular link it will call ajax request and it will fill DIV element with response data. But i have requirement that when onBlur event occurs on "selectedProduct" DIV, it should remove all the child element of it's. My code is as follow:
<script type="text/javascript">
function getPage(event,id)
{
event.preventDefault();
var page = document.getElementById(id).id + ".html";
var dataString = page
$.ajax(
{
type: "POST",
url: page,
data: dataString,
cache: false,
success: function(result)
{
var result=result;
$("#selectedProduct").html(result);
// location.replace("index1.html");
}
});
}
function focOFF(id)
{
// I don't have any idea what code should i write here which can remove all child of DIV element....
}
</script>
<body>
Solar Power Plant
<div id="selectedProduct" onBlur="focOFF(this.id)">
</div>
</body>
Use the below solution of getting all child elements and the removing them,
function focOFF(id)
{
$( "#"+id ).children().remove();
}
Use empty() function inside your blur function . It removes all child nodes of selected element
function focOFF(id)
{
$('#'+id).empty();
}
document.getElementById(id).innerHTML = '';
I have a jQuery script where somebody can click a button to add this item to their favorites. Now, the problem is I want to add this button several times on the page - the exact same button with the same code. When I click one of the buttons, the first one gets updated but the others don't. Is there any way to update ALL the matching IDs? In other words, run this action for all matching cases on the page, except for the first one?
The code is like this:
$(document).on('click','#add-to-list',function (e) {
e.preventDefault();
var id = $(this).data("id");
$.ajax({
url: "http://xxx.xxx.xxx.xxx/add_to_list?id=" + id,
type: "GET",
dataType: 'json',
success: function(json) {
if(json.valid == 1) {
$("#list-button").hide();
$("#list-response").html('Added to Favorites');
$("#list-response").show();
}
},
timeout: 10000
});
});
And then on the page obviously I have multiple instances of
<div id="list-button">
(button here)
</div>
<div id="list-response">
(initially hidden)
</div>
in jquery id will work only on single button and class will work on every button so for this action you have to use class instead of id please follow this link --
What's the difference between class and id in jQuery?
ID of an element must be unique, the ID selector will fetch only the first element with the given ID.
In your case you can use classes instead of ID like then use traversal methods to target the proper element to show/hide
$(document).on('click', '.add-to-list', function (e) {
e.preventDefault();
var $this = $(this);
var id = $this.data("id");
$.ajax({
url: "http://xxx.xxx.xxx.xxx/add_to_list?id=" + id,
type: "GET",
dataType: 'json',
success: function (json) {
if (json.valid == 1) {
$this.closest('.list-button').hide().next().html('Added to Favorites').show();
}
},
timeout: 10000
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="list-button">(button here)</div>
<div class="list-response">(initially hidden)</div>
I have multiple anchor tag generated by php from database like this
Now I got JQuery script
$(document).ready(function(){
$("#reply_doc").click(function () {
var a = $(this).data("doc_value");
if (a != "") {
$.ajax({
type: "POST",
url: "ajax_check/",
data: "doc_reply=" + a,
success: function (b) {
alert(a+' ok. '+b)
}
});
}
});
});
This is only applying for the first anchor tag.
How can I do this for each anchor tag when that particular is clicked only that anchor will be affected and that particular value will be send with ajax.
Any help will be appreciated. thanks in advance.
The id attribute is an identifier. As the name might suggest, that means it has to be unique so that it can identify a single element. In order to recognise multiple elements, you'll need to use a class instead:
$(".reply_doc").click(...);
Change the id to a class, and change your selector to ".reply_doc".
Your html is currently invalid because the id attribute should be unique. Although the browser doesn't jump up and down complaining when you break this rule, when you try to select an element by id it only finds the first (or, in some browsers, the last).
If, hypothetically, you have no control over the html structure you could instead select all anchor elements with the data-doc_value attribute:
$("a[data-doc_value]")...
Elements cannot have same id so bind event on same class .
a href="#" class="option" id="reply_doc" data-doc_value="1"></a>
JQuery script
$(document).ready(function(){
$(".option").click(function () {
var a = $(this).data("doc_value");
if (a != "") {
$.ajax({
type: "POST",
url: "ajax_check/",
data: "doc_reply=" + a,
success: function (b) {
alert(a+' ok. '+b)
}
});
}
});
});
Edited again DEMO
111<br>
222<br>
333<br>
$(document).ready(function(){
$(".reply_doc").click(function () {
var a = $("a.reply_doc").attr("data-doc_value"); //<-- Add this
if (a != "") {
$.ajax({
type: "POST",
url: "ajax_check/",
data: "doc_reply=" + a,
success: function (b) {
alert(a+' ok. '+b)
}
});
}
});
});
This way each time "a" will have unique value contained in data-doc_value on click
I have a blockUI plugin for jquery through which i call another php file in a overlaid box. I want to activate the function through more than one button of same id(here it is pageDemo1). But when i do so, only one button works while all other don't.Can anyone explain why is it so? and what should i do to make it work?
$(document).ready(function() {
$('#pageDemo1').click(function() {
$.blockUI({ message: $('#domMessage') });
test();
});
$('#submit').click(function() {
var action = $("#form1").attr('action');
var form_data = {
message: $("#message").val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
$("#form1").slideUp('slow', function() {
$("#message").html("<p class='success'>message</p>");
});
else
$("#message").html("<p class='error'>message</p>");
}
});
return false;
});
});
On first look dont use html elements with the same id. you can attach your events on elements with the same class, name etc.
Are you saying that you have two elements (buttons) with the same ID? If so, this is not valid HTML (See W3C standards). You could try using a class instead. Also remember you can use multiple classes to still keep the buttons unique in some way. E.g.
<input type="button" class="pageDemo pageDemo1" value="My Click does this"/>
<input type="button" class="pageDemo pageDemo2" value="My Click also does this/>
Then to access these in your JS:
$('.pageDemo').click(function() {
// Put code here which should happen when either of your elements with class 'pageDemo' get clicked
});
$('.pageDemo.pageDemo1').click(function() {
// Put code here which should only happen when elements with 'pageDemo1' class get clicked
});
i am using jquery ajax to load a section of page with another page content/html. \
$(function() {
app.xhr = $.ajax({
url: url,
dataType: "html",
cache: false,
success : function(html)
{
app.html = $(html);
setTimeout(function(){
app.insertPageData();
app.xhr = null;
},100)
},
error : function()
{
alert("Not Found")
}
})
insertPageData : function()
{
$('div.data').html(app.html.find(".content").html())
}
});
So here is the problem specific to IE. app.html contains the HTML of the page and i need to extract one specific div html from the page which is not working with IE.
is there any other way to extract HTML from HTML??
Thanks / Gursimron
Do you have an id or class on the div you want? Also, by extract do you mean that's all you want, or do you mean that you want to remove it from the HTML?
If you want to remove the the div, and assuming you have an id, you can do this:
app.html.remove('#id-of-div');
If all you want is just the div and nothing else, then you would do this:
app.html = app.html.find('#id-of-div');