JavaScript button to render a partial view - javascript

I'm trying to break my problem down to the smallest possible example, so I've ended up with this:
I have a button in my html home page:
<button type="button" onclick="myFunction1()">Render Partial View</button>
<div id="demo1">PartialViewGoesHere</div>
And in my custom js I have the function:
function myFunction1()
{
document.getElementById("demo1").innerHTML = "";
}
I'd like the innerHTML to become a partial view / html string, but I don't know how to get the partial view HTML in to the string ""
After this, I'll be trying to include variables to the button click but I just wondered if this method is even possible.

Related

ASP.net Core Razor Pages - Get HTML of a specified div in Code-Behind

I am trying to get a specified div on my page in code-behind to convert the html to rtf using HtmlToOpenXml.
At this stage I have a hidden textarea/input to save the html into a Request I can use in the code-behind. But either way using javascript to set the text inside of the textarea/input sets some weird whitespaces, which get converted to the OpenXML as well.
So basically I am wondering how to get the content of a specific div-Tag in code-behind, so the converter can use the html.
For everyone wondering why I need that: I am using TinyMCE for the user to generate the basic design of a document, which contains lists of sentences with dropdowns and inputs which will get filled on using the tool. These entries get pasted into the div and should render as text on download and not as dropdowns or inputs.
Thanks in advance.
You can get the specific html by using $("#divname").get(0).outerHTML; and then post it to server side:
<div id="thisdiv"> //will get div by this id
<div>Hello</div>
</div>
<input type="button" id="btn1" value="Send" onclick="SendDiv()" />
#section Scripts
{
<script>
function SendDiv() {
var divhtml = $("#thisdiv").get(0).outerHTML;
$.ajax({
url: "your path",
data: { mydiv: divhtml },
method: 'POST'
});
}
</script>
}
Result:

Using onclick with a partial HTML button

When using onclick in the markup without using a partial HTML element, the onclick function works, but when using the exact same markup in a partial, it does not execute the onclick function
Question: Is there a way to get the onclick function to work using a partial HTML element, or do you have to write the markup normally?
This is my partial Submit button:
<input type="submit" value="Submit" class="button1" />
This is where is my JavaScript Confirm function:
function Confirm(message, okayMessage, cancelMessage) {
var result = confirm(message);
if (result == true) {
alert(okayMessage);
} else {
alert(cancelMessage);
}
}
This is where I call the onclick function where I use the partial button and Confirm script:
<partial name="_SubmitButton" onclick="Confirm('Are you sure you want to delete this skill?', 'Skill has been deleted', 'Skill was NOT deleted')" />
This is the link at the bottom of my markup to the stylesheet (It definitely works):
#section Scripts{
<script type="text/javascript" src="~/js/Popups.js"></script>
}
Partial tag helper is for server side code execution, so it does not recognize Confirm function from frontend.
Hi its all because of our old friend DOM.
Say when you have a partial page like this it will be loaded with the main page and will be binded with the DOM only after that your partial view would be loaded.
This all happens because your partial button is not binded with DOM.
Just do one thing open your console in browser and try to getElementByName('_SubmitButton');
You will get undefined the best option would be place your js inside partial page itself then i guess it should work
and also if you put it inside
#section Scripts{
<script type="text/javascript" src="~/js/Popups.js"></script>
}

PHP Redirect breaking iframe communication with parent

Can't seem to find anyone to figure this out. Just trying to get <iframe> BTN to talk to parent.
Simple problem, need to get a button inside an <iframe> to call function on main.html.
The setup is as follows:
main.html has <iframe> with products.php inside.
Products.php has button that loads confirmation.php
Confirmation.php has the BUTTON we need to call function on parent.
all files are on the same server/domain
The traditional method of button inside products.php changing src on main to confirmation.php works as expected.
The problem is happening here: On products.php the way it loads the confirmation page is with this:
private $base_url = "https://xxxxxxxx.com/";
$returnURL = $this->base_url . "confirmation.php";
Products page <form> submission calls this PHP. This action is somehow embedding the confirmation page, or appending it in a way it can't communicate with parent.
Button & function on confirmation.php:
<button type="button" onClick="test()">BACK</button>
<script>
function test() {
parent.mainTest();
}
</script>
All of the below have been tested in confirmation page func and failed.
parent.mainTest();
window.parent.mainTest();
document.parent.mainTest();
parent.document.getElementById('iframe1_id').src = "iframeTest.php";
window.parent.frames["iframe1"]
Script on main.html:
<script>
function test (){
alert("Worked");
}
</script>
<iframe src="products.php" id="iframe1_id" name="iframe1"></iframe>

Asp.net:show loading image before page loads for the first time

i am trying to display a loading image when the page is loading.Here is my code.
<body onunload="doHourglass();" onbeforeunload="doHourglass();" onload="setTimeout('show()',2000);">
<div id="divWait" style="display:none" >
<h1>wait...</h1>
</div>
<div id="main" style="display:none">
<asp:Button ID="btnHidden" runat="server" OnClick="code behind handler"
<div/>
<script>
function doHourglass()
{
console.log("inside dohour glass");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="0";
divwait.style.zIndex="1";
divwait.style.display='inline';
divmainpage.style.display='none';
setTimeout("show()",2000);
}
function show()
{
console.log("inside show");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="1";
divwait.style.zIndex="0";
divwait.style.display='none';
divmainpage.style.display='inline';
}
</script>
</body>
Problem is, it is not working when the page is loading for the first time.when i checked using console.log() i see for the first time control is not going inside doHourGlass() function.but for button click event it is working perfectly.
Things i tried:checked this link on SO, but i am not putting static html.I am trying to get the id of an html element and then working on that element so i can not use that solution.
Edit:one way i found is to keep divwait visible and hide main division then show main div when the page loads.but this way i can only display static html.i want to be able to call a function when page is loading for first time.
what is happening?is there a way to achieve it?please guide me.

YUI3 button click event is acting like a submit type instead of a button type

I am using ASP.NET MVC 3 with the Yahoo API version 3. I am trying to get my YUI3 button to redirect to another page when I click on it, this button is my cancel button. The cancel button is a plain button type, but it is being treated like a submit button. It is not redirecting to the correct page, but acting like a submit button and it kicks off my page validation like what the submit button would do.
I thought that it might be with my HTML but I did validate it. It validated 100% correct. So I then stripped down the whole page to a bare minimum but the cancel button is still working like a submit button. Here is my HTML markup:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Create2</title>
</head>
<body class="yui3-skin-sam">
<h1>Test submit</h1>
#using (Html.BeginForm())
{
<button id="SaveButton" type="submit">Save</button>
<button id="CancelButton" type="button">Cancel</button>
}
<script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script>
<script>
YUI().use('button', function (Y) {
var saveButton = new Y.Button({
srcNode: '#SaveButton'
}).render();
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();
});
</script>
</body>
</html>
I'm not sure what I am doing wrong here? Is this maybe a bug in their API? I am testing on IE8 and on the latest version of FireFox.
UPDATE:
I forgot to mention that if these buttons are not between form tags then the redirect works fine. If I put them in form tags then the redirect does not work.
I would use a link because you are redirecting to another page. Doing it this way you wouldn't need to initialize it with javascript or register the onClick listener.
<button id="SaveButton" type="submit">Save</button>
<a id="CancelButton" href='/Administration/Department/List'>Cancel</a>
Look at this link to style your link: http://yuilibrary.com/yui/docs/button/cssbutton.html
The Y.Button widget is removing the type attribute from the Cancel button. This makes that button behave like a submit button.
There are many possible paths to make this work. I'll start from simple to complex. The first is to avoid the issue entirely and not use JavaScript at all. Just use a link:
<form action="/Administration/Department/Create2" method="post">
<button class="yui3-button">Save</button>
<a class="yui3-button" href="/Administration/Department/List">Cancel</a>
</form>
After all, all that the Button widget is doing is adding a couple of css classes to each tag and a lot of other stuff that makes more complex widgets possible. As you can see in the Styling elements with cssbutton example, even <a> tags can look like nice buttons using just the YUI css styles. If you don't have to use JavaScript, better not to use it.
A second option is to avoid the Y.Button widget and use the Y.Plugin.Button plugin. It's more lightweight in both kb and processing power. And it doesn't touch the tag attributes, so your location code will work.
YUI().use('button-plugin', function (Y) {
Y.all('button').plug(Y.Plugin.Button);
Y.one('#CancelButton').on('click', function () {
Y.config.win.location = '/Administration/Department/List';
});
});
And finally you can hack around the behavior of the Y.Button widget by preventing the default action of the button:
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
e.preventDefault();
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();

Categories