I am using Asp.Net/C# , I am having a requirement wherein I want to display a confirm before submission of data , if user clicks OK button , then proceed , or else cancel the submission.I know javascript confirm box does this , but in my case I need to show my own popup , Can anyone suggest me how can I achieve this.I would not want to use any plugin here.
Thanks for any suggestions.
you can create as follow:
function createPopup() {
//Get the data from the form fields
var background = document.custom.back.value;
var title = document.custom.title.value;
var text = document.custom.text.value;
//Now create the HTML code that is required to make the popup
var content = "<html><head><title>"+title+"</title></head>\
<body bgcolor='"+background+"'><h1>"+title+"</h1>"+text+"<br />\
<a href='javascript:window.close()'>Close the popup</a></body></html>";
//Create the popup
var popup = window.open("","window","resizeable,width=400,height=300");
popup.document.write(content); //Write content into it.
pops.document.close();
}
the logic should like as follow: i have not executed and tested just see the logic ignore minore mistakes if any.. also set the layout, border look like the confirmation window.
function popup() {
alert('popup called');
//Now create the HTML code that is required to make the popup
var content = "<html><head><title>ConfirmBox</title></head><body >Do you want to continue ? <br />
<input type='button' value='ok' onclick='return true'/>
<input type='button' value='cancel' onclick='return false'/> <a href='javascript:window.close()'>Close the popup</a></body></html>";
//Create the popup
var popup = window.open("","window","resizeable,width=400,height=300");
popup.document.write(content); //Write content into it.
pops.document.close();
}
refer http://www.openjs.com/tutorials/advanced_tutorial/popup.php
Related
The scenario is, I have this old application in html and javascript. The first page/form has a dropdown list, a search text field, a find button and a list view. When I enter something on the search field and click find, it invokes a javascirpt function which selects the items on the list view and goes to another page/form created by the javascript function displaying the items of the list view matched with the search and a back button. when back button is clicked it was supposed to go back to first form and display the selected items on the list view. It does work properly in IE11 but it is not working in chrome. Chrome goes back to page previous to the page with search text field, find button and list view. Same happens if I click on the chorme browser back button. Chrome version is 61.
Find code below:
<input type="button" value="Find" onclick="fndtxt(this.form)">
function fndtxt(lgrp)
{ var txt=lgrp.srchtxt.value
var stextgrp=txt.split(' ');
var seltxt='You Have Selected:<br>Start Date:\n';
var j=0,k=0;
var selfield=''
seltxt += lgrp.sdate.value+' and End date:'+lgrp.edate.value
seltxt += '<br>and Following Data Fields<br>'
for(k=0;k<document.inform.slist.length;k++){
// document.inform.slist.options[k].selected=false;
}
for(k=0;k<document.inform.slist.length;k++){
oname=document.inform.slist.options[k].text
var sfnd=0;
for(stxt in stextgrp){
re = new RegExp(stextgrp[stxt],'i' )
if( oname.search(re)!= -1 ){
sfnd++
}
}
if(stextgrp.length==sfnd){
document.inform.slist.options[k].selected=true;
seltxt=seltxt+oname+'<br>\n'
selfield +=oname.split(':')[0]+','
}
}
document.write("<html><body text='#F8B008' >");
document.write("<head><link rel=stylesheet type='text/css' href='/wqsys/include/wqsys.css' ></head>");
document.write("<br><br><table align=center text='#F8B008'><tr><td id=cel>");
document.write(seltxt);
// document.write(selfield)
document.write("<form name='getinfo' action='nocall.pl' method=get >")
document.write("<input type=hidden name=fname value='"+selfield+"'>")
document.write("</td></tr><tr><td align=center><input type=button id=expmenu value='Back' onclick='history.back(-1);'>")
document.write("</td></tr></table></form></body></html>")
document.close()
}
I have tried window.history.go(-1); return false; with no success.
Any help or suggestion is appreciated.
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 have a gallery with some images, and I have a link in each image to delete it:
<div class="galery">
echo '<ul>';
while ($result = $read->fetch(PDO::FETCH_ASSOC)){
echo '<li id="'.$result['id'].'">';
echo '<img src="'.$result['img'].'" />';
echo 'Delete';
echo '</li>';
}
echo '</ul>';
</div>
And then I have a jQuery script to delete my image using ajax:
I get my id of each image an then I have my ajax $.post:
var url = 'deleteImages.php';
$('.galery ul').on('click','.galerydel',function(){
var delid = $(this).attr('id');
$.post(url,{action:'del_images',image:delid},function(){
});
return false;
});
And then I have my php.file, where I get my image id $imageId = $_POST['image']; and action $_POST['action'];
and then I do my delete in my gallery table where id is = $imageId.
And this is working fine, but now I want to have a dialog message asking user if he have sure that wants to remove image,
so I have a div for a dialog like this:
<div class="delete_dialog">
<div class="delete">
<p>Do you really want to delete this image?</p>
Yes
No
</div>
</div>
And then I want to show this div when I click in my link to delete each image:
var url = 'deleteImages.php';
$('.galery ul').on('click','.galerydel',function(){
var delid = $(this).attr('id');
$('.delete_dialog').fadeIn("slow",function(){
('.delete').fadeIn("slow");
});
$.post(url,{action:'del_images',image:delid},function(){
});
return false;
}); ´
And now, when I click in my delete link Im open my dialog, but Im also removing my news without answer to my dialog.
Do you know how can I use my dialog, if I click in yes I do my delete, but If I click in no I just close my dialog?
Im reading about this for hours, and I just saw examples using jQuery dialog, and its easy because we can use buttons (yes and no).
And I also saw examples with if(confirm(Do you really want to delete this image?){my ajax here} and it is also easy to do.
But Im trying to do with my own dialog, and like this I really dont know how we can do this.
Can you please give me some help??
What Im trying:
var url = 'deleteImages.php';
$('.galery ul').on('click','.galerydel',function(){
var delid = $(this).attr('id');
$('.delete_dialog').fadeIn("slow",function(){
('.delete').fadeIn("slow");
});
$("a#delete").click(function(){
$('.galerry ul li[id="'+ delid +'"]').css('background','red');
$.post(url,{action:'del_images',image:delid},function(){
window.setTimeout(function(){
$('.galery ul li[id="'+ delid +'"]').fadeOut("slow");
},500);
$('.delete').fadeOut("fast",function(){
$('.delete_dialog').fadeOut("fast");
});
});
$("a#toggleDialog").click(function(){
$('.delete').fadeOut("fast",function(){
$('.delete_dialog').fadeOut("fast");
});
});
});
Add some identificators to you "Yes/No" links (ids, attributes or something else):
<div class="delete_dialog">
<div class="delete">
<p>Do you really want to delete this image?</p>
Yes
No
</div>
</div>
Add handler to links like:
$("a#delete").click(function(){
//your post method
});
$("a#toggleDialog").click(function(){
//hide dialog
});
Change your open dialog handler to show dialog only:
$('.galery ul').on('click','.galerydel',function(){
var delid = $(this).attr('id');
$('.delete_dialog').fadeIn("slow",function(){
('.delete').fadeIn("slow");
});
});
P.S. also you should pass the delid variable to "Yes" handler.
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>
I'm new to develop web apps, I'm creating a mini project which has a simple signup, signing system, I don't want user to go to a different page to login, instead I have used a bootstrap modal which has a login form for which I have a button that on click also changes the url and also triggers the modal. Now I only want to show the modal, if url has parameter = ?action=login.
Firstly, I have tried document.getElementById('#myBtn').addEventListener('click', setQry) to my button which calls the function which on click changes the url parameter. The url parameter changes on click really fine, but the modal does not show up, please note that I have data-target and data-toggle attributes on my button for the modal to show. I have also tried this example. But its not working.
I just want to achieve that modal should show up, if url has the parameter
and on login success I want to hide the modal and also delete the url parameter.
Here's my HTML:
<button type='button' id='toggle-modal' data-toggle='modal' data-target='#login-modal'></button>
My JavaScript:
document.getElementById('#toggle-modal').addEventListener('click', setQry);
function setQry() {
const url = new URL('http://localhost/learning%20php/practice%20programs/login%20system/');
var qry_params = new URLSearchParams(url.search);
if (!qry_params.has('action', 'login')) {
qry_params.set('action', 'login');
window.location.search = qry_params;
}
if (window.location.search == qry_params) {
$('#login-modal').modal('show');
}
};
This code should work, your handler only fires on click, it doesn't have effect on page load, for this reason, it should be called to handle parameters on a page loading, sorry for my bad english
setQry();
function setQry() {
const url = new URL('http://localhost/learning%20php/practice%20programs/login%20system/');
var qry_params = new URLSearchParams(url.search);
if (!qry_params.has('action', 'login')) {
qry_params.set('action', 'login');
window.location.search = qry_params;
}
if (window.location.search == qry_params) {
$('#login-modal').modal('show');
}
};
Consider using PHP for that. You can get the GET Params in PHP and then change the content dependent on the get parameters.
<?php
if ($_GET['action'] == "login")
{
?>
<!-- Add content in html if action code is set to "login" -->
<?php
}
else
{
....
}
?>
The event is called twice when the button is clicked. so I have remove other attributes from button.
<button type='button' id='toggle-modal' ></button>
the # used in document.getElementById('#toggle-modal').addEventListener('click', setQry); is also creating the issue.
setting parameters in javascript qry_params.set('action', 'login'); is refreshing the page. so the popup gets close.
so the update code is given below hope it will resolve the issue
``'`
<button type='button' id='toggle-modal' ></button>
<script>
document.getElementById('toggle-modal').addEventListener('click', setQry);
function setQry() {
const url = new URL('http://localhost/learning%20php/practice%20programs/login%20system/?action=login');
var qry_params = new URLSearchParams(url.search);
if (window.location.search.replace("?", "") == qry_params) {
$('#login-modal').modal('show');
}
}; </script>