I have a messages page where i can see them as a list. If i select each one of them, I display them in the right side of the page. For that, I have two javascript functions for "next" and "previous" buttons for the messages' page. So I have a list of messages on the screen, if I click "next", I see the next page of messages and so on.
Everything work allright, the only problem is in Chrome, it wouldn't load the page number in a span section on the bottom of the page. This is the function for next page:
$("#next").click(function() {
var currentPageElem = $("#currentPage");
var totalPagesElem = $("#totalPages");
var minItemElem = $("#minItem");
var maxItemElem = $("#maxItem");
var totalItemsElem = $("#totalItems");
var itemsOnPageElem = $("#itemsOnPage");
var currentPageValue = parseInt(currentPageElem.val(), 10);
if (currentPageValue < totalPagesElem.val()) {
currentPageElem.val(currentPageValue + 1);
}
//the first record on the current page
minItem = $(this).getMinItem(currentPageElem.val(), itemsOnPageElem.val());
minItemElem.val(minItem);
//the last record on the current page
maxItem = $(this).getMaxItem(currentPageElem.val(), itemsOnPageElem.val(), totalItemsElem.val());
maxItemElem.val(maxItem);
$(this).showItems(minItem, maxItem);
var pageHtml = $(".pages").html();
$(".pages").html($(this).newPageHtml(pageHtml, currentPageElem.val()));
}); });
$.fn.newPageHtml = function(pageHtml, currentPage) {
var idx1=pageHtml.indexOf("Pagina ");
var idx2=pageHtml.indexOf(" / ");
var prevPage = pageHtml.substring(idx1 + 7, idx2);
return pageHtml.replace(prevPage, currentPage);
};
This is the html code that involves the js:
<input type="hidden" id="totalPages" name="totalPages" value="${totalPages}"/>
<input type="hidden" id="currentPage" name="currentPage" value="${currentPage}"/>
<input type="hidden" id="minItem" name="minItem" value="${minItem}"/>
<input type="hidden" id="maxItem" name="maxItem" value="${maxItem}"/>
...
<div class="controls">
<a class="prev" id="prev"></a>
<a class="next" id="next"></a>
<span class="pages">
<fmt:message key="messages.page">
<fmt:param>${currentPage}</fmt:param>
<fmt:param>${totalPages}</fmt:param>
</fmt:message></span></div>
are you try in firefox or safari?
what is your java version?
are you review in about:config if you have enable java/javascript in Chrome
I have solved the problem. There was an issue with the CSS files that wouldn't allow the text to transform correctly in Google Chrome. So I modified the style of the span class from above like this:
<span class="pages" style = " position: absolute; ">
Initially, the position of the span class was relative. I think Chrome has a problem with this type of CSS.
Related
I have a JavaScript array and I wanted to put HTML links in that array. I don't know if there is a certain way to go about this. Also, if it's possible, when the user clicks the button and it selects the link, is there a way to make that link open up in a new tab (I know in HTML its target=_blank). I appreciate any help as always.
JavaScript:
var i = Math.floor(Math.random() * 10) +1;
function randomPageWithJS() {
const arrayJS = [link1, link2, link3, link4];
document.getElementById('randomPageWithJS').value = arrayJS[i];
}
randomPageWithJS();
HTML:
<form>
Random Song:<input type="text" id="randomPageWithJS" name="randomPage"/>
<input type="button" value="RandomPage" onclick="randomPageWithJS()" width="1000"/>
</form>
Use window.open
window.open(arrayJS[i], '_blank');
Example:
function randomPage() {
const links = ['https://google.com', 'https://stackoverflow.com', 'https://stackoverflow.com/questions/56139010/'];
window.open(links[Math.floor(Math.random()*links.length)], '_blank');
}
<input type="button" value="Random Page" onclick="randomPage()">
I want to apply below script to create the next button on a popup. When I used the code to open the popup, it works properly. But when trying to apply the code to create the next button, it does not work. Please help me to fix the issue.
Here the script I used.
<script>
$(document).ready(function() {
$(".getAssignment").click(function() {
var $divs = $(this).parent().find(".modalDialog");
if ($divs.length > 0) {
window.location.href = "#" + $divs[ Math.floor(Math.random() * $divs.length) ].id;
}
});
});
</script>
<input class="getAssignment" type="button" value="Open Modal">
<div id="openModal" class="modalDialog">
<div>
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
https://jsfiddle.net/Sanjeewani/0pfov2b9/6/
The problem is var $divs = $(this).parent().find(".modalDialog"); it's correct relative the "Open Modal"-button, but from the "Next"-button inside the modal dialog parent() is not the element containing the modal-divs... try changing to var $divs = $(".modalDialog");
It can be done by getting a random div number.I have change js code little bit kindly check
$(document).ready(function() {
var sr_num = ['1', '2', '3'];
$(".getAssignment").click(function() {
var rand = sr_num[Math.floor(Math.random() * sr_num.length)];
var demo = "#openModal" + rand;
window.location.href.split('#')[0]
window.location.href = demo;
});
});
Here is working code check here
Hope it will help you
I got a button which i want to reload on click. But only the button should be reloaded, not the rest of the page.
The button looks like this:
<a href="{$module_data.GM_PRODUCTS_BUTTON_BUY_NOW_URL}" id="click{php}echo ''.$counter.'';{/php}" class="addcart button_green button_set action_add_to_cart"{if $module_data.PRODUCTS_NAME != ''} title="{$module_data.PRODUCTS_NAME|replace:'"':'"'} {$txt.text_buy}"{/if}
onclick="return checkAddToCart(event, '{$module_data.QTY_DATA.ID}', {$product_stock}, {$product_max_order}, {$module_data.PRODUCTS_ID}, {php}echo $row['customers_basket_quantity']{/php}, {php}echo "'click".$counter."'";{/php});">
<span class="button-outer">
<span class="button-inner">{$button.add_to_cart}</span>
</span>
</a>
Now i told javascript that echo "'click".$counter."'"; is the clickid.
I tried the following thing to reload my page on click:
function checkAddToCart(event, tid, stock, maxallowed, pid, pquantity, clickid)
{
var clickid_string = clickid.toString();
var bought = Number($("#"+tid).val());
stock = Number(stock);
maxallowed = Number(maxallowed);
var ans = (bought>stock) || (bought > maxallowed);
if(ans)
{
event.stopPropagation();
event.preventDefault();
alert("Maximale Bestellmenge: " + Math.min(maxallowed, stock));
}
else {
$("#"+clickid_string).load("#"+clickid_string);
}
return !ans;
}
It is not working, and i have absolutly no idea why. By the ay, my system works with SMARTY tpl.
If you want to run a php script on click of a button you need to learn ajax. Ajax its just a simple way to use javascript, to run pages in background without reload the current page.
<span class="button-outer" onClick="addDataToDB(this);">...</span>
<script>
function addDataToDB(el) {
var elem = $(el);
/* GET ALL YOUR DATA*/
var name = ...
/* Create an AJAX request to your phpfunction */
}
</script>
Check some tutorials in youtube.
I am developing a small web application specifically for IE8 (I know you all feel the pain already). In this application, I have an Update "button" that (when clicked) generates a box where they user can click Yes or No. I used JavaScript to generate the box and the input tag with type="submit".
Here is a snippet of the code:
HTML
<form action="." method="POST" id="yield_curve_form" enctype="multipart/form-data">
<div class="fileUploadDiv">
<img id="yieldCurve" src="../img/market/yield_curve.jpg" alt="ZBPF Bond Market" >
<div class="fileUploadButton">
<span>Upload New Image</span>
<input type="file" name="image_file" accept="image/*" class="uploadInput">
</div>
<div class="fileUploadReq">
<p>Image Requirements:</p>
<ul>
<li>Format: .png, .jpg, .jpeg, .bmp, .tif, .tiff</li>
<li>Resolution: 650 x 383</li>
<li>Maximum size: 2.0 MB</li>
</ul>
</div>
</div>
<button type="button" class="marketUpdateButton" onclick="confirmUpdate('yield_curve');">Update</button>
JS
function confirmUpdate(name)
{
// Create a div element
var div = document.createElement('div');
// Give it an ID
div.id = 'preSubmitAlert';
// Create a child h2 tag
var h2 = document.createElement('h2');
h2.innerHTML = 'This is a permanent change';
// Create a child p tag
var pMessage = document.createElement('p');
pMessage.innerHTML = 'Did you double check the data? It is important the data is accurate before you submit it.';
// Create child input tags
var inputYes = document.createElement('input');
var inputNo = document.createElement('input');
// Set parameters for input tags
inputYes.type = 'submit';
inputYes.name = name + '_update';
inputYes.value = 'Yes. Update the data.';
inputYes.id = 'inputYes';
inputNo.type = 'button';
inputNo.value = 'No. Take me back, please.';
inputNo.id = 'inputNo';
// Append the children to
div.appendChild(h2);
div.appendChild(pMessage);
div.appendChild(inputYes);
div.appendChild(inputNo);
// Create the background for transparency (needed for IE8 support)
var bg_div = document.createElement('div');
bg_div.id = 'bg_div';
// Create a screen and append the above div to it
var screenDiv = document.createElement('div');
screenDiv.id = 'screenDiv';
// Appending div and bg_div to screenDiv
screenDiv.appendChild(div);
screenDiv.appendChild(bg_div);
// Appending screenDiv to the body tag
document.body.appendChild(screenDiv);
// This line needs a reference to the #screenDiv is, which is inserted in the DOM only in the above line.
inputNo.onclick = function(){destroyElement(document.getElementById('screenDiv'))};
inputYes.setAttribute('form', name + '_form');
}
Question
Why isn't the the <input type="submit" ...> not submitting the data when clicked?
Obs.: This piece of code works on every other browser, including higher versions of IE.
Thank you in advance.
Change this...
document.body.appendChild(screenDiv);
To this...
document.getElementById(name + '_form').appendChild(screenDiv);
I doubt very much that IE8 supports the HTML5 form attribute so you'll need to make the submit button a descendant of the form.
I can't find any official documentation on this though and I doubt anybody is going to the trouble of researching it properly.
I currently have a Preview of our form that looks exactly how we want it to look for the list item being viewed but the problem is when I added my Print button as CEWP in FOrm Display it performs the exact same function as using Control P and prints the entire page. See code.
<div style="text-align: center"><input onclick="window.print();return false;" type="button" value=" Print this page "/> </div>"
I want to add onto this to have it only print the form and no other content out side of the current view in the window and actually fill an 8.5 by 11.
Any ideas?
Inspired by this InfoPath print button, one solution would be to grab the contents of your CEWP and create a new window that only contains those.
var patt = /**your CEWP ID here***/g;
var alldivs = document.getElementsByTagName('div');
var printpageHTML = '';
for(var i=0; i<alldivs.length; i++){
if(patt.test(alldivs[i].id)){
printpageHTML = '<HTML><HEAD>\n' +
document.getElementsByTagName('HEAD')[0].innerHTML +
'</HEAD>\n<BODY>\n' +
alldivs[i].innerHTML.replace('inline-block','block') +
'\n</BODY></HTML>';
break;
}
}
var printWindow = window.open('','printWindow');
printWindow.document.open();
printWindow.document.write(printpageHTML);
printWindow.document.close();
printWindow.print();
printWindow.close();
Fixed: removed escaping for HTML characters.
Simple print functionality:
<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>
<script type="text/javascript">
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Set the print button to 'visible' again
//[Delete this line if you want it to stay hidden after printing]
printButton.style.visibility = 'visible';
}
</script>