I want to display a form if a random number is other than zero to between 15. Here is a code I tried. I have used iframe but I want any other method. And in booking.html there is simple form. I want it to be without iframe how to do it.
function myFunction(){
var x=document.createElement("IFRAME");
x.setAttribute("src","booking.html");
x.style.height="700px";
x.style.border="none";
x.style.float="center";
document.getElementById("ran").appendChild(x);
}
var z=Math.floor(Math.random()*15);
if(z==0){
document.getElementById("ran").innerHTML=
"sorry no seats available </br> Please select another date to book ticket";
}else{
document.getElementById("ran").innerHTML=
"HURRY UP "+z+" seats available !!!</br></br>";
window.onload=myFunction;
}
As you tagged your question with jQuery, you could benefit from the load method:
Define two areas in your HTML : one for the message, one for the booking page:
<div id="ran">
<div id="msg" style="white-space: pre"></div>
<div id="load"></div>
</div>
The white-space: pre is just to facilitate line-breaks in your text, without having to resort to HTML encoding.
In Javascript:
$(function() {
var z = Math.floor(Math.random()*15);
if (!z) {
// Preferably don't use html(), but text():
$("#msg").text("Sorry, no seats available.\nPlease select another date to book ticket");
} else {
$("#msg").text("HURRY UP, " + z + " seats available !!!");
// Here comes the magic of jQuery which does all the Ajax stuff:
$("#load").load('booking.html');
}
});
However, if the booking page belongs to your site, why not just merging the pages into one? You could include it, but hide it with style="display:none".
<div id="ran">
<div id="msg" style="white-space: pre"></div>
<div id="booking" style="display:none"> <!-- hide initially -->
<!--- just example code. Put your own stuff here --->
<form action="book.php" method="POST">
Date from: <input type="text" id="from"><br>
Date until: <input type="text" id="until"><br>
<!-- etcetera .... -->
</form>
</div>
</div>
Then in Javascript you would show it only when there are seats available:
$(function() {
var z = Math.floor(Math.random()*15);
if (!z) {
// Preferably don't use html(), but text():
$("#msg").text("Sorry, no seats available.\nPlease select another date to book ticket");
} else {
$("#msg").text("HURRY UP, " + z + " seats available !!!");
$("#booking").show(); // Only show form when there are seats available.
}
});
Related
I don't have too much experience working to JS but I am trying to get the value from textarea using JS when I am writing into textarea but it is not working the append function.
In HTML:
<textarea required="" name="wall_post_text" id="wall_post_text" placeholder="Write something..."> </textarea>
javascript code:
$(document).on('click', 'li.tag_system_search_people', function() {
var username = $(this).attr('data-people_username');
var user = $(this).attr('data-people');
var content = $('#wall_post_text').val();
content = content.replace(/#(\w+)/ig,'');
$('#wall_post_text').val(content);
$('#wall_post_text').append(" <span data-people='"+user+"' data-people_tagged='"+username+"' class='people_tagged' contenteditable='false'>"+username+"</span> ");
alert($('#wall_post_text').val());
$('#pg_social form#wall_post)
});
The alert is printing but text without the text in append function.
You are not doing it right.
For example:
// find elements
$('.elm_submit').on('click', function() {
/*var username = $(this).attr('data-people_username');
var user = $(this).attr('data-people');*/
// its value (You can too insert html in variable).
var content = $('#wall_post_text').val();
// insert value in div
$('.content').html(content);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Value -->
<textarea required="" name="wall_post_text" id="wall_post_text" placeholder="Write something..."> </textarea>
<!-- Get element -->
<div class="content">
</div>
<!-- Fire -->
<button class="elm_submit">
Click
</button>
and your postcode is incomplete
...
$('#pg_social form#wall_post ... <-
});
I have a script that allows users on my e-commerce site to select 3 products and it highlights the products as they select.
How can I grab the $pro_image, title, desc, etc. of the 3 products selected and put them into a table for side-by-side view?
I am assuming we will somehow need to check for the $pro_id that is selected to identify each product separately?
<div class="col-md-10">
<h4>Not sure which product to choose? <br> Select up to 3 and compare side-by-side.</h4>
<div class="col-md-2">
<button type="compare" class="btn btn-success" name="submit-compare">Compare</button>
</div>
<div class="col-md-12">
<?php getpcatpro();
$get_products = "SELECT * FROM products ORDER BY RAND() LIMIT 0,9";
$run_products = mysqli_query($con,$get_products);
while($row_products=mysqli_fetch_array($run_products)){
$pro_id = $row_products['product_id'];
$pro_title = $row_products['product_title'];
$pro_img1 = $row_products['product_img1'];
$pro_link = $row_products['product_link'];
echo "
<div class='col-md-4 col-sm-6'>
<div class='product' onclick='highlight(this)'>
<center>
<img class='img-responsive' src='admin_area/product_images/$pro_img1'>
</center>
<div class='text'>
<center>
<a href='$pro_link'> $pro_title </a>
</center>
</div>
</div>
</div> ";
}
?>
<script>
var selected_items = 0;
function highlight(target) {
if(target.style.border == ""){
if(selected_items < 3){
target.style.border = "1px solid red";
selected_items += 1;
}
} else{
target.style.border = "";
selected_items -= 1;
}
}
</script>
</div>
</div>
Firstly, there's no button type called 'compare', please stick to standards, you shouldn't put random things into these attributes, you can create your own if need be (which I do not think you need to). See here for the three types you are allowed: https://www.w3schools.com/tags/att_button_type.asp (you should just use 'button')
Second, do not add styles through JS, you will cause an entire repaint every time you change a pixel. Instead, toggle class names on the class attribute of an element, let CSS do the work of styling, and JS do the work of interaction.
Thirdly, move all 'PHP' to the top of your script (such as defining your SQL statement and fetching the result of it) rather than having these things interspersed within HTML (just use PHP later in the document to build HTML from the PHP variables at the top of the script), such as looping through your result set to build out the HTML, not to perform important tasks such fetching the data itself, this will help you track whats doing what where so you don't tie yourself up in IF statements etc.
OK, Create a function, bound to your compare button, that toggles the state of an element. Instead of 'highlighting' using styles, toggle a class 'compare' on the product parent container:
<style>
.product.compare{
border: 1px solid red;
}
</style>
<script>
$('.btn.compare').click(function(){
$(this).closest('.product').toggleClass('compare');
});
</script>
<div class='products'>
<div class='product' data-id='1'>
<h2>A Product</h2>
<button class='btn compare'>compare</button>
</div>
<div class='product' data-id='2'>
<h2>Another Product</h2>
<button class='btn compare'>compare</button>
</div>
</div>
This will basically, when the button is clicked, find the parent element with class '.product' then toggle the class '.compare' on it, so you should have .product.compare
You'll need to design your table to have fixed rows with class names, like so:
<table class='comparison'>
<thead>
<tr class='product-title'></tr>
</thead>
<tbody>
<tr class='product-price'></tr>
</tbody>
</table>
Once you have products with a toggled state (a class has been added which both highlights the row with CSS visibly, but also flags it for comparison to jQuery, create a new button and method for it to call to build the comparison table
<button class='btn goCompare'>Go Compare</button>
$(function(){
$(".btn.goCompare").on('click', function(e){
e.preventDefault();
buildComparisonTable();
});
});
function buildComparisonTable(){
var comparisonTableBody = $('table.comparison tbody');
var comparisonTableBodyProductTitleCol = $('table.comparison thead tr.product-title');
var comparisonTableBodyProductPriceCol = $('table.comparison tbody tr.product-price');
comparisonTableBody.find('.product-col').remove();
$('.product.compare').each(function(){
var id = $(this).attr('data-id');
var title = $(this).attr('data-title');
var price = $(this).attr('data-price');
comparisonTableBodyProductTitleCol.append('<th class="product-col">'+title+'</th>');
comparisonTableBodyProductPriceCol.append('<td class="product-col">'+price+'</td>');
});
}
The choice is yours, but think about how you can cleverly and correctly mark up your pages to be easily read by your scripts. You can either stuff all of the product data into attributes on a parent element:
<div class='product' data-id='1' data-title='A Product' data-price='$10.00' data-primary-category='Homeware'>
<h2>A Product</h2>
<button class='btn compare'>compare</button>
</div>
Or you can add a class to each element that has the data you intend to gleam:
<div class='product' data-id='1'>
<h2 class='product-title'>A Product</h2>
<span class='product-price'>$10.00</span>
<span class='product-category'>Homeware</span>
<img class='product-img' src='/images/product-1.jpg' />
</div>
Now you can target what you want easily and get information from it using proper class names, a considered layout, correct use of technologies and a simple approach. This code-pen illustrates: https://codepen.io/anon/pen/voBKgV
Hello Everybody I have a div which lists messages with <ul> here is the code ;
<section class="portfolio-section masonry-style">
<div class="container">
<h2>TOPLU KONUŞMA</h2>
<div class="container" style="max-height:500px;min-height:500px;overflow-y: scroll;overflow-x: hidden;">
<br />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
</div>
</section>
<div class="container">
<div class="container">
<div id="contact-form">
<textarea name="comment" id="message" placeholder="Mesajınız"></textarea>
<div class="submit-area">
<input type="submit" id="sendmessage" value="Gönder">
</div>
</div>
</div>
</div>
script ;
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.-->
<script>
$(function () {
var currentMember = '#Html.Raw(#ViewBag.Name)';
// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call back to display messages.
chat.client.addNewMessageToPage = function (name, message) {
// Add the message to the page.
$('#discussion').append('<li><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(currentMember);
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
so As you see it doesnt auto scroll down while messages are coming. this is real time chat. So how can I autoscroll down while messages are coming
First, add in id for the following line. Jquery can't select the correct div if you do not have an ID for that div, since you have multiple div.container.
<div class="container" style="max-height:500px;min-height:500px;overflow-y: scroll;overflow-x: hidden;" id="messageContainer">
Then use jquery to scroll the div using through the following code:
$('div#messageContainer').scrollTop($('div#messageContainer')[0].scrollHeight)
Put the code
(1) Right after your new message is appended
$('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>');
or
(2) After you clear your input box.
$('#message').val('').focus();
I need a script to remove a line of text "Quantity in Stock:(Out of Stock)" from my product pages. The specific HTML code I'm trying to remove is:
<span class="PageText_L329n"><strong class="prod_qty_label">
Quantity in Stock
</strong></span>
:
<span style="color:#cc0000;"><span class="StockQuantity_OutOfStock"></span></span><br></br>
I only have limited knowledge of Javascript, and I know I need to start with something like this:
document.body.innerHTML = document.body.innerHTML.replace('', '');
But I'm struggling to make it work with having all the HTML markups in the javascript.
On my category pages (different page), I am trying to remove this text from the HTML, which may appear multiple times in the page:
<b><font color="#CC0000">
<span class="PageText_L331n">(Out of Stock)</span>
</font></b>
Any help is appreciated.
Thanks.
Like this example?
<div>
<span class="PageText_L328n"><strong class="prod_qty_label">
Quantity in Stock 1
</strong></span>
</div>
<div>
<span class="PageText_L329n"><strong class="prod_qty_label">
Quantity in Stock 2
</strong></span>
</div>
<div>
<span class="PageText_L330n"><strong class="prod_qty_label">
Quantity in Stock 3
</strong></span>
</div>
<button id="button">Remove</button>
var button = document.getElementById("button");
var PageText_L329n = document.getElementsByClassName("PageText_L329n");
function remove() {
if (PageText_L329n[0]) {
PageText_L329n[0].parentNode.removeChild(PageText_L329n[0]);
}
}
button.addEventListener("click", remove, false);
on jsfiddle
Also, maybe it is enough just to hide it rather than remove it from the DOM.
And for clearing text
<b><font color="#CC0000">
<span class="PageText_L331n">(Out of Stock)</span>
</font></b>
<button id="clear">Clear</button>
var button = document.getElementById("clear");
function clearText() {
document.getElementsByClassName("PageText_L331n")[0].textContent = "";
}
button.addEventListener("click", clearText, false);
on jsfiddle
I have a ASP.NET MVC webpage that submits a form with ajax like this :
function ValidateFormAndAjaxSubmit(formId, callingElement) {
if (IsNotDblClick(callingElement.id)) {
var _form = $("#" + formId);
var validator = _form.validate();
var anyError = false;
anyError = !_form.valid();
if (anyError) {
window.latestClick = '';
return false; // exit if any error found
}
$.post(_form.attr("action"), _form.serialize(), function (data) {
if (data.success && data.redirectUrl.length > 0) {
window.location.href = data.redirectUrl;
}
else {
var isValid = validateResponse(_form, data);
window.latestClick = '';
}
})
}
}
All control in the form is generated with helpers like Html.TextBoxFor and so on and this works great.
The problem is that a jquery plugin(Select2) will turn a regular textbox into a list like this :
<div class="floatLeft">
<label class="controlTitleContainer" for="Url">Taggar</label>
<br style="clear:both;">
<div class="select2-container select2-container-multi bigdrop" id="s2id_txtTagBox" style="width: 408px"> <ul class="select2-choices" style=""> <li class="select2-search-choice"> <div>Film </div> </li><li class="select2-search-choice"> <div>Hund </div> </li><li class="select2-search-field"> <input type="text" autocomplete="off" class="select2-input valid" tabindex="0" style="width: 10px;"> </li></ul></div><input style="width: 408px; display: none;" class="bigdrop" id="txtTagBox" name="Tags" type="text" value="">
</div>
You can here see that the textbox is set to display none while the added tags is shown like a ul list. In this case I have added Film and Hund to the list.
I need these values to be sent to the service(with the above ajax call), the question is how?
From what I can tell from the documentation, select2 is designed work with select lists, not textboxes. Try generating a select list instead of a textbox.
Look at the source for "Multi Valued Select Boxes" in the examples, the underlying markup is a select box, but the plugin generates a div to make it look like a textbox.