I've got a booking form.booking-wrap with 2 elements in it, div#booking and then div.quantity
<form class="booking-wrap">
<div id="booking"></div>
/* insert div#message IF div.quantity is present inside div.booking-wrap */
<div class="quantity"></div>
</form>
The div.quantity is only present dynamically for some bookings.
What I am trying to achieve is that if the div.quantity is present, then I would like to insert an additional html div#message, but this new div should appear after div#booking and before div.quantity
I am trying the following jQuery:
if($('.booking-wrap:has(div.quantity)')){
$('#booking' ) .after( '<div id="message">Message</div>');
}
But that doesn't seem to work.
I then tried this:
$('.booking-wrap:has(div.quantity)').append($('<div id="message">Message</div>'));
This works and the new div appears, however it is just next to the quantity div.
How can I get it to show after the #booking , but before .quantity?
Any selector returns an object, you should check the length property of the returned object. Like $('.booking-wrap:has(div.quantity)').length
Though, I prefer $('.booking-wrap > div.quantity').length
if($('.booking-wrap > div.quantity').length){
$('#booking').after('<div id="message">Message</div>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="booking-wrap">
<div id="booking">booking</div>
<div class="quantity">quantity</div>
</form>
Try using prepend instead of append, since the selector $('.booking-wrap:has(div.quantity) will return the (div.quantity) element.
Example:
$('.booking-wrap:has(div.quantity)').prepend($('<div id="message">Message</div>'));
You can use "hasClass()" jQuery function to check class is exist or not:
Try This
if($( ".booking-wrap" ).children('div').hasClass( "quantity" )){
jQuery('<div id="message">Message</div>').insertAfter('.booking');
}
Try This jQuery.
if($(".quantity").length ){
$('#booking' ).after( '<div id="message">Message</div>');
}
You need to put the div you are adding within a function.
if($('.booking-wrap:has(div.quantity)')){
$( "#booking" ).after(function() {
return '<div id="message">Message</div>';
});
}
Related
In this case,
I have some div like:
<div class="topImg">
<div class="topImgIcon">
<img src="img/bbbbb.png" class="topImgIcon"><span class="tittle">Chat Window</span>
</div>
</div>
And I want to insert this img link with one icon within this div. Is one X to close the windows but show some html code like form.
See my jQuery code:
var myDivImg = $( "<div class="topImg"></div>" )
$(document).ready(function() {
$("#maisinfo").before(myDivImg, '<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>');
$("#maisinfo").hide();
$("#show").bind("click",function(){
$("#maisinfo").slideToggle("slow");
return false;
});
});
I want to insert the html: <a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a> within .before() inside the div topImg in my HTML. I try create the div inside .before() but, jQuery create other same div.
Someone can help me please and make some explanation for I understand what I did wrong?
If you want to add something inside the DIV, you use .prepend() or .append(), depending on whether you want it at the beginning or end. .before() puts it outside the DIV, right before it.
$("#topDiv").prepend('<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>');
$(document).ready(function() {
$(".topImg").append("<div id='maisinfo'></div>");
$("#maisinfo").before('<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>');
$("#maisinfo").hide();
$("#show").bind("click",function(){
$("#maisinfo").slideToggle("slow");
return false;
});
});
</script>
<div class="topImg">
<div class="topImgIcon">
<img src="img/bbbbb.png" class="topImgIcon"><span class="tittle">Chat Window</span>
</div>
</div>
You could insert the div with ".html('xxx')" or with .append/prepend('xxx').
$(document).ready(function() {
var myDivImg = $( "<div class="topImg"></div>" );
// or var myDivImg=$('.topImg'); // => if the element exists
var myInsertDiv='<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>';
// first method
myDivImg.html( myInsertDiv ); // replace all html in this div with the content from "myInsertDiv"
//second method
myDivImg.append( myInsertDiv );// add the html from "myInsertDiv" as last child in your "myDivImg"
//or
myDivImg.append( myInsertDiv );// add the html from "myInsertDiv" as first child in your "myDivImg"
});
EDIT:
to close your div use something like this
$('body').on('click','.imgclose',function(){
$('.topImg').slideUp('slow');//close your parent-main div
return false;
});
So the first part of the code works fine as it should be, the two grid and list view loads in the views-div when clicked, however, I want a default view shown in the views-div using jquery, I tried loading using clone and prependto but it doesn't work. any suggestion on how to do this?
note: the content I'm loading from the backend has tags and ID's so if I use the html markup to show a default content in the views-div the content repeats. So I'm hoping if use jquery to load content, the repeating will not occur.
here's a demo http://jsfiddle.net/soulsurfer/eta0uyye/
$(document).ready(function() {
$('.iw-grid-select, .iw-list-select').on('click', function() {
var aID = $(this).attr('href');
var elem = $('' + aID).html();
$('#iw-grid-view').fadeOut("slow", 1000);
$('#iw-listview').fadeOut("slow", 1000);
$('#iw-views-div').html(elem);
});
$( "#iw-grid-view" ).contents().find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");
});
The simplest solution could be is to trigger a click event
$(document).ready(function() {
$('.iw-grid-select, .iw-list-select').on('click.view', function() {
var aID = $(this).attr('href');
var elem = $('' + aID).html();
$('#iw-grid-view').fadeOut("slow", 1000);
$('#iw-listview').fadeOut("slow", 1000);
$('#iw-views-div').html(elem);
}).first().trigger('click.view');
});
.iw-listview,
.iw-grid-view {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="iw-filter-col ">
grid view link
list view link
</div>
<div class="row iw-listing-view-row">
<div class="iw-grid-view" id="iw-grid-view">Grid view content</div>
<div id="iw-listview" class="iw-listview">list view content</div>
<div class="iw-views-div" id="iw-views-div">Content loading column</div>
<div id="loading"></div>
</div>
I know that this has been resolved, but just in case anyone was wondering where OP went wrong, I have a theory.
This:
$( "#iw-grid-view" ).contents().find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");
Should be changed to this:
$( "#iw-grid-view" ).find( ".iw-grid-list-col" ).clone().prependTo("#iw-views-div");
If the .iw-grid-list-col element was an immediate child of #iw-grid-view, then find() wouldn't have found it when called on the return value of contents(). This is because find() searches through descendants of elements. The return value of contents(), in this case, would have included the .iw-grid-list-col element and find() would not have found it since it was a member of the array that find() was called on, rather than a descendant of a member of the array.
Removing contents() from that chain of function calls allows find() to search all of the descendants of #iw-grid-view instead of just the descendants of its immediate children.
jQuery:
$('.clickhere').click(function(e){
e.preventDefault();
$(this).closest('.row').children('.abc').hide(); // working
$(this).closest('.row').children('.abc').children('input').value = ''; // not working
$(this).closest('.bookingrow').children('.addressbox').children('input').value(''); // alternative - not working
});
html
<div class="row">
<div class='abc'>
<input type='text' class='unknown' />
</div>
<div class="clickhere">hide</div>
</div>
my target is if i click the "clickhere" class, content under "abc" class will hide and whatever content added by customer on those input box, they will be clear.
same html used multiple time on the same form. that's why using "$(this)".
any solution? what i am doing wrong?
Thanks in advance.
You need to use .val() to set the value, jQuery methods normally will return a jQuery object not a dom element reference so you would not have a properly called .value.
$(this).closest('.row').find('.abc input').val('');
So
$('.clickhere').click(function (e) {
e.preventDefault();
//cache the value of .row since it is used multiple times
var $row = $(this).closest('.row');
$row.children('.abc').hide(); // working
$row.find('.abc input').val('');
});
I'm trying to achieve something inside a function, to actually access the parent selector.
Here is a small snippet of my HTML code:
<div class="module-row module-tab pull-right" id="modtab-sql_net">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-1">
</div>
<div class="module-row module-tab pull-right" id="modtab-sql_dss">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-2">
</div>
Here is the jQuery script I tried:
$('div[id^="modtab-"]').click(function(){
$(this).next('div[id^="tab-module-row"]').toggle(function(){
$(this).next('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
// The above line is incorrect. I need to change img attr for the class which is inside the div being clicked
});
});
Now, I want to actually change the image icon from a "plus" to a "minus" (the filenames are kept such).
I need to change $(this).next('.modtab-toggle') in the code to something that can work.
Please do NOT suggest to simply access the class using $('.modtab-toggle') as I have multiple such div tags in the code. It won't work out that way.
Thanks for any help.
Try this:
$('div[id^="modtab-"]').click(function(){
$(this).find('.modtab-toggle').attr("src", function(i, attr){
var o = this.src.indexOf('plus') > -1 ? this.src.replace('plus', 'minus') : this.src.replace('minus', 'plus');
return o;
});
});
See the Demo # Fiddle
try something like this
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('.tab-module-row').toggle(function(){
$this.find('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
});
});
Note: you should use class instead of id because it should be unique
#tab-module-row ->.tab-module-row
EDITED ANSWER
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('div[id^="tab-module-row"]').toggle(function(){
var img = $this.find('.modtab-toggle'); // your image object
// your condition to check which image to display will goes here.
});
});
change $(this).next('.modtab-toggle') to $(this).find('.modtab-toggle') to make it work.
See find() docs here
I want all the elements with id #text-field to be hidden (if the browser support JS, that's why it should be hidden with JS). But don't get it to work with elements created this way:
// Add post
$(document).on('click', 'a.add-post', function(event)
{
// Create content based on a hidden item
var newcontent = $('.type-post#post_id-hid-0').html();
content = '<li class="type-post">' + newcontent + '</li>';
// Place new content
$('.posts-list > li.iteration-0').last().after(content);
// Load necessary JS
load_page();
event.preventDefault();
});
And my load_page() function:
$(function()
{
function load_page()
{
$('#text-field').hide();
}
load_page();
}
Use a class for text-field instead of an ID, ID's are unique for each element while a class can be used over again for this purpose.
A lightweight solution which doesn't require any JS to execute, and won't cause a 'jumpy' interface when it first loads and elements disappear in front of users eyes.
CSS:
#text-field{display:hidden;}
HTML:
<noscript>#text-field{display:block;}</noscript>
you have to do two things:
function load_page(){ //<----put this in global scope
$('.text-field').hide(); //<---hide it with class name
}
$(function(){
load_page();
});
so now somewhere in your page you might have this <input type='text' id='text-field' /> here you can change your elem's id to class this way:
<input type='text' class='text-field' />
this should help if you can replace classname with whichever dynamic page related class you insert :
$(".classname[id='text-field']").hide();
or
$(".classname[id='text-field']").attr("style", "display:none");