I have a modal window using jqmodal. I need a button within that modal to load a different page in the modal. I have this functioning in all browsers except safari.
JS
<script language="javascript">
function shipCalc() {
$('.jqmWindow').load("/ash/shop/shipping.php");
}
</script>
HTML
<form name="form9" id="form9" method="post">
Zip: <input type="text" size="5" name="zip">
<a href="#" id="submitbtn" onclick= "shipCalc();" >zip</a>
</form>
KEEP IN MIND! The class .jqmWindow is a modal window using the jqmodal jquery plugin. It is NOT just a div on a page. I am using the method .load() to change what has been loaded in the modal window after it has popped up. The html shown above is inside the page that is originally loaded in the modal. I am having trouble understanding why this works in all browsers besides safari. I posted earlier and got some responses that weren't quite addressing the real problem here, which is that I can not use the .load() method to load anything into my modal window in safari. (Ive stripped some non-important information regarding future modifications I will make to further make this suite the needs of the site, just to keep this nice and simple to understand...)
function shipCalc() needed to be on both the initial page AND the page that gets loaded into the modal for safari to load everything properly. All other browsers did not require that. All is working now, so I figured I would post my own answer in case anyone was ever searching for something similar!
Related
We have been having a very strange problem in a vue-js (#vue-cli, Build version) application. There was a button in App.vue that had an onclick
<button #click="goIRList" id="irlistBtn">IR List</button>
that was working for fine for some users, every time, and not others. For the others, I checked (with alerts) that the goIRList code was not reached at all. These others had this issue with any browser we tried. They did not have the issue when Vue+Developer Tools was open - making it harder for me to debug it.
Instead of the goIRList code, these users got a page with just the error message
Cannot GET /menu.csp
That was especially perplexing, because menu.csp is code from a completely different system, though one also associated with the same computer. It is never referenced in the vue-js application.
Eventually I realized that what was happening was a submit, even though the button was not in any form on the page [I had thought that a button is only a submit type by default, if it is inside a form]. As soon as I added a type, <button type="button"...>, the issue went away completely.
Could someone explain why this was happening? And why did it work for some users? Thanks!
Update: and now the problem is back, same conditions: for them and not for me. Nothing changed. I also added .prevent to the button's onclick:
<button type="button" #click.prevent="goIRList" id="irlistBtn">IR List
and no help. So maybe that wasn't the issue. Anyhow, now I'm asking for a fix as well as an explanation. Thanks!
Add a "submit" event catcher in the form, and prevent the default action.
<template>
<div id="app">
<form #submit="submit">
<input value="Tom">
<button>Submit</button>
</form>
</div>
</template>
<script>
export default {
name: "App",
methods: {
submit(e) {
e.preventDefault();
console.log("Success!");
}
}
};
</script>
And someone pointed out the answer to me. Ridiculous: those two buttons were hidden underneath a logo image that was higher up on the page. It was the image that contained the bogus link.
I never got the error, because I can't see so well, so I keep the sizing high, and the buttons were far away from the logo. Others had a more normal page sizing, and everything got smaller except for that image; the invisible margin of the image went over the buttons, and someone trying to click on the buttons triggered the link.
I set the image to resize with the page and all is well.
I am using protractor to test non-angular application and in a scenario i had nested "iFrames", these iFrames are in div tag. Using protractor i was able to navigate to second iFrame, but could not read any elements on page. Let me know if you have any suggestions on this.
<div class="modal-content" modal-transclude="">
<iframe id="frame1" name="newContentItemframe" onload="onLoadDone();"
<iframe name="frame2" id="form_iframe"
<input type="text" class="iw-formspub-textbox-active" name="Content/Title" id="field_0">
</iframe>
</iframe>
</div>
Use switchTo(), which takes a name or index, to switch to the frame/window containing your elements. Also, don't forget to switch back!
browser.switchTo().frame('frame2');
// access elements in the frame...
// then switch back to main window
browser.switchTo().defaultContent();
Maybe not very elegant solution, but picking up the second iframe wasn't working for me, so I had to go with:
browser.switchTo().frame(0);
and then, once in the first frame, again:browser.switchTo().frame(0);.
I'm trying to properly close a modal when if I press the x button.
At first i tried doing this in the main index.cshtml page
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
#Html.Partial("Create")
</div>
</div>
and when closing the modal in my create page i had this
<button type="button" class="close" data-dismiss="modal">×</button>
And the modal closed properly but this was a popup from the main screen.
Although it technically worked I wanted the screen to be a bit bigger. So I tried doing this in the index.cshtml page.
#Html.ActionLink("Create new link", "Create")
The create screen still has the same design with the inline class of "modal-content" but the close button doesn't seem to work. I wasn't sure if it was because the ActionLink part is treating it as a brand new page since most links i looked online seem to say include the "data-dismiss="modal"" part and everything is fine.
If I do another actionlink back to the main page that completely refreshes the page and that isn't what I want because it refreshes the data that the user currently has. There's dropdown lists, query results and filtering done.
Is there a way to treat a modal page like a cshtml page properly so that I can close it without completely refreshing the entire page? Or am I going about this problem the wrong way.
Using Html.ActionLink, literally just drops a static a tag to the page. When you click on that, the entire browser view is changed to the new URL. In this context, "closing the modal" doesn't make sense, because there's no modal. You're just display the response from an action that just happens to be the content from a partial view.
I have Google's re-captcha implemented and working in Chrome perfectly (AJAX APIs). IE is the problem...
I have: localhost://myapp/index.html and a link for Forgot your password. When this link is clicked jQuery click handler is called. Handler function changes the div's content and also calls for Recaptcha.create(...) The widget is displayed correctly and works as expected in Chrome, but in IE if I click on reload icon or the sound button it reloads the whole page.
If I manually call for Recaptcha.reload() it reloads without any problem ?!
HTML I have is:
<div id="recaptcha" style="width:120px"></div>
[...]
<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
[...]
//In a jquery click handler I call
Recaptcha.create("6LxxxxxxxxxxxxxxxxxxxxxxIrpV5RO8P",
"recaptcha",
{
theme:'white',
callback: Recaptcha.focus_response_field
}
);
So far so good... Captcha gets loaded well in all browsers. In IE8 and 9 when I click the widgets buttons for reload and mp3 version the whole page gets reloaded
I tried changing http for https and vice-versa, but still without any luck...
When Recaptcha.create(); is called, Google's re-captcha RELOAD and IMAGE/TEXT buttons' code looks something like this:
<a href="javascript:Recaptcha.reload();">
and I don't know why the page gets reloaded in my app in IE when the button is pressed and in the demo Google provided DEMO it sends a async request...
Since I can't change the javascript in href attribute I had to add a onclick handler in jQuery $(document).ready();
My solution was this:
$("#recaptcha).on("click", "id_of_the_reload_button", function(e){
e.preventDEfault();
Recaptcha.reload();
});
I basically blocked the natural behavior of the anchor google provides and called the reload() function myself.
I've never found out what was causing my page to reload in the first place
First off I am completely new to Javascript but I have some HTML/CSS experience. I've been trying to create an html/javascript image gallery for a website; (It would probably be a lot easier to do in PHP but the web coordinator disabled PHP on our server for security reasons).
Anyway What I have is a page showing an Album-list, Album-browser and Photo-viewer in different a div and 2 iframes respectively. I have it set up so that when someone clicks on an album from the album list, a page is opened up in the album browser section (iframe:"browser-frame" showing thumbnails of all the images in the particular album). I've been trying to set it up so that when someone clicks on an image in the album browser the image will appear in the Photo-viewer section (iframe:"viewer-frame" showing the photo itself).
I didn't want the photo's in the viewer-frame to be larger than the set dimensions for the viewer-frame so I created a page for the viewer-frame that puts the image in a div with a class of set dimensions (defined in a stylesheet) as follows:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
</div>
</body>...
I then created a script that updates the image src to a variable:image_to_be_viewed and called it image-changer.js
// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}
And added a script to the viewer-frame page so it looks like:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>
</div>
</body>...
Now I wanted the gallery to work so that in the page loaded in the browser-frame, whenever one clicked on one of the pictures, the value of the global variable 'image_to_be_viewed' would be changed to the source of the clicked image as follows:
<body>
<div class="photobrowse">
<img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
<img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
<img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>
It doesn't work....
the gallery i'm working on is on http://ptc.tamu.edu/test/gallery_directory/test_gallery.html
everything up to the loading of the selected picture in the viewer frame works (I'm running the onlick event on the default loaded pictures 1,2,3 in the browser-frame page)(default pic's 4 and 5 simply load the image in the iframe but with no way to adjust the size it is too big and gets cut off and i don't want that)
I've been working on for an entire day and I'm sure I'm doing something wrong here but I can't figure out what exactly it is. I have a feeling it has to do with changing the global variable: image_to_be_viewed from the browser-frame page but I wanted to confirm with experts instead of flopping about like a headless fish. I'm going to continue trying to figure this out but i thought maybe having some expert assistance would speed up the process.
What the onclick triggers should be a javascript function call.
e.g. onclick="changeImg('images/album1/1.jpg')"
And the function itself should looks like this
function changeImg (image_to_be_viewed) {
document.getElementById("viewed_image").src = image_to_be_viewed;
}
btw, you probably should learn javascript a little bit more before work on something real. I recommend this book
thank you I got it to work! I figured that the changeImg function was targeting the wrong document/wrong frame and I fixed it by changing the js script to:
function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}