I'm new to all this so I apologise if my question is 'primitive'. I've looked all over and can't find the answer that suits my specific problem, which is...
I have several div's all with a the same class name and all with individual id's. All but 1 of the div's also contain an anchor tag.
I'm trying to get the id of only the div with an id that doesn't have an anchor tag - how do i do it? - also, I need to do it in a way that would work if I changed which div (with an id) didn't have the anchor, ie I would get the id of whichever div had the anchor removed (only 1 div with an id within the divContainer div would have no anchor).
eg: (occurs with other div's etc on page)
<div id="divContainer">
<div id="1" class="div"><a id="a1" class="a" href="blah blah">Blah</a></div>
<div class='other div'></div>
<div id="2" class="div"><a id="a2" class="a" href="blah blah">Blah</a></div>
<div class='other div'></div>
<div id="3" class="div"><a id="a3" class="a" href="blah blah">Blah</a></div>
<div class='other div'></div>
<div id="4" class="div">Blah</div>
<div class='other div'></div>
<div id="5" class="div"><a id="a5" class="a" href="blah blah">Blah</a></div>
<div class='other div'></div>
<div id="6" class="div"><a id="a6" class="a" href="blah blah">Blah</a></div>
</div>
I hope that makes sense! Happy to answer any questions needed to help!
Thanks in advance to the guru's with the knowledge to get me out of my hole.
You want
$('div:not(:has(a))')
Related
i have this code in tailwind
#foreach($studenti as $student)
<a data-modal-toggle="defaultModal" data-target="#myModal{{$student->id }} href="#" class="hover:text-blue-700">{{$student->name}}</a>
and this is the Main modal
<!-- Main modal -->
<div id="myModal{{$student->id}}" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
{{$alum->nombre}} {{$alum->apellpatern}} {{$alum->apellmatern}}
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="defaultModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
<button data-modal-toggle="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button data-modal-toggle="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
</div>
</div>
</div>
</div>
#endforeach
But when i pressed the link it does not work, i am using data-target="#myModal{{$student->id }} in order to pass #student data to tailwind Main modal id="myModal{{$student->id}}",
it seems that this is not the proper way to pass data, i am using Laravel 8, anyhelp is appreciated
Thank you in advance
Omar
I tried following this https://smallbusiness.chron.com/show-date-tumblr-44477.html
doing this
<div class="container">
<div class="main">
{block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}
<article class="
{block:Text} {block:Date} {block:NewDayDate} {DayOfWeek}, {Month} {DayOfMonth}, {Year} {/block:NewDayDate} {/block:Date} text {/block:Text}
{block:Photoset} {block:Date} {block:NewDayDate} {DayOfWeek}, {Month} {DayOfMonth}, {Year} {/block:NewDayDate} {/block:Date} photoset {/block:Photoset}
{block:Photo} {block:Date} {block:NewDayDate} {DayOfWeek}, {Month} {DayOfMonth}, {Year} {/block:NewDayDate} {/block:Date} photo {/block:Photo}
{block:RebloggedFrom}reblogged {/block:RebloggedFrom}
{block:Quote}quote {/block:Quote}
{block:Link}link {/block:Link}
{block:Chat}chat {/block:Chat}
{block:Audio}audio {/block:Audio}
{block:Video}video {/block:Video}
{block:Answer}answer {/block:Answer}
{block:Date}not-page post-{PostID}
{block:Date} {MonthNumberWithZero} / {DayOfMonthWithZero} / {ShortYear} {/block:Date}
{/block:Date} {block:PermalinkPage} active exposed{/block:PermalinkPage}" {block:Date}data-post-id="{PostID}"{/block:Date} {block:SupplyLogging}data-supply-logging='{positions}'{/block:SupplyLogging}>
<div class="post-wrapper clearfix">
But I still don't display dates.
That page I referenced was worthless
I followed instructions here: http://themesbyeris.tumblr.com/tutorial07
Did this
<div class="container">
<div class="main">
{block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}
<article class="
{block:Text}text {/block:Text}
{block:Photoset}photoset {/block:Photoset}
{block:Photo}photo {/block:Photo}
{block:RebloggedFrom}reblogged {/block:RebloggedFrom}
{block:Quote}quote {/block:Quote}
{block:Link}link {/block:Link}
{block:Chat}chat {/block:Chat}
{block:Audio}audio {/block:Audio}
{block:Video}video {/block:Video}
{block:Answer}answer {/block:Answer}
{block:Date}not-page post-{PostID}
{block:Date} {MonthNumberWithZero} / {DayOfMonthWithZero} / {ShortYear} {/block:Date}
{/block:Date} {block:PermalinkPage} active exposed{/block:PermalinkPage}" {block:Date}data-post-id="{PostID}"{/block:Date} {block:SupplyLogging}data-supply-logging='{positions}'{/block:SupplyLogging}>
<div class="post-wrapper clearfix">
<header class="post-header">
{block:LikesPage}
<a class="post-blog" href="{Permalink}"><img class="blog-avatar" src="{PostBlogPortraitURL-30}" data-blog-card-username="{PostBlogName}">{PostBlogName}</a>
{/block:LikesPage}
{block:RebloggedFrom}
<a class="reblog-link" href="{ReblogParentURL}" data-blog-card-username="{ReblogParentName}"><i class="reblog_sm"></i>{ReblogParentName}</a>
{/block:RebloggedFrom}
</header>
<section class="post">
{DayOfWeek}, {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} {24HourwithZero}:{Minutes}
and it worked just fine.
I am using protractor 5.2.2. I have to locate a dropdown element by using its sting name.So i have tried with below code,but its not working.
element(by.xpath("//content[contains(string(), 'Learn more')]")).click();
or
element(by.xpath("//div[contains(string(), 'Learn more')]")).click();
The UI code is given below
<div jsname="YCbqLe">
<div jsaction="aLn7Wb:kbDuhe">
<div role="listbox" aria-expanded="false" class="Ej ljmwzf" jscontroller="YwHGTd" jsaction="click:cOuCgd(LgbsSe); keydown:I481le; keypress:Kr2w4b; mousedown:UX7yZ(LgbsSe),npT2md(preventDefault=true); mouseup:lbsD7e(LgbsSe); mouseleave:JywGue; touchstart:p6p2H(LgbsSe); touchmove:FwuNnf; touchend:yfqBxc(LgbsSe|preventMouseEvents=true|preventDefault=true); touchcancel:JMtRjd(LgbsSe); focus:AHmuwe; blur:O22p3e;b5SvAb:TvD9Pc;" jsshadow="" jsname="HvyTdb" aria-label="Add a button (optional)">
<div jsname="LgbsSe" role="presentation">
<div class="EI" jsname="d9BH4c" role="presentation">
<div class="Di LMgvRb y3" jsname="wQNmvb" jsaction="" data-value="" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="BOOK" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="ORDER" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="SHOP" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb bf" jsname="wQNmvb" jsaction="" data-value="LEARN_MORE" aria-selected="true" tabindex="0" role="option">
<div class="qm he" jsname="ksKsZd"></div>
<content class="u5 jh">
"Learn more"
</content>
</div>
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="SIGN_UP" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="GET_OFFER" aria-selected="false" tabindex="-1" role="option">
</div>
</div>
How can i select the the drop down text "Learn more" here, using the text 'Learn more'.Thanks in advance
you can also use the css locator as below
element(by.cssContainingText("content", "Learn more"))
or with Xpath
element(by.xpath("//*[text()='Learn more']")
Looks like the text have some space. You can copy the complete text between tags and use that in that above xpath or can try the below example
//content[normalize-space(text())='Learn more']
or you can try this css
element(by.css("div[data-value="LEARN_MORE"] content")
Try this xpath to locate the element. If click is not working out, probably this element does not have click action.
//content[contains(text(), '"Learn more"')]
You may try invoking the click action for either one of the below.
//div[#data-value="LEARN_MORE"]
or
//div[#data-value="LEARN_MORE"]/div
I have no code to start off with, because I'm not advanced in JQuery and this seems like advanced stuff here. I know how to add classes, hide elements and other sorts of things but this is a new thing for me here. Here's the problem. I have content being served via php and mysql. The content will all share the same class and will be listed five per page. I need to have each of the same classes to have an extra class added to them to give it a unique class. An example of what the html looks like is below.
<div id="1" class="example"></div>
<div id="2" class="example"></div>
<div id="3" class="example"></div>
<div id="4" class="example"></div>
<div id="5" class="example"></div>
I need Jquery to do this to the html:
<div id="1" class="example ex1"></div>
<div id="2" class="example ex2"></div>
<div id="3" class="example ex3"></div>
<div id="4" class="example ex4"></div>
<div id="5" class="example ex5"></div>
It will not be practical to create scripts for the Id tag, because if I have a thousand Id's, then I will have to replicate the script a thousand times per id and more so as the list gets longer. This is only for javascript purposes so I want to keep it within javascript. If there is a way to accomplish this on the server side as well I'll take those suggestions as well. Thanks to all in advance for any help with this problem.
Now I finnaly understand what you want
this code is needed
// Wait on the document to be loaded
$(function(){
// get every element with the class example in an array and loop
// through it(each) with i as index
$(".example").each(function(i){
// add class ex with the index
// this is the element we are pointing at so a div
$(this).addClass("ex" + i);
});
});
but you could do this easily on server side when you loop through your array with 5 divs ;)
If I read your comments correctly, you have 5 items per page and the class will be ex1 ex2 ... ex5 respectively.
If so, here is the script:
var itemsPerPage = 5;
$(".example").each(function(){
var number = this.id % itemsPerPage;
if (number == 0) number = itemsPerPage;
$(this).addClass("ex"+ number);
});
Or short version:
var itemsPerPage = 5;
$('.example').each(function(){
$(this).addClass('ex'+ ((this.id % itemsPerPage) == 0 ? itemsPerPage : (this.id % itemsPerPage));
});
Or shortest version is EaterOfCorpses's answer if you don't care about the ID at all. Each method has its own pros and cons.
Example 1: Wrong ID order
<div id="6" class="example">
<div id="8" class="example">
<div id="7" class="example">
EaterOfCorpses's will generate
<div id="6" class="example ex0">
<div id="8" class="example ex1">
<div id="7" class="example ex2">
My script will generate
<div id="6" class="example ex1">
<div id="8" class="example ex3">
<div id="7" class="example ex2">
Example 2: random ID (EaterOfCorpses's pros)
<div id="15blahblah" class="example">
<div id="5" class="example">
<div id="10" class="example">
EaterOfCorpses's will generate
<div id="15blahblah" class="example ex0">
<div id="5" class="example ex1">
<div id="10" class="example ex2">
My script will generate same class and error at 15blahblah, which may be both good (to detect error in IDs) and bad (JS does not run for that particular record)
<div id="15blahlbah" class="example exNil">
<div id="5" class="example ex5">
<div id="10" class="example ex5">
Cool.
$(document).ready(function(){
jQuery.each($(".example"), function(){
$(this).addClass("x" + this.id);
});
});
I'm writing a mobile app with PhoneGap and jQuery Mobile. To simplify navigation I want to spread a single form over multiple 'pages' using div data-role="page". The idea is to give the user a wizard like experience for filling in a large form. On completion I need to be able to save the form locally, or submit it, if the mobile is online.
I don't understand how to go about submitting or saving a form using jQuery Mobile if the form is split into multiple 'virtual' pages. I've search the web but can't find any tutorials or examples on solving this problem.
Any help will be appreciated.
UPDATE:
I recently changed the way I worked with multipage forms, and this solution worked nice for me. You basically use a naming convention where fields become part of sections by giving them id's starting with the section name and a dash, e.g: person-name, person-surname. See the answer below.
Ok, I posted my thoughts here: http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile
Essentially I ended up using a sever side language to simply include the right part of the form at a time. (I'm using ColdFusion, but any language would work really.) The form self posts and simply displays the right step based on where you are in the process.
A quick help to anyone stuck with the same problem. I did the 'form thing', but it gets sloppy. You basically just embed the page divs inside the form element, but that's not very elegant and has given me some navigation issues.
So I ended up with my own solution that works over huge multipage forms (+/- 1000 elements). Not the most elegant, but it works like a charm:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function () {
$('#submit_my_form').click(function (e) {
alert(JSON.stringify(readFormData('names')));
alert(JSON.stringify(readFormData('dates')));
});
});
function readFormData(section) {
var sectionData;
var els = $(':input[id|='+section+']');
var sectionData = {};
$.each(els, function() {
if (this.name && !this.disabled && (this.checked
|| /select|textarea/i.test(this.nodeName)
|| /text|hidden|password|date|email/i.test(this.type))) {
sectionData[this.name.substr(section.length+1)] = $(this).val();
console.log(this.name + " -> " + $(this).val());
}
});
return sectionData;
}
</script>
</head>
<body>
<div data-role="page" id="menu" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Menu Page</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="page1" href="#page1" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
<li><a target_id="page2" href="#page2" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Page2</a></li>
</ul>
<input id="submit_my_form" type="button" name="send" value="Submit"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
Menu page footer
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 1</h1>
Next
</div>
<div data-role="content">
<label for="names-initials">Name:</label>
<input type="text" name="names-initials" id="names-initials" value=""/>
<label for="names-surname">Surname:</label>
<input type="text" name="names-surname" id="names-surname" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 2</h1>
</div>
<div data-role="content">
<label for="dates-birthday">Birthday:</label>
<input type="date" name="dates-birthday" id="dates-birthday" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
</div>
</div>
</body>
</html>