There is a scenario where I need a function like xyz() to be called once a button on page is clicked and page is loaded using javascript/jquery.
I can't call xyz() directly on <Body onload="xyz()"> or inside document.ready() or $(window).on('load', function ()).
I need the function to be called once a button is clicked and page has loaded completely.
Below is working code on page load but not my requirement
<body onload="xyz();">
<form id="form1" runat="server">
<div id="vizContainer" style="width: 800px; height: 700px;">
</div>
</form>
</body>
Now below is my required code on button click and it is not working
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="functiongetdata()" />
<div id="vizContainer" style="width: 800px; height: 700px;">
</div>
</form>
</body>
<script type="text/javascript">
function functiongetdata() {
xyz();
}
</script>
you can use something like this
$(function() {
$('button.start').click(function() {
$('img.lazy').lazy({
bind: "event"
});
});
$('button.loadAll').click(function() {
$('.lazy').lazy({
bind: "event",
delay: 0
});
});
});
Refer this link for clear example
http://jquery.eisbehr.de/lazy/example_load-elements-by-events
Approach 1:
On window load function, update a hidden field or add a flag variable and set true
var myWindowIsLoaded = false
$(window).on('load', function (){
myWindowIsLoaded = true;
});
And then on the button click check the value
function xyz(){
if(myWindowIsLoaded){
// Do your stuff
}
}
Approach 2:
Add the function in the button click event on window load
$(window).on('load', function (){
$("#myButton").click(xyz);
});
Related
I am trying to get an alert if I chose a certain picture for example:
HTML:
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="">
</div>
Then I manually chose a picture that goes into 'main' and changes it src JQUERY:
<script type="text/javascript">
$('#paperb').click(function()
{
$('#pr').attr("src", "http://www.cliparthut.com/clip-arts/1008/paper-stack-
clip-art-1008442.jpg");
}); </script>
Than there comes the JS that fails:
<script type="text/javascript">
if (getElementById('#pr').attr('src' ,'https://i.redd.it/2u0y0z5i12py.png')
{
alert('euirhzeurhzu')
}
</script>
But this script wont work. Is it possible to get an alert from this?
What do I need to change so I can get an alert?
Thank you.
If you have multiple images & want to do some action when src value is changed for certain images, then try below;
$('#pr').on('load', function (e) {
console.log("Image Path: ", e.target.src);
if(e.target.src == "https://i.redd.it/2u0y0z5i12py.png") {
//do action a
} else if(e.target.src == "https://...bike.png") {
//do action b
}
});
Replace
if (getElementById('#pr').attr('src' ,'https://i.redd.it/2u0y0z5i12py.png')
with
if (getElementById('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png')
Also the other problem is that your if statement is not declared in an event handler. So it will run only once when the script first loads. You need to place it under an event after which you want to execute it. E.g.
<script type="text/javascript">
$('body').on('click','#pr',function(){
if ($('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png') {
alert('euirhzeurhzu');
}
});
</script>
Edit: Here's a working snippet.
$('body').on('click','#pr',function(){
if ($('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png') {
alert('euirhzeurhzu');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="https://i.redd.it/2u0y0z5i12py.png">
</div>
Please see the following code:
<body>
<form id="form1" runat="server">
<div>
<button id="helloButton">
Search</button>
<div id="hello">
</div>
<script type="text/javascript">
$(document).ready(
function () {
$('#helloButton').click(function () {
$('#hello').html('<div>hello world</div>');
});
});
</script>
</div>
</form>
When I use this script, all it does is flash "hello world", it doesn't keep it on the page. Does this has something to do with the click event? I'm trying to click the button and then leave the object on the page.
Otherwise you can simply do a return false which will do both
preventDefault and stop propagation
$('#helloButton').click(function (e) {
$('#hello').html('<div>hello world</div>');
return false;
});
in order to prevent the form from posting, so that you can see your changes, you need to call preventDefault()
$('#helloButton').click(function (e) {
e.preventDefault();
$('#hello').html('<div>hello world</div>');
});
I've been trying for a good while to try and disable a click on a div.
The reason behind this is to stop unauthorised users from triggering events etc which are activated when a user clicks on a div. From my attempt below i tried a click false but it doesnt seem to work, maybe im not using the correct syntax to disable the div?
$('#content2').on('click', false);
update:
here is the complete code involved
View
<h2>Notifications & Updates</h2>
<p id="content2" contenteditable"true" ></p>
<button id="save">Save Changes</button>
</div>
<div id="Section2"></div>
#*Scripts go at end for the contenteditable div to load correctly*#
<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/editable.js"></script>
<script type="text/javascript" src="~/Scripts/EditContentHome.js"></script>
#if (User.Identity.Name == "WORKER")
{
<script type="text/javascript" src="~/Scripts/SecurityEditHide.js"></script>
}
SecurityEditHide.JS
window.onload = function () {
$('textarea').prop('disabled', true);
$('#content2').on('click', false);
$('#content2').prop('contenteditable', false);
$('#save').hide();
};
EditContentHome.JS
$("#content2").click(function () {
$("#save").show(1000);
});
$("#save").click(function () {
$("#save").hide(1000);
});
Change
$('#content2').on('click', false);
to
$('#content2').off('click');
That removes the click handler that you've set up in your earlier script. (Example below.)
Your $('#content2').on('click', false); didn't work because all it did was attach a second handler to the element that prevented the default action and stopped propagation. But those don't do anything to prevent other handlers for the same element getting called. (There is stopImmediatePropagation, which does, but you're really better off just removing the handler entirely in this case.)
Live example:
<h2>Notifications & Updates</h2>
<p id="content2" contenteditable="true">Presumably some text here</p>
<button id="save">Save Changes</button>
</div>
<div id="Section2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// From EditContentHome.JS:
$("#content2").click(function () {
$("#save").show(1000);
});
</script>
<script>
// From SecurityEditHide.JS:
window.onload = function () {
$('textarea').prop('disabled', true);
$('#content2').off('click'); // <==== Change is here
$('#content2').prop('contenteditable', false);
$('#save').hide();
};
</script>
Naturally divs are not clickable except you attach an onclick event to them , however you can do this
.enable{
//indicate your preferred color
background-color: blue;
cursor : pointer ;
}
.disable{
background-color: grey;
cursor:none ;
}
You can then check for user authorization when a click is done if authorized apply the right css using jquery.removeClass().addClass('enable') else jquery.removeClass().addClass('disable').
I have been trying to figure this out for most of a day, so any help will be very very welcome...
<body>
<form id="form1" runat="server">
<script type="text/javascript">
$(function () {
ChangeText("This is the changed text from the document ready function");
});
function ChangeText(newText) {
var editorControl = $("#txtHTMLEditor");
editorControl[0].value = newText;
}
</script>
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div id="divTemp" style="display: block">
<asp:TextBox runat="server" ID="txtHTMLEditor" TextMode="MultiLine" Rows="25" Width="100%" Text="<b>This is test text</b>" /><br />
<ajaxToolkit:HtmlEditorExtender ID="htmlEditorExtender1" TargetControlID="txtHTMLEditor" runat="server" DisplaySourceTab="true">
</ajaxToolkit:HtmlEditorExtender>
</div>
<input type="button" onclick="ChangeText('This is the changed text from the button click event'); return false;" value="Perform Change">
</div>
</form>
The above code changes the text in the html editor perfectly in the document ready event, but does nothing if I click the button.
Both events fire the same javascript function (ChangeText()), with the value of the text area being changed in both instances, but the change does not show in the text area in the case of the button click event.
Any ideas why not?
You need to change the text via the HTMLEditorExtender's client side interface:
function ChangeText(newText) {
var editorControl = $find("<%=htmlEditorExtender1.ClientID%>");
editorControl._editableDiv.innerHTML = newText;
}
Location of the HTML contents of the HtmlEditorExtender may have changed over time. This is how I did it in version 7.1005 of the toolkit.
var htmlSource = $('#<%= DescriptionEnglishEditor.ClientID %>Extender_ExtenderContentEditable').html();
$('#<%= DescriptionFrenchEditor.ClientID %>Extender_ExtenderContentEditable').html(htmlSource);
The key is to locate the object in the DOM that is storing the HTML and reference it correctly.
take a look to the example:
example.jsp:
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').button().click(function() {
$("#mainContent").load("example_1.jsp");
});
});
</script>
<input id="Button1" type="button" value="RELOAD" />
<div id="mainContent"></div>
example_1.jsp:
<script type="text/javascript">
$(document).ready(function() {
$("#a").button().click(function() {
$("#a_form").dialog("open");
});
$("#a_form").dialog({
autoOpen: false,
height: 480,
width: 625,
modal: true
});
});
</script>
<input id="a" type="button" value="MODAL" />
<div id="a_form" title="Modal Dialog" class="ui-widget">
Hello!
</div>
I load example.jsp and I press the button "RELOAD".
Then, in "mainContent", appears the button "MODAL", that open a modal dialog.
But if I press again "RELOAD" button and then "MODAL" the MODAL DIALOG doesn't appear anymore!
why?
where am i doing wrong?
That is because :
<input id="a" type="button" value="MODAL" />
Is using an ID.
When you run load again you are creating another input with the id=a which is not allowed.
Try using a class identifier instead of an id
The problem might be because the script block of example_1 is ignored because it is loaded dynamically into the page.
So what you need to do is to move that script block to example.jsp and use .live() for '#a' instead of .click()
$("#a").button().live("click", function() {
$("#a_form").dialog("open");
});
Before you load/reload the main content try to empty it and then load.
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').button().click(function() {
$("#mainContent").html('').load("example_1.jsp");
});
});
</script>