onclick html images for partial page refresh java script - asp.net

I have an html image, and I am trying to figure out if it is possible to do a partial page refresh when someone clicks on the image. I was thinking I would use a javascript. I am using aspx, and mvc model
Here is my thought
<img id = "Img1" , alt = "Click me" src = /content/img1.gif/>
my script would look something like
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
$('#updatePartialView'). load('#Url.Action("myAction", "myController")');
});
});
</script>
but it doesn't seem to want to work, I don't even know if it is possible .
--Update per Comment
I have a series of images on the top, and when the user click on the images the bottom half of the page refreshes with information about that picture.
---update so I wanted to try something different but it doesn't work see below
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
alert("I clicked this");
});
});
</script>

Just remove closing ");" in your end of javascript myFunction(). It would be working.
But I would suggest to add the onclick handler as below.
<img id = "Img1" alt = "Click me" src="">
Script:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script type = "text/javascript">
$(function(){
$("#Img1").click(function(){
$('#updatePartialView').load('#Url.Action("myAction", "myController")');
});
});
</script>

Related

Reload the "Sign In With Google" button if user changes locale

I can't find any documented way to reload the new "Sign in With Google" button in JavaScript.
I have to remove the script tag and the "button" div then re-add them both.
Does anyone know of a better way to do this?
Have you looked at the JS renderButton method ?
Assuming you have something like this to initialize the library and display the button in JS, you might be able to update locale in the second parameter to renderButton and call the method again to switch languages.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large", locale: "the new locale" }
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</div>
</body>
</html>
Obviously, you'd call renderButton a second time from outside of the window.onload example above, I didn't go as far as showing that in the code sample though.

Pass through '&parameter' in a URL

I'm working on a project which passes a variable into a iFrame with this code:
jQuery(function() {
var search = window.location.search;
jQuery(".iframe-wrapper").attr("src", jQuery(".iframe-wrapper").attr("src")+search);
});
But, when I pass through &section=P1 in a URL, it just gives a 404.
Source of the iFrame: example.com/page?cart=1
After going to site.com/&section=P1 the iFrame should change to example.com/page?cart=1&section=P1
Anyway to pass through the &section=P1 through the URL?
Please send your HTML as mine is working fine with the below:
<iframe width="500" height="200" class="iframe-wrapper" src="http://www.google.com?param=1"></iframe>
<script type="text/javascript">
$(function() {
var search = window.location.search;
search = search.replace("?","&");
$(".iframe-wrapper").attr("src", $(".iframe-wrapper").attr("src")+search);
});
</script>

localstorage and iframe issue

I am creating a preview for users entering html but I am having problems sharing the html across an iframe.
I have the following javascript
$(function () {
var pathname = "https://" + document.domain + "/newspreview.aspx";
localStorage.contents = $("#<%=Content.ClientID%>").val();
$("#preview").attr("src", pathname);
});
and the html is
<iframe id="preview" style="border:2px solid; width:880px;height:600px;" >
</iframe>
on the newspreview.aspx page I have the javascript below, all I get displayed is undefined.
Has anybody got any ideas why this is the case. (BTW both pages are using https)
<script type="text/javascript" language="javascript">
var result = localStorage.contents;
document.write(result);
localStorage.removeItem("contents");
</script>
Regards
Podge

jquery adding an onclick event to a href link

i am converting over from websforms to asp.net mvc and i have a question.
i have a loop that generates links dynamicallly where picNumberLink is a variable in a loop and image is a variable image link.
i want to avoid putting javascript actions inline so in my webforms project is did the following:
hyperLink.Attributes.Add("onclick", "javascript:void(viewer.show(" + picNumberlink + "))");
what is the equivalent using jquery in asp.net mvc?
I have seen examples of using the $(document).ready event to attach on clicks but i can't figure out the syntax to pass in the picNumberLink variable into the javascript function.
suggestions?
EDIT: If you generate your links with the ID of this form:
<a id="piclink_1" class="picLinks">...</a>
<a id="picLink_2" class="picLinks">...</a>
<script type="text/javascript">
$('a.picLinks').click(function () {
//split at the '_' and take the second offset
var picNumber = $(this).attr('id').split('_')[1];
viewer.show(picNumber);
});
</script>
var functionIWantToCall = function(){
var wrappedLink = $(this);
//some serious action
}
//this should be called on document ready
$("#myLinkId").click(functionIWantToCall);
If you need to get URL of picture, keep it in anchor`s href:
var functionIWantToCall = function(event){
event.preventDefault(); //this one is important
var link = $(this).attr('href');
//some serious action
}
$(document).ready(function()
{
$('#LinkID').click(function() {
viewer.show($(this).attr('picNumber'));
});
});
You can add an attribute called picNumber to your hyperlink tag and set this is your mvc view
The link in your view might look something like this:
<%= Html.ActionLink("Index", new { id = "LINKID", picNumber = 1 }) %>
Assuming you're able to change the HTML you output, can't you put the picNumberLink in the id or class attribute?
HTML:
<img src="..."/>
jQuery:
$(function() {
// using the id attribute:
$('.view').click(function() {
viewer.show(+/-(\d+)/.exec(this.id)[1]);
});
// or using the class attribute:
$('.view').click(function() {
viewer.show(+/(^|\s)foo-(\d+)(\s|$)/.exec(this.className)[2]);
});
}}

Implementing modalpopups as default alert in entire project

right now I have a huge Solution in which we use javascript alerts via RegisterStartupScript for all messages and errors.. We were willing to modify all this to making something similar to the modalPopupExtender, or the extender itself in a way that doesn't require too much effort... I mean, to show a modalpopup on a single page I need to create it on the aspx file, setting the attributes etc... So i'm just asking for Ideas, want to know how you guys deal with this..
I'd probably use jQuery dialog and put the markup and initialization code in a MasterPage, set with autoOpen false and hidden by default. I'd inject code that interacts with the dialog into each page as needed.
<div id="modalDialog" title="Error">
<p id='modalDialogMsg'>An error has occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#modalDialog').dialog({
autoOpen: false;
modal: true,
buttons: {
"OK" : function() {
$(this).dialog('close');
}
}
});
});
// You could "objectify" this, but I'll show as a global function
function showError( title, msg )
{
if (!title) {
title = 'Error';
}
if (!msg) {
msg = 'An error occurred.';
}
$('#modalDialogMessage').html(msg);
$('#modalDialog').attr('title',title)
.dialog('open');
}
</script>
Then, in your page you'd inject code that calls showError. Note this would need to be after the script above in order to make sure that the function has been defined. What would spit out would render like:
<script type="text/javascript">
$(function() {
showError('Database connection error', 'There was an error connecting to the database.' )'
});
</script>
Could you not place the modal popup/ modal popup extender into a user a control and embed the user control into each page?

Resources