I am working on a task where I need to select a text and click on a button, where a modal opens up and if we provide a url in the text box of the modal, it should wrap around the modal once it is closed.
case 'hyperlink':
let theCounter: any;
theCounter += 1;
let createA = document.createElement('a');
let createAText = document.createTextNode(theCounter);
createA.setAttribute('href', 'http://google.com');
createA.appendChild(createAText);
genElement = createA;
break;
This code is working fine if the text is selected and clicked on the button, but if I want make the url dynamic by using a bootstrap modal it is not working.
Any help will be appreciated.
Related
function createNewBoxes() {
var flexPicker = document.querySelector("#picked")
if(flexPicker) {
document.querySelector(".flexibility").insertAdjacentHTML('afterend','<div class="flexibility__content"><a class="flex-types"><div class="type-label">Some text</div></a></div>')
This is what I add to my modal. It works as I said on the first opening of the modal. But how do I get it to stick there?
I have an ID of the element you click to open the modal, guessing I have to add something to that?
Please only pure vanilla Javascript
I have two buttons. One for previewing CSS changes on a website and the other to save the changes. When I click the preview button it creates a temp css file and then redirects to a website in a new tab. If I go back to the original tab and click save it goes to the new website tab and does the save on that page and reloads as tab one. So I have two tabs that are same the page. How do I force the save to happen on the first tab and not happen on the second tab? Also if I click save before I preview it works as intended and happens in the same tab
One thing that makes this unique is that the buttons are created dynamically from the code behind
Button btnSubmit = new Button();
btnSubmit.Click += new EventHandler(btnSubmit_Click);
btnSubmit.CssClass = "layoutSettings_saveButton";
btnSubmit.Text = "Save";
btnSubmit.ID = "btnSubmit" + CatCount;
divPanelBody.Controls.Add(btnSubmit);
Button btnPreview = new Button();
btnPreview.Click += new EventHandler(btnPreview_Click);
btnPreview.CssClass = "layoutSettings_previewButton";
btnPreview.ID = "btnPreview" + CatCount;
btnPreview.Text = "Preview";
btnPreview.OnClientClick += "target ='_blank';";
divPanelBody.Controls.Add(btnPreview);
btnPreview_Click Does the redirect to the website
string navURL = "http://" + url + "/?preview=1";
Response.Redirect(navURL);
No Redirects for the btnSubmit_Click it just saves data and displays a message.
I am trying to load a DIV from another page, based on the data attribute of the button clicked. Here is what I have so far:
$('#quick_shop_modal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget)
var product = button.data('product')
var modal = $(this)
modal.find('.modal-title').text('Quick Shop ' + product)
$('#quick_modal_body').load('product #prodDescMain')
});
So when the modal is opened, it should use the product data attribute of the button to load the #prodDescMain div of that page.
Data attribute example: Leather_Care_Kit.php
which means the last line should read:
$('#quick_modal_body').load('Leather_Care_Kit.php #prodDescMain')
However nothing shows up. If I hard code the filename it works though?
product is a variable, so you use string concatenation:
$('#quick_modal_body').load(product + ' #prodDescMain')
I am trying to click a button in HtmlUnit to login to a site (m.pge.com) but it is not working. The browser stays on same page. I had similar issue with another site. I tried searching but didn't get a definitive answer.
Any ideas what I might be doing wrong ?
Here is code..
Web_Client = new WebClient(BrowserVersion.CHROME);
Web_Client.getOptions().setCssEnabled(false);
Web_Client.getOptions().setThrowExceptionOnScriptError(false);
Web_Client.setJavaScriptTimeout(15000);
Web_Client.getOptions().setRedirectEnabled(true);
//Web_Client.setAjaxController(new NicelyResynchronizingAjaxController());
// load home page
HtmlPage page = Web_Client.getPage("https://m.pge.com/#login");
HtmlTextInput userName = loginForm.getFirstByXPath("//*[#id=\"usernameField\"]");
HtmlPasswordInput passWord = loginForm.getFirstByXPath("//*[#id=\"passwordField\"]");
userName.setValueAttribute(user);
passWord.setValueAttribute(password);
HtmlButton button = null;
DomNodeList<DomElement> buttonList = page.getElementsByTagName("button");
for (Iterator buttonIter = buttonList.iterator(); buttonIter.hasNext();) {
DomElement domElement = (DomElement) buttonIter.next();
if(domElement.asText().equals("SIGN IN")) {
button = (HtmlButton)domElement;
}
}
loginpage = button.click();
It is too tedious and unclear to type in comment so i type it as answer and will update with progress.
Part1: login
The first thing is that are you sure you target the button correctly and where did you initialize the HtmlPage loginpage. Normally, when you assign
loginpage = button.click();
It will get you the login page,but sometimes it is weird that it doesn't assign new page but rather change the current page. that is your
page
You may try to print it out before button click and after button click to see if this page changes? that is
System.out.println(page.asText());
button.click(); // no need to assign page, if the page changes itself
System.out.println(page.asText());
Part2: Search
When you have done input textbox and button click, you will have to target the changes element after search again and get its content, for example, if it is a element, you should probably target the element after button click and get the content you want afterwards. If you target it before button click, the content in that element won't changes itself, you need to get that again.
I'm working with a javascript menu and need help hiding the menu after the user clicks a link in the child menu. The menu works well out of the box, except when the user clicks the back button on their browser it remains stuck open.
The code that hides the child menu:
divref.style.visibility = "hidden";
I think it needs to go in this section of code:
this.finishOpeningChild = function(divref, ulref, maxwidth) {
this.isChildMenuOpen = true;
this.isChildMenuClosed = false;
ulref.style.left = "0px";
divref.style.width = maxwidth + "px";
}
How do I make the browser look for the onClick scenario then call: divref.style.visibility = "hidden"; in this situation?
Not sure in what context this is all running, but perhaps you have a statement on the page which checks to see if the menu is open, and closes it if it is, this would happens on page load ... so if the user clicks the back button and ends up on the page the below check would run ...
if ('hidden' != divref.style.visibility) divref.style.visibility = 'hidden';