I am trying to create a Javascript function to display a dynamic confirmation message, that will appear on a confirm.html page. It needs to be in an external Javascript file so that it can be used on a variety of pages. I've tried a variety of things but I just cant quite get it to work correctly. I'm trying to do it with only Javascript.
This is what I have currently, after doing some research
This is button I'm using to call the function
<input type="button" value="Remove" onclick="dynamicMessage('This product has been deleted')">
and the current function I'm using is
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_self");
test.document.write("test");
test.document.close();
}
Obviously, the dynamic content isn't added in yet, but if my thinking is correct, it should just be adding the argument somewhere in the long string of html I need to add to create the page. The "test is just do see what happens when calling the function.
What I want it to do is, write the "test" to the new window of confirm.html, but instead it overwrites the current window. But if I only call window.open, it opens to the correct window. It is the document.write part that is throwing me off.
I'm not sure if I'm far off base on my thinking, or if its just a simple mistake I'm missing after hours of looking at this code. Any Ideas?
I think I need to clarify what I am trying to do. I am trying to click a button, in this case a remove button, then open up the page confirm.html, edit the content in confirm.html with the argument, and have the current page now be confirm.html. What currently happens is one of two things either the current document is edited if the "_self" tag is placed, or the html page is open and thus an about_blank url.
Hope i understood your question | DEMO
Since you are using document.write method it will overwrite contents of your html page
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_blank");
test.document.write(argument);
setTimeout(function(){test.close()},2000); // after 2 sec it will close
}
Related
I'm using cefsharp and vb.net to put some code together to move to the next page of this site:
https://www.recommendedagencies.com/search#{}
The idea is to read the list of company names on each page and store to a csv file. This part I can do.
The problem I have is that I can't find the name of the 'Next' button - presumably if I had that I could execute some javascript on the browser to press the button.
I've inspected the page in Firefox, but can't see any name I can use - I'm not really familiar enough with html/page design to know why not or how it works.
Could anyone tell me a good method to get button names from a web page? - I've done some searching and even asked a similar question myself before, but I can't find anything which helps, given my patchy knowledge.
Thanks
Inspect the DOM for the 'Next' button.
Look for id's or classes that you can use to identify it.
use document.querySelector() to find the element by the css selector
call the element.click() function to programatically press next
const nextButton = document.querySelector('.sp-pages-nav_next')
nextButton.addEventListener('click', (event) => {
console.log('something clicked next')
})
nextButton.click()
<div class="sp-pages-nav sp-pages-nav_next" data-reactid=".1.3.4.1">Next</div>
In the above snippet on load you can see the code nextButton.click() invokes the console log. You can click the word Next manually to the same effect.
in cefsharp perhaps something like:
browser.ExecuteJavaScriptAsync("(function(){ document.querySelector('.sp-pages-nav_next').click(); })();");
A very similar example can be found here :
https://github.com/cefsharp/CefSharp/wiki/General-Usage#1-how-do-you-call-a-javascript-method-from-net
// When executing multiple statements, group them together in an IIFE
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
// For Google.com pre-populate the search text box and click the search button
browser.ExecuteJavaScriptAsync("(function(){ document.getElementsByName('q')[0].value = 'CefSharp Was Here!'; document.getElementsByName('btnK')[0].click(); })();");
I've made a search bar in my web page and I'm trying to get the user input and compare it to a keyword. If it matches, show the user what he is searching for in another page.
The problem is that I don't know how to switch between pages of the HTML using JavaScript (being in page1.html and then take the user to page2.html if the keyword matches).
I've tried to implement href to a function and then running it when the search button is pressed but I haven't found a way to do it.
Here is the code:
<script>
let search = getElementById("Search").value;
if (search == "Keyword") {
//a href="page2.html" - (this is was my main idea, but i haven't found a way to implement it correctly)
}
</script>
First, you have to get the value from the input that you create and then you have to compare between the value that you get it and the specific keyword that you want, and after that, you have to create a button to submit with it. Then you can try this line
window.location.href=“./Page2.htm”;
inside if condetion.
try with:
window.location.href=“./Page2.htm”;
You can use
window.open(stringURL);
to open the html in a new window.
To open a new tab:
window.open(stringURL, “_blank”);
For more info: https://developer.mozilla.org/en-US/docs/Web/API/Window/open
The code below saves data entered in textarea using saveFieldData().I want to use a Delete Button as a bookmarklet which will make this field blank and save the same in the server.
<textarea rows="4" cols="49" name="Synonym" id="Synonym" onchange="saveFieldData(85261, this, 'docProductInfo', 'Synonym', 84796);"></textarea>
So here is my bookmarklet
javascript:(function(){var sy=document.getElementById("Synonym");sy.value="";saveFieldData(85261,sy, 'docProductInfo', 'Synonym', 84796);})();
It deletes the data perfectly but the problem is whenever the page reloads it assigns some new values as function parameters as a result my code fails to work.For example after page reloads the function parameter changes like this
saveFieldData(85261, this, 'docProductInfo', 'Synonym', 84789);
basically the last parameter changes.So,Is there any way so that my bookmarklet will detect that parameter automatically and delete that field successfully?
If you just need to invoke the onchange handler you don't need to know it's parameters:
var sy=document.getElementById("Synonym");
var fn=sy.onchange;
sy.value="";
fn.call(sy);
Or more simply, since the onchange handler doesn't use any this within it:
fn();
Without knowing more about your page, I can't give you an ideal answer. There could easily be a better way, but based only on what you have shown, the only answer I see is to use a regular expression something like this:
sy = document.getElementById("Synonym");
id = sy.onchange.toString().match(/saveFieldData\(.+?,.+?,.+?,.+?,\s*(\d+)\)/)[1];
I managed to get some js to work to my surprise, now I want to make it a little more complex which is way out of my expertise.
I have a button when clicked will reload a iframe that is on my page. I have multiple iframes all but 1 are hidden. Then I use jquery to display a different iframe and hidden the previous depending on the nav button clicked. e.g. "1-btn" (nav btn) tied to "1-win" (iframe), "2-btn" (nav btn) tied to "2-win" (iframe) etc. So when you click "2-btn", "1-win" iframe hides and "2-win" iframe is displayed. Now I want to change my code so this ties into my reload javasrcipt. Currently, my js only reloads 1 iframe via the iframe id. I want to change this id every time to a different iframe. This will allow my Reload btn to only reload the current iframe displayed and not any of the other that are hidden.
Here is my Reload js
function Reload () {
var f = document.getElementById('1-win');
f.src = f.src;
}
As you can see this reload script only works for iframe "1-win". When i click "2-btn" nav to display "2-win" iframe (and hides "1-win") the reload button still only works for "1-win". Therefore, I want it to also change. For e.g. when I click "2-btn" (nav) to display "2-win" iframe I want to change the Reload id to "2-win" also.
I was thinking of using onClick within my nav buttons which passed through the id of the iframe which that nav btn is tied to. However, I have no idea how to do this.
For full code see:
https://github.com/tmacka88/Service-Manager
Sorry if this doesn't make any sense, I cant think of an easier way to explain it.
Thanks
EDIT
This below answer may or may not still apply now that the problem has been better defined.
One approach you could try is having a hidden field on the page which contains a semi-colon separated list of the Id's of the iframes. E.g.
<input type="hidden" name="iframeids" value="1;2;3;4;5">
On the click event of your button, call some JavaScript which gets the value of the hidden field, takes the first token before the semicolon, and then reorganise the string. An example:
// Next value is 1
// Use 1 in your JS
// Put 1 to the end, next is now 2
<input type="hidden" name="iframeids" value="2;3;4;5;1">
You would contain the logic of re-arranging etc. in the JS function.
Now that the problem is better defined, we can work out a proper solution.
Here are some design considerations:
Ideally you do not want to manually add a new button for every iframe that you put on the page. Main reason being code maintenance. If you were to add a new iframe, or remove one, your code would not function correctly. Also the amount of mark-up required will be unnecessarily high
jQuery will make your life easier, although it's not required, it will cut out a lot of code. I can't stress enough the importance of knowing JavaScript basics first, but this is your responsibility to learn
For point 1, what we would like is a generic solution so that if you add more iframes, the buttons are added automatically. JavaScript is the way to do this (I'm assuming this is just HTML, not ASP.net or php or some other server side
Point 2 - jQuery will help with point 1.
Now we have this understanding, let's look at an outline of what we need to do:
In JavaScript, loop through the iframe tags on the page
For each iframe, generate a button using jquery, using the values like src and id in the iframe as attributes on the button
Add some click-event code to the button do define what it needs to do when clicked
Again using jQuery, add the newly created buttons to the DOM
This did the trick:
function Reload()
{
$("iframe").each(function()
{
if($(this).is(':visible'))
$(this).attr('src', $(this).attr('src'));
});
}
Whats wrong with this function?
function yahooWeather(){
var loadPage = 'yahooweather.php?p='+ $("#myCity").val();
$("#yahoo").html('<img src="loading.gif" align="absmiddle">');
$("#yahoo").load(loadPage);
}
Is there another way to write this function. Im unsure if its able to read the .val required, tho i know it is set as i used it in a previous function to test that it was being set, so im thinking its maybe my load call.
http://www.wetterkanal.tv/
This is the page. This function once called by clicking the button, should get the value set by the "select city" option then load the weather in a div below. I have set the css to this div as green so i know it loads. I also know that my php script works as if i test it by going to the following:
http://wetterkanal.tv/yahooweather.php?p=ASXX0001
it pulls the weather in correctly. Please help!
Your problem is that the button element will reload the page when the button is clicked.
You need to change your onclick attribute to onclick="yahooWeather(); return false;".