File Dialog Does Not Show Up - javascript

I've been facing this problem for the past couple of days. I have an input of type "file" inside a tooltip. When I click on the button to open the file dialog, nothing shows up. Now I tried to use Valums AJAX Upload and the same thing happens. The problem is there aren't any errors so I do not know how I can debug to find out what the problem is... Here's my code:
<div class="liImageThumb tooltip-trigger">
<div class="tooltip down">
<div class="tooltip-arrow"></div>
<p class="liUploadButton greenButton">Upload</p>
<p class="okButton"></p>
</div>
</div>
<script type="text/javascript" src="#Url.Content("~/Scripts/fileuploader.js")"></script>
<script type="text/javascript">
$(function () {
var greenButton = $('.liUploadButton')[0];
var uploader = new qq.FileUploader({
element: greenButton,
action: '#Url.Action("Upload", "Item")' //outputs the correct DOM node
});
console.log(greenButton);
});
And here's the code that builds up the tooltip:
$('.tooltip-trigger').removeClass('nonjs').live('mouseover', function(){
var $trigger = $(this);
var $tooltip = $('.tooltip',$trigger);
if (!$trigger.data('init')){
$trigger.data('init', true);
if($tooltip.length){
$trigger.hoverIntent({
'over':function(){$tooltip.show();},
'out':function(){$tooltip.hide();},
'timeout':200
});
$trigger.trigger('mouseover');
}
}
});
What do you think is preventing the dialog box from showing up?

Are you using this in ASP.Net MVC project ? I assume, you are, based on the Url.Content syntax.
If yes, your script tags src attribute should look like
src='<%=Url.Content("~/Content/script/MyFile.js")%>'
Refer this answer for details.

Related

Clicking AJAX links? Watir

SOLVED:
I figured out my problem with this little piece of code:
b.link(id: 'm_wm_w5_m_lv_ctrl1_m_lnkWatch').fire_event :click
QUESTION:
I am having trouble clicking AJAX links with Watir.
Here is what I want to click.
https://i.imgur.com/Md4Rha3.png
This is what HTML looks like
<a id="m_wm_w5_m_lv_ctrl1_m_lnkWatch" href="javascript:__doPostBack('m_wm$w5$m_lv$ctrl1$m_lnkWatch','')"
style="white-space:nowrap; font-size:11px;">New Listing (160)</a></td>
So, in Watir, I used the following to click to think
b.link(id: 'm_wm_w5_m_lv_ctrl1_m_lnkWatch').click
But when I do that, I get this CSS pop up:
https://i.imgur.com/2DKWAhF.png
The HTML for close button on the pop up is:
<div id="NewsDetailDismissNew" class="btn mtx-btn-confirm enabled" title="Close">Close</div>
But when I use this in Watir
b.div(id: 'NewsDetailDismissNew').click
Nothing happens.
I did find some javascript that seems to correspond with the buttons
<!--<div class="container" >-->
<script>
var cvMarkAsRead=function( ){ return "Mark as Read"; };
</script>
<script>
var cvClose=function( ){ return "Close"; }; //This is closes the CSS pop up as far as I can tell
</script>
<script>
var cvOK=function( ){ return "OK"; };
</script>
<script>
var cvDismiss=function( ){ return "I've Read This"; };
</script>
<script>
var cvPreview=function( ){ return "Print Preview"; };
</script>
<!-- End NewsDetail modal -->
My question to you guys is
How can I click "New Listings" in Watir?
How can I click the "Close" button on the pop up?
I see that the link has some javascript, but I am not familiar enough with Watir to use b.execute_script successfully. I read the documentation. I am not understanding it and the examples provided are not similar enough to my problem for me to learn by practicing or copying.
Thank you in advance.
The piece of code below solves my problem. It clinks on New Listing and successfully loads all the new listings as well as avoids triggering that erroneous CSS pop up.
I think what this code does is activate the javascript by clicking the link.
I successfully clicked this link
<a id="m_wm_w5_m_lv_ctrl1_m_lnkWatch" href="javascript:__doPostBack('m_wm$w5$m_lv$ctrl1$m_lnkWatch','')"
style="white-space:nowrap; font-size:11px;">New Listing (160)</a>
By using this code in Watir:
b.link(id: 'm_wm_w5_m_lv_ctrl1_m_lnkWatch').fire_event :click

Second button doesn't produce form in same div as first button

I have a php page with two divs. In the first div, users click a button and it brings up a form in the second div. When they submit the form, both divs refresh. All is great. But I want to add a second button to the first div to bring up a different form in the second div. I haven't been able to get this to work, either the first button stops working or the second one doesn't work. I tried making the second button a div and calling it by its ID and that didn't work. I'm an amateur and don't understand jquery very well (I think this is jquery anyway) and this is just for a project for some friends and I, so any help would be appreciated. I may just not be understanding how this works.
<script>
$(document).ready(function () {
$("button").click(function () {
var handle = "<?php echo $_SESSION['name'] ?>";
$("#infoblock").load("createhandle.html");
});
});
</script>
<div id="div1">
<button id="reservename">Reserve A Name</button>
</div>
<div id="div2"></div>
I found a solution here: https://stackoverflow.com/a/20074373/9157720
It ended up being an issue with syntax and using a pound symbol. This is the code that worked in case anyone else has this problem.
<script>
$(document).ready(function(){
var handle = "<?php echo $_SESSION['name'] ?>";
$("#reservename").click(function(){
$("#infoblock").load( "createhandle.html");
});
$("#uploadpic").click(function(){
$("#infoblock").load("uploadpic.html");
});
});
</script>
<button id="reservename">Reserve A Name</button>
<button id="uploadpic">Upload A Picture</button>
Consider the following.
<script>
$(document).ready(function () {
$("button").click(function () {
var handle = $(this).data("ref");
var target = $(this).data("target");
$(target).load("createhandle.html?handle=" + handle);
});
});
</script>
<div id="div1">
<button data-ref="<?php echo $_SESSION['nameA']; ?>" data-target="#infoblock">Reserve A Name</button>
<button data-ref="<?php echo $_SESSION['nameB']; ?>" data-target="#div2">Reserve B Name</button>
</div>
<div id="div2">
</div>
Your example is sort of ambiguous, so I wasn't sure what you were trying to accomplish. It's best to not mix PHP and HTML if you can. You can have a reference point in the HTML so that when you need to load something, in relationship to that button, you can pass that into a stand alone PHP Script and get the HTML you need back with .load().
Remember that PHP is executed before the HTML is presented to the Client. So the Session data must be present in PHP Memory when the page is initially loaded.
Reference:
https://api.jquery.com/data/
https://api.jquery.com/load/
jQuery $(this) keyword

Stuck with onclick and document.GetElementById

I just began JavaScript and I've been stuck for a few hours now with an onclick which is not working, or maybe it's the document.getElementById. What I want to do is hide the div when I click on it.
If anyone can explain me what I'm doing wrong I would be grateful!
function closing() {
var closecook = document.getElementById("cookies");
closecook.style.display = "none";
}
#cookies{
display: block;
}
<div id="cookies" onclick="closing()">
Our website is using cookies, click here to close this message.
</div>
Here's my relevant HTML markup:
<body>
<div id="cookies" onclick="closing()">
Our website is using cookies, click here to close this message.
</div>
</body>
<script type="text/javascript" src="functions.js"></script>
Thanks.
Place your "script" block at the end of your body, not outside of it!
alter you the function "closing" to something like this:
function closing() {
var closecook = document.getElementById("cookies");
console.log(closecook);
closecook.style.display = "none";
}
In your browser: open the console by hitting "F12" or right-click anywhere in your browser and select "inspect element" then choose "console".
Now execute your function by clicking on the div.
If you see a "null" in the console: the problem comes from "document.getElementById("");".
If you do not see anything pop up in the console, your javascript file is not loaded properly. Make sure there is no typo in the file name! (Linux is case-sensitiv!).

Make a Popup/Alert Window in a html with a "dont show again" option

I am trying to make a popup / alert window so that when the page is being loaded, the popup will open. I searched around and found something I like, but I don't know how to get this option working with the ability to not show the popup to the user more than once (with a "Don't show this again" option).
I added this to my header in the script part:
$(document).ready(function(){ alert('hi')});
I know that I need the jQuery script for this, so I added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to my HTML page. This is working fine, but I don't know how I could modify my alert in a way for making a checkbox or a button with "Don't show this again".
I also found a solution where the alert was an external popup HTML page, but I want it inside my HTML page. Is there a way to solve my problem over that, or is the way over the alarm better?
Unfortunately, you can't do this through a typical JavaScript alert box. You'll need to build you own modal popup to simulate an alert box. jQuery's plugin jQuery UI has a really nice built-in function for this, and I'll use this in my example.
To give the user the option of not showing a window again, you need to make use of localStorage. You would need to create a condition that checks for whether a localStorage item is set. If it is not, display the modal, if it is, hide the modal:
if (!localStorage.hideAlert) {
$(function() {
$("#dialog").dialog();
});
}
else {
$("#dialog").css("display", "none");
}
In the modal itself, you would have a 'No' button that adds the relevant value to localStorage:
<div id="dialog" title="Show Again?">
<p>Would you like to show this dialog again?</p>
<button name="yes" class="yes">Yes</button>
<button name="no" class="no">No</button>
</div>
$(".yes").on("click", function() {
$("#dialog").dialog("close");
});
$(".no").on("click", function() {
localStorage.setItem('hideAlert', true);
$("#dialog").dialog("close");
});
I've created a working example showcasing this here.
This way, all of your code can reside within a single file, though remember that you'll still need to include the external jQuery UI JavaScript, and optional CSS:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Hope this helps! :)
In the example below, every popup window has a "Don't Show This Again" button.
Main document:
Code:
<HTML>
<Head>
<Script Language=JavaScript>
var expDate = new Date();
expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year
function setCookie(isName,isValue,dExpires){
document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}
function initPopups(){
if (!getCookie('pop1'))
{popWin1 = window.open("1/pop1.html","","width=200,height=150,top=50,left=400")}
if (!getCookie('pop2'))
{popWin2 = window.open("1/pop2.html","","width=200,height=150,top=50,left=180")}
}
window.onload=initPopups;
</Script>
</Head>
<Body>
</Body>
The popup files are in a folder named 1
pop1.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop1',0,opener.expDate);self.close()">
</Body>
</HTML>
pop2.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop2',0,opener.expDate);self.close()">
</Body>
</HTML>

Comment box appear on clicking link

I'm extremely new to front end web development, and I was wondering if there is anyway I can have a small text box appear on clicking a link, which disappears when I submit the form. (I want something like what Facebook has currently for the birthday wishes, where you click on the persons name, a small comment box opens up 'on top', and lets u post a wish on the persons wall from the main page itself).
Sorry if this is a stupid question.
The best will be to use a framework like jQuery Dialog UI. The documentation is big and there are a lot of samples available.
For instance, create a div element with your input text and bound his creation to the button you want:
HTML
<div id="dialog">
<input type="text" />
</div>
Open dialog
Javascript
$(function () {
$("#dialog").dialog({ autoOpen: false });
$('a').click(function () {
$("#dialog").dialog('open');
});
});
The other answerer is assuming you're using jQuery. If that's true, I would look at jqModal. It's much slimmer and simpler than jQuery UI
basic example in plain javascript to get you started
<form id="mainForm">
<a id="clickme" href="javascript:;">click me</a>
<input id="submitme" type="submit" />
</form>
<script type="text/javascript">
var mainForm = document.getElementById("mainForm"),
textBox = document.createElement("input");
textBox.id="tmpTextBox";
textBox.type="text";
document.getElementById("clickme").onclick = function () {
mainForm.appendChild(textBox);
}
document.getElementById("submitme").onclick = function () {
mainForm.removeChild(textBox);
}
</script>

Categories