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>
}
Related
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.
I have jsf code
<p:commandButton action="#{reporting.downloadPaymentsReport}" value="Скачать" ajax="false"/>
Is there way to make same button on js?(without creating rest on server-side)
If I understand correctly, you want to make your button call a JSF controller function and a JS function?
You could use the oncomplete attribute like this:
<p:commandButton id="buttonExample"
actionListener="#{reporting.downloadPaymentsReport}"
oncomplete="jsFunction()"
value="Скачать"
/>
(At our project we mostly use actionListener, no specific other reason I changed action to actionListener)
An example JS function:
function jsFunction() {
console.log('test');
}
Put that function in a .js file and import in your xhtml page:
<script type="text/javascript" src="path/to/jsFile.js" />
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>
I have an old JSP page in my project. I need to include this page into my new page, where my new UI side is complete EmberJS.
Things that I have tried
I got the rendered HTML from JSP using an ajax call and try to render with {{{ var }}} handlebar, But there are lots of scripts inside the page. They are not getting parsed or executed.
How can I load the page into an iframe? The page is POST type.
You can create a hidden form that point the target to the iframe, then trigger the click() event on the hidden submit button when document loaded.
For Example
<form action="YOUR_JSP_URL" method="post" target="myIframe">
<input id="postToIframeBtn" style="display: none" type="submit" value=" " />
</form>
<iframe name="myIframe" src=""></iframe>
<script>
document.getElementById("postToIframeBtn").click();
</script>
Short answer, try to insert them into DOM inside components didInsertElement hook using jQuery.
Do not use {{{}}} it only work with HTML inserting.
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();