I know that plenty of similar questions can be found here but none of them could help me with my problem.
What the client wants: click on a button, then open a new window with given parameters and show a view with dynamic data loaded from database.
What I have done so far:
I have a view with links, not buttons:
<a th:href="#{/report/reportPrintView(al=false, mlVersion=${report.version}, sv=true, id=${report.orderId})}" target="_blank">Protokoll</a>
<a th:href="#{/report/reportPrintView(al=true, mlVersion=${report.version}, sv=false, id=${report.orderId})}" target="_blank">Airline</a>
and a controller which is called by the GET request:
#GetMapping("/report/reportPrintView")
public String showReportPrint(#RequestParam("al") boolean al, #RequestParam("mlVersion") String mlVersion, #RequestParam("sv") boolean sv, #RequestParam("id") String id, Model model) {
........ do some magic .......
return "/report/reportPrintView";
}
The view is displayed in a new browser tab and works as expected, but as said before, the client wants a new window.
To get a solution for the clients wishes I tried something like this:
function openWin(id, mlVersion, al, sv) {
var url = "/report/reportPrintView.html?al=" + al + "&mlVersion=" + mlVersion + "&sv=" + sv + "&id=" + id;
ReportPrintPreview = window.open("about:blank", "ReportPrintPreview", "width=666,height=700left=250,top=50,dependent=yes,menubar=no,status=no,resizable=yes,toolbar=no,scrollbars=yes");
ReportPrintPreview.location.href = url;
ReportPrintPreview.focus();
return false;
}
.
.
.
<button th:onclick="'openWin(\'' + ${report.orderId} + '\', \'' + ${report.version} + '\', false, true)'">Protokoll</button>
<button th:onclick="'openWin(\'' + ${report.orderId} + '\', \'' + ${report.version} + '\', true, false)'">Airline</button>
What happens here is that a new window is opened with a 404 error and the web page with the button shows a 400 error. So I assume that the controller doesn't get the GET request and cannot show the view (as is a reasonable result because it's not a Thymeleaf call like #{/report/....}).
Is there any way to get this running?
This is how I would structure that.
JavaScript
function openWin(url) {
ReportPrintPreview = window.open("about:blank", "ReportPrintPreview", "width=666,height=700left=250,top=50,dependent=yes,menubar=no,status=no,resizable=yes,toolbar=no,scrollbars=yes");
ReportPrintPreview.location.href = url;
ReportPrintPreview.focus();
return false;
}
Thymeleaf
<button
th:data-url="#{/report/reportPrintView(al=false, mlVersion=${report.version}, sv=true, id=${report.orderId})}"
onclick="openWin(this.getAttribute('data-url'))">Protokoll</button>
<button
th:data-url="#{/report/reportPrintView(al=true, mlVersion=${report.version}, sv=false, id=${report.orderId})}"
onclick="openWin(this.getAttribute('data-url'))">Airline</button>
For thymeleaf it works in different way. try below.
th:target="_blank"
Related
This is in reference to dynamically change options in a list by another list. Unfortunately, it all works except if the project name has a " or a #. Eg. Project name: '10" Centerline #3 Pipe'
I am a newbie to this and I have been cut/paste (learning) as I go along. If someone can help, it will be great. I am seen some things about escaping and encoding URI stuff but not sure where to put it in. The other problem is just understanding what happens past the onchange event.
I can get the list of project names from a previous list and it shows up in my HTML page. However, when I select the choices that have a ( " ) or a ( # ), the next populated list breaks.
Thanks in advance. I really, really appreciate the time if someone puts in a response.
Here is the javascript portion:
project_name_select.onchange = function(){
project_name = project_name_select.value;
fetch('/sr/new/project/' + project_name).then(function(response){
response.json().then(function(data) {
var areaHTML = '<option value="See List">Select Area</option>';
for (var state of data.project_area) {
areaHTML += '<option value="' + state.project_area + '">' + state.project_area + '</option>'
}
project_area_select.innerHTML = areaHTML;
});
});
}
Here is the flask portion:
#surveys.route("/sr/new/project/<get_project_name>")
def project(get_project_name):
project_dict, dict_type = choice_project_dict(get_project_name)
project_areaArray = []
for proj in project_dict:
ownerObj = {}
ownerObj['id'] = proj['company_name']
ownerObj['owner_company'] = proj['company_name']
ownerArray.append(ownerObj)
return jsonify({'project_area': project_areaArray})
Inside my content.js I am writting a new HTML page with a pre polulated form, which contains var a and var b. Those 2 variables are created before, inside content.js, so I can easily use them inside my HTML page. Now I want to override those variables a and b as the user finishes editing the form and presses the button Accept. Is there anyway I can achieve this?
This is a part of the code
var a="FName";
var b="LName";
var myWindow = window.open("Accept", "myWindow", "width=450, height=300");
myWindow.document.write(
"<html>"+
"<head>"+
'<script> function closeWindow(){ var x = document.getElementById("firstname").value alert(x); window.close();}'+
"</script>"+
"</head>"+
"<body>"+
"<form>"+
"<div id=leadinformation>"+
"<p id=titleParagraph>You are about to create a new Lead:</p>"+
"First Name....."+ "<input type=text id=firstname value="+a+">" +"<br>"+
"Last Name....."+ "<input type=text id=lastname value="+b+">" +
"</div>"+
"<div>"+
"<button id=Accept onClick=closeWindow() >Accept</button>"+
"<button id=Close onClick=closeWindow() >Close</button>"+
"</div>"+
"</form>"+
"</body>"+
"<html>"
);
myWindow.document.getElementById('Accept').onclick=Accept;
myWindow.document.getElementById('Close').onclick=Close;
function Accept(){
alert(myWindow.document.getElementById('firstname').innerText);
}
function Close() {//do smthing
}
Sorry for bad formating.
Currently the output of the Accept(); is empty at the moment. How can I get first name input result?
What I want to achieve:
1) I am creating a button on a page
2) When I click on the button a new html page pops out (the one that I am hardcode writing it)
3) I pre populate the form with some variables that I created before
4) When Clicking The Accept button on the form the Accept() function is triggered where I would want to use those input values the user has written.
This should help you: Sharing global javascript variable of a page (...).
The question is about "How to share a variable to another page in an iframe", but this works for a new windows as well.
i.e.:
myWindow.document.write(
"<html>" +
"<head>" +
'<script>' +
'function closeWindow(){' +
'var x = document.getElementById("firstname").value;' +
'alert(x);' +
'// do something to parent.a and parent.b here, just because you can:' +
'parent.a = "Oh, would you look at it, it works!";' +
'parent.b = "And it is so pretty too!";' +
'window.close();' +
'}' +
"</script>" +
"</head>" +
" Your body code here, etc " +
"</html>"
);
Also, please note that your code lacks a semicolon (;) after inserting value to var x in your new window's JavaScript code. That will most probably make your code malfunction. The closing </html> tag lacks the slash, but I don't know if that's gonna break anything; you'd better fix that as well, just in case.
In the C# backend code for a website, I have the following code that displays a message for the user, enumerating the data they are about to submit, and asking for human-confirmation that the information appears accurate.
This is executed within C#, not within JavaScript, so how can I access the result of the confirm function?
My C# logic needs to follow a different path if they click OK, versus if they click Cancel.
I'm working on a very old application (13 years), that has been untouched for quite some time.
As a result, I don't have the ability to alter the general design of the application.
ClientScript.RegisterStartupScript(this.GetType(), "InvalidEntrySubTypeAlert", "confirm('" +
"Are you sure you want to create the following deal?\n" +
"\nDeal ID :\t\t\t" + nDealID +
"\nCompany Name :\t\t" + txtCompanyName.Text +
"\nEntry Subject :\t\t" + txtEntrySubject.Text +
"\nBusiness Lead :\t\t" + ddlBusinessLead.SelectedItem.Text +
"\nLicense Status :\t\t" + ddlLicenseStatus.SelectedItem.Text +
"\nEffective Date :\t\t" + string.Format("{0:MM/dd/yyyy}", calEffectiveDate.SelectedDate) +
"\nExpiration Date :\t\t" + string.Format("{0:MM/dd/yyyy}", calExpirationDate.SelectedDate) +
"\nLicense Location :\t\t" + txtLicenseLocation.Text +
"\nEntry Sub Type :\t\t" + ddlEntrySubType.SelectedItem.Text.Split(' ')[0]
+ "');", true);
You can use a HiddenField to set the value from the client side and then access it on the Server.
Here is a mockup
<asp:HiddenField ID="hndSetFromJS" runat="server"></asp:HiddenField>
And set the value like this
document.getElementById("#<%= hndSetFromJS.ClientID %>").value = "yourValue";
or
$("#<%= hndSetFromJS.ClientID %>").val("yourValue"); // Jquery
I think I would call a page method (a method in the code behind marked with webmethod attribute) from client side or use ajax to call a web service.
Since the confirm action is executed client side there's no direct link to your server side cide
You can create 2 functions in client side
function functionOK()
{
//some code
}
function functionCancel()
{
//some code
}
and change your code like this
ClientScript.RegisterStartupScript(this.GetType(), "InvalidEntrySubTypeAlert", "if(confirm('" +
"Are you sure you want to create the following deal?\n" +
"\nDeal ID :\t\t\t" + nDealID +
"\nCompany Name :\t\t" + txtCompanyName.Text +
"\nEntry Subject :\t\t" + txtEntrySubject.Text +
"\nBusiness Lead :\t\t" + ddlBusinessLead.SelectedItem.Text +
"\nLicense Status :\t\t" + ddlLicenseStatus.SelectedItem.Text +
"\nEffective Date :\t\t" + string.Format("{0:MM/dd/yyyy}", calEffectiveDate.SelectedDate) +
"\nExpiration Date :\t\t" + string.Format("{0:MM/dd/yyyy}", calExpirationDate.SelectedDate) +
"\nLicense Location :\t\t" + txtLicenseLocation.Text +
"\nEntry Sub Type :\t\t" + ddlEntrySubType.SelectedItem.Text.Split(' ')[0]
+ "')){ functionOK();} else{functionCancel()}", true);
I am struggling to insert a link with a FB Share.
The link is calling a JS. JS opens a popup and my image is missing.
I have 2 options:
1. sharer.php
2. API?
1: THIS IS NOT SHOWING MY PHOTO!!!
function fbs_click(id, photo) {
var adv_url = encodeURIComponent("https://www.bikesquare.com.au/product/detail?advertiseId=" + "e77180f8439fe2810143be28c40e000e");
var photo_url = encodeURIComponent("https://www.bikesquare.com.au/resources/IMG_0554.JPG"); //THIS IS A REAL IMAGE - ONLY FOR TEST!!!
var new_url="https://www.facebook.com/sharer.php?s=100";
new_url += "&p[url]=" + adv_url;
new_url +="&p[images][0]=" + photo_url;
new_url +="&p[summary]=TEST";
new_url +="&p[title]=TITLE";
window.open(new_url, 'Share on FaceBook', 'left=20,top=20,width=550,height=400,toolbar=0,menubar=0,scrollbars=0,location=0,resizable=1');
return false; //FOR TEST ONLY
}
2: THIS IS SHOWING MY PHOTO, BUT ONLY I CAN SHARE!! Other FB accounts CANNOT
var url = 'https://www.facebook.com/dialog/feed?app_id=[MY SECRET API ID]&link=' +
encodeURIComponent('https://www.bikesquare.com.au/product/detail? advertiseId=') + id +
'&picture=' + encodeURIComponent(photo_url) +
'&name=' + encodeURIComponent('BikeSquare Advertise') +
'&redirect_uri=' + encodeURIComponent('https://www.bikesquare.com.au/');
window.open(url, 'Share on FaceBook', 'left=20,top=20,width=550,height=400,toolbar=0,menubar=0,scrollbars=0,location=0,resizable=1');
As you can see ladies and gentlemen, I have 2 options. Opt 1 not showing photo. Opt 2 requires a APP ID from FB DEV but only I can share it (photo looks good). Other accounts cannot...
What am I missing here?
started to use FB API method and discovered that was on DEV MODE not on public mode...
I finally got my back-end to create the wheel codes from the checked taxonomies in the add custom post admin area.
Now, I want to add that tire code to the wheel_type taxonomy.
The below code ran great, until I added the if statement under //Add code to Taxonomy
Now nothing is working, but I get nothing in the error console.
I figure it must be a stupid syntax mistake - can anyone help me out?
Or am I missing something else?
jQuery('#replace').click(function(){
//get tire code and name
var code = jQuery('input[name="tire_code"]').val();
var name = jQuery('input[name="tire_name"]').val();
var bname = jQuery('input[name="tire_bname"]').val();
alert(code + " + " + name + " + " + bname);
//get tire brand
var tirebran = jQuery('#tire_brandchecklist').find(":checked").parent('label').text();
tirebran = jQuery.trim( tirebran );
//Add code to Taxonomy
if( term_exists( code, wheel_type ){
continue;
}
else
{
wp_insert_term( code, wheel_type );
}
//update title
var title = code + ' : ' + name + ' tires';
if(tirebran!=''){
title += ' with ' + bname + ' letters';
}
jQuery('input[name="post_title"]').focus().val(title);
});
//-->
</script>
unless i've misunderstood your question, you're trying to call wordpress methods via javascript.
term_exists() and wp_insert_term() are PHP methods within the wordpress code, not accessible directly via Javascript (unless you have written interfaces to them).
continue doesn't make any sense there; just check for !term_exists... and call wp_insert_term when it doesn't exist.
if (!term_exists(code, wheel_type)) {
wp_insert_term(code, wheel_type);
}
The continue statement is for continuing loops from the top of the loop; it does not stand on its own.