This question already has answers here:
jQuery text() and newlines
(9 answers)
Closed 7 years ago.
How can i give a line break in the string text?
I want to give a line break in this line:
"Monday September 21 at 11:00am - September 24 at 12:00pm Pacific Time"
in the below code.
This is what I am doing.
<script>
$(document).ready(function() {
$('div.when ul.details p:contains("Sunday, September 20, 2015 - Thursday, September 24, 2015")').text('Monday September 21 at 11:00am - September 24 at 12:00pm Pacific Time ');
});
</script>
You can use .html() function and put <br> wherever you want line break.
$('div.when ul.details p:contains("Sunday, September 20, 2015 - Thursday, September 24, 2015")')
.html('Monday<br>September 21 at 11:00am - September 24 at 12:00pm Pacific Time ');
$(function() {
$('div')
.html('Monday<br>September 21 at 11:00am - September 24 at 12:00pm Pacific Time ');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
</div>
Related
In working with timestamps, moment.js, and the provided example of implementation by founddrama, I added the following to my html site:
<span id="then" data-date="Aug 22 2018 11:33:00 GMT-0700 (PDT)"></span>
<script>
$(document).ready(function(){
var then = $('#then'),
date = moment(new Date(then.attr('data-date'))),
update = function(){
then.html(date.fromNow());
};
update();
setInterval(update, 60000);
});
</script>
The output result was successful.
I would, however, like to add multiple timestamps.
In order to successfully render, I coded in this manner:
<span id="then" data-date="Aug 18 2018 07:33:00 GMT-0700 (PDT)"></span>
<span id="then1" data-date1="Aug 3 2018 16:33:00 GMT-0700 (PDT)"></span>
<script>
$(document).ready(function(){
var then = $('#then'),
date = moment(new Date(then.attr('data-date'))),
update = function(){
then.html(date.fromNow());
};
update();
setInterval(update, 60000);
});
</script>
<script>
$(document).ready(function(){
var then = $('#then1'),
date = moment(new Date(then.attr('data-date1'))),
update = function(){
then.html(date.fromNow());
};
update();
setInterval(update, 60000);
});
</script>
I am looking for a clean, concise way to properly group the javascript code, and place within one script block, instead of two.
This will find all DOM elements with the class then and then find each of their data-date attributes and set their inner HTML to a moment.js object.
<span class="then" data-date="Aug 22 2018 11:33:00 GMT-0700 (PDT)"></span>
<span class="then" data-date="July 15 2018 9:33:00 GMT-0700 (PDT)"></span>
<script>
$(document).ready(function(){
var dates = $('.then');
$.each(dates, function(){
var date = moment(new Date($(this).attr('data-date')))
$(this).html(date.fromNow());
})
});
</script>
First provide the class name to span elements.
Then parse to each span elements.
Make data attribute common i.e. data-date and not different for each span.
Then parse through all the span and append the html.
<span class="then" data-date="Aug 18 2018 07:33:00 GMT-0700 (PDT)"></span>
<span class="then" data-date="Aug 3 2018 16:33:00 GMT-0700 (PDT)"></span>
<script>
$(document).ready(function(){
$('.then').each(function(i) {
var $this = $(this);
var date = moment(new Date($this.attr('data-date')));
var update = function() {
$this.html(date.fromNow());
};
update();
setInterval(update, 60000);
});
});
</script>
I'm relatively new to js so would like some help,
I've got a form which is generated in php. I want the user to be able to click a button and copy the flight results to the clipboard,
I have the following javascript function:
<script>
function copyToClipboard(element) {
var $temp = $("<textarea>");
var brRegex = /<br\s*[\/]?>/gi;
$("body").append($temp);
$temp.val($(element).html().replace(brRegex, "\r\n")).select();
document.execCommand("copy");
$temp.remove();
}
</script>
However when you paste the result i get the following with the formatting tags visible:
<b>Mon 09 Oct - DY 7015 </b>
Depart: London Gatwick Airport, (LGW) at 17:05
Arrive: John F Kennedy Airport, New York (JFK) at 20:05
I want the result input to be
Mon 09 Oct - DY 7015
Depart: London Gatwick Airport, (LGW) at 17:05
Arrive: John F Kennedy Airport, New York (JFK) at 20:05
or if this is not possible easily, then at the very least display without formatting but also without the tags
Mon 09 Oct - DY 7015
Depart: London Gatwick Airport, (LGW) at 17:05
Arrive: John F Kennedy Airport, New York (JFK) at 20:05
Any ideas?
You can try this regex to remove your HTML tags: /<\/?[a-zA-Z]+\/?>/g
So, this should work :
$(element).html().replace(brRegex, "\r\n").replace(/<\/?[a-zA-Z]+\/?>/g, '')
Hope this helps!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Thanks for coming and understand I am new to this. So what seems easy to some is new to me.
I did some research on how to use javascript and/or php to pull data from an .xml file. I also can pull this .xml data into a mobile app using html5 canvas ( Construct 2 )
My issue is not related to nodes per se, But then again it is.
As it is easier if the node had text like this one.
<item>Hi There</item>
instead of subnodes like the one I wish to scrape.
<item game="powerball" nextjp="$67 Million" nextdd="Wednesday, August 10, 2016" winnum="20-33-36-47-52 PB12 X3" windd="Saturday, August 6, 2016" myflv="widget_pb.flv" winnumNM="20-33-36-47-52 PB12" name="POWERBALL">
I wish to break down the node so that it reads
Game
Next Jackpot
Next drawing
Winning Numbers
Game Played Date
It would have been easy for me if I could find an xml that already had the Nodes for each instead of all them inside one node. So with that said I don't need a full detailed script demo, I just need a basic overview of how it is done to get the subnode data. Thanks Jeremy C.
In this case I've loaded the entire XML from a string. In real case, you'll need to probably pull it using ajax.
Note: the URL you added in comments from which I got this xml from doesnt have 'Allow * Origin Header" so, ajax from there will create a CORS error.
var xml = '<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><title>Florida Lottery Winning Numbers</title><link>http://www.flalottery.com</link><description>Florida Lottery winning number drawing results for FLORIDA LOTTO, MEGA MILLIONS, POWERBALL, LUCKY MONEY, FANTASY 5, Midday and Evening PICK 2, PICK3, PICK 4 and PICK 5</description><item game="powerball" nextjp="$67 Million" nextdd="Wednesday, August 10, 2016" winnum="20-33-36-47-52 PB12 X3" windd="Saturday, August 6, 2016" myflv="widget_pb.flv" winnumNM="20-33-36-47-52 PB12" name="POWERBALL"><title>POWERBALL Drawing Results</title><link>http://www.flalottery.com/powerball.do</link><description>POWERBALL winning numbers are 20-33-36-47-52 PB12 X3 for 08/06/2016 and the next estimated Jackpot is $67 Million for 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/powerball.do</guid></item><item game="lotto" nextjp="$12 Million" nextdd="Wednesday, August 10, 2016" winnum="1-22-27-40-42-53 X3" windd="Saturday, August 6, 2016" myflv="widget_l6.flv" name="FLORIDA LOTTO"><title>FLORIDA LOTTO Drawing Results</title><link>http://www.flalottery.com/lotto.do</link><description>FLORIDA LOTTO with Xtra winning numbers are 1-22-27-40-42-53 X3 for 08/06/2016 and the next Jackpot is $12 Million for 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/lotto.do</guid></item><item game="fan5" winnum="3-23-25-33-34" windd="Tuesday, August 9, 2016" myflv="widget_f5.flv" name="FANTASY 5"><title>FANTASY 5 Drawing Results</title><link>http://www.flalottery.com/fantasy5.do</link><description>FANTASY 5 winning numbers are 3-23-25-33-34 for 08/09/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/fantasy5.do</guid></item><item game="pick5" winnumm="6-7-9-1-9" midd="Wednesday, August 10, 2016" winnume="4-7-1-9-1" eved="Wednesday, August 10, 2016" myflvm="NA" myflve="NA" name="PICK 5"><title>PICK 5 Drawing Results</title><link>http://www.flalottery.com/pick5.do</link><description>PICK 5 winning numbers are 6-7-9-1-9 for Midday 08/10/2016 and 4-7-1-9-1 for Evening 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/pick5.do</guid></item><item game="pick4" winnumm="3-6-4-7" midd="Wednesday, August 10, 2016" winnume="7-1-1-7" eved="Wednesday, August 10, 2016" myflvm="widget_p4_midd.flv" myflve="widget_p4_eved.flv" name="PICK 4"><title>PICK 4 Drawing Results</title><link>http://www.flalottery.com/pick4.do</link><description>PICK 4 winning numbers are 3-6-4-7 for Midday 08/10/2016 and 7-1-1-7 for Evening 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/pick4.do</guid></item><item game="pick3" winnumm="3-5-0" midd="Wednesday, August 10, 2016" winnume="2-4-8" eved="Wednesday, August 10, 2016" myflvm="widget_c3_midd.flv" myflve="widget_c3_eved.flv" name="PICK 3"><title>PICK 3 Drawing Results</title><link>http://www.flalottery.com/pick3.do</link><description>PICK 3 winning numbers are 3-5-0 for Midday 08/10/2016 and 2-4-8 for Evening 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/pick3.do</guid></item><item game="pick2" winnumm="9-6" midd="Wednesday, August 10, 2016" winnume="7-7" eved="Wednesday, August 10, 2016" myflvm="NA" myflve="NA" name="PICK 2"><title>PICK 2 Drawing Results</title><link>http://www.flalottery.com/pick2.do</link><description>PICK 2 winning numbers are 9-6 for Midday 08/10/2016 and 7-7 for Evening 08/10/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/pick2.do</guid></item><item game="megamillions" nextjp="$45 Million" nextdd="Friday, August 12, 2016" winnum="12-19-20-44-66 MM1 X5" windd="Tuesday, August 9, 2016" name="MEGA MILLIONS"><title>MEGA MILLIONS Drawing Results</title><link>http://www.flalottery.com/megaMillions.do</link><description>MEGA MILLIONS winning numbers are 12-19-20-44-66 MM1 X5 for 08/09/2016 and the next estimated Jackpot is $45 Million for 08/12/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/megaMillions.do</guid></item><item game="lucky" nextjp="$700,000" nextdd="Friday, August 12, 2016" winnum="1-11-27-39 LB3" windd="Tuesday, August 9, 2016" myflv="widget_lucky.flv" name="LUCKY MONEY"><title>LUCKY MONEY Drawing Results</title><link>http://www.flalottery.com/luckyMoney.do</link><description>LUCKY MONEY winning numbers are 1-11-27-39 LB3 for 08/09/2016 and the next Jackpot is $700,000 for 08/12/2016</description><pubDate>Wed, 10 Aug 2016 22:11:46 EST</pubDate><guid>http://www.flalottery.com/luckyMoney.do</guid></item></channel></rss>';
var xmlDoc = $.parseXML(xml),
$xml = $(xmlDoc),
$data = $xml.find("item");
var res = "";
$data.each(function() {
var str = "<tr>";
str += "<td>" + ($(this).attr('game')) + "</td>";
str += "<td>" + ($(this).attr('nextjp')) + "</td>";
str += "<td>" + ($(this).attr('nextdd')) + "</td>";
str += "<td>" + ($(this).attr('winnum')) + "</td>";
str += "<td>" + ($(this).attr('windd')) + "</td>";
str += "</tr>";
res += str;
});
$("#output").append(res);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="output" border="1">
<tr>
<th>Game</th>
<th>Next Jackpot</th>
<th>Next drawing</th>
<th>Winning Numbers</th>
<th>Game Played Date</th>
</tr>
</table>
I don't know exactly how to say that, I'll try to express myself here.
I have this feed url :
http://v2.afilio.com.br/aff/aff_boutique_show_ads.php?boutiqueid=37930-895835¤cypos=0&display_img=1&diplay_name=1&diplay_price=1&thumbsize=80%&truncate_desc=15&numrows=1&numcols=20&colorname=000000&colorprice=E30000&bkcolor=FFFFFF&bordercolor=FFFFFF&self_target=0&
It pulls out 15 items at once, it's like a store. The problem is that it won't break the line once it reaches the full width, on the other hand, it will just add a horizontal scroll bar at the bottom.
What I need to do is, instead of displaying the items like this:
|--- WIDTH 300px ---|
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
I need to display them like this:
|--- WIDTH 300px ---|
01 02 03 04 05 06
07 08 09 10 11 12
13 14 15
Here is my code :
http://v2.afilio.com.br/aff/aff_boutique_show_ads.php?boutiqueid=37930-895843¤cypos=0&display_img=1&diplay_name=1&diplay_price=1&thumbsize=80%&truncate_desc=15&numrows=1&numcols=20&colorname=000000&colorprice=E30000&bkcolor=FFFFFF&bordercolor=FFFFFF&self_target=0&");
echo ($a);
?>
I also would like to know if it's possible to use javascript instead of php.
If you dont have access another api endpoint (eg one that produces json or xml), then you will have to parse the html to strip the unwanted cruft;
$xml = new DOMDocument();
#$xml->loadHTMLFile('http://v2.afilio.com.br/aff/aff_boutique_show_ads.php?boutiqueid=37930-895835¤cypos=0&display_img=1&diplay_name=1&diplay_price=1&thumbsize=80%&truncate_desc=15&numrows=1&numcols=20&colorname=000000&colorprice=E30000&bkcolor=FFFFFF&bordercolor=FFFFFF&self_target=0&');
$products = array();
//Loop through each <td> tag in the dom and extract inner html
foreach($xml->getElementsByTagName('td') as $p) {
$children = $p->childNodes;
$phtml = '';
foreach ($children as $child)
{
$phtml.= $p->ownerDocument->saveHTML($child);
}
echo '<div class="product">' . $phtml . '</div>';
}
Css
<style type="text/css">
.product{
width: 100px; float:left;
}
</style>
I have 2 datepickers binded to 2 text boxes(Chkin and Chkout). When I select a date in Chkin Im supposed to show Chkin+1 date in Chkout. But Chkout date are not properly filled in some cases. Can someone tell me where I went wrong?
My code is-
$("#Chkin").datepicker({
dateFormat: $("#Dateformat").val(),
minDate: '+0',
onClose: function (dateText, inst) {
if ($("#Dateformat").val() == "dd/mm/yy") {
var parts = dateText.split("/");
var cin = new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
}
else {
var cin = new Date(dateText);
}
var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);
var maxOut= new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+7);
$("#Chkout").datepicker('option', 'minDate', cout);
$("#Chkout").datepicker('option', 'maxDate', maxOut);
showDays();
}
});
var cin = new Date($("#Chkin").val());
var cout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+1);
var maxOut= new Date(cin.getFullYear(), cin.getMonth(), cin.getDate()+7);
$("#Chkout").datepicker({
dateFormat: $("#ctl00_ContentPlaceHolder1_hdnDateformat").val(),
minDate: cout,
maxDate: maxOut,
onSelect: showDays });
PS:Chkin and Chkout values are initially binded with some dates.
It's because when Chkin is closed, you don't set Chkout with Chkin + 1.
In your $("#Chkin").datepicker({}), add $("#Chkout").datepicker( "setDate", cout ); before call function showDays().
Explanation :
With your current code, if selected value in Chkin is less than 7 days OR equal to Chkout, Chkout will automatically set to Chkin + 1. But otherwise, Chkout will not be changed.
Example :
Before Chkin is changed :
Chkin = 1 August 2013
Chkout = 5 August 2013
Chkout's minDate and maxDate = 2 August 2013 and 8 August 2013
Case 1 - Chkin is changed to 22 July 2013 :
Chkout = 23 July 2013
Chkout's minDate and maxDate = 23 July 2013 and 29 July 2013
Case 1 explanation : Chkout is changed because old Chkout's value is not in range of new Chkout's minDate and maxDate.
Case 2 - Chkin is changed to 3 August 2013 :
Chkout = 5 August 2013
Chkout's minDate and maxDate = 4 August 2013 and 10 August 2013
Case 2 explanation : Chkout is still same because old Chkout's value is in range of new Chkout's minDate and maxDate.
Hopefully this help.