I'm playing around with the Jquery UI dialog. I have a page with a gridview, a button that refreshes the gridview and a link. When you click a link, a dialog window popup up with the details of the record.
When I press save on the child page, I have the child page calling a javascript function from the parent page. In this function, it tried to do the button click event but it doesn't seem to be working.
If you look at the showThanks function below,
The alert works, the button text changes but the button click doesn't work.
Could this be a security feature? Both pages are on the same page right now.
hmm any clue?
Thanks
Edit - if you click the button manually, it changes the grid (in the button event handler). Yet, the jquery doesn't seem to be going in the button's event handler and the grid doesn't change.
Parent page html
<asp:GridView ID="gv" runat="server" />
<asp:Button ID="btnRefresh" runat="server" />
<a id="popoutUsers" href="popup.aspx?page=Bob" class="OpenNewLink">CLICK ME</a>
<script type="text/javascript">
$(function () {
$('.OpenNewLink').click(function () {
var url = $(this).attr('href');
var dialog = $('<div id="modal"></div>').appendTo('body')
$('<iframe id="site" src="' + url + '" />').dialog({
modal: true
, close: function (event, ui) {
// remove div with all data and events
dialog.remove();
}
});
return false;
});
showThanks = function () {
alert("Thanks");
var button = $("#btnRefresh");
button.val("hello"); //This works
button.click(); //Nothing seems to happen
// button.trigger("click"); (Tried trigger as well but no luck)
};
});
</script>
Child page
<div>
Why hello there
<asp:Button ID="btnBob" runat="server" Text="click me" />
</div>
<script type="text/javascript">
$(function () {
$('#btnBob').click(function (e) {
e.preventDefault();
window.parent.showThanks();
window.parent.$('.ui-dialog-content').filter(function () { return $(this).dialog('isOpen'); }).dialog('close');
return false;
});
});
</script>
So decided to do a new round of google searching and found this link Html Button that calls JQuery and does not post back
I changed my button to the following (added the UseSubmitBehavior)
and now it works. Hopefully I didn't waste people's time...
Related
I've trying to write a script that automatically displays the summernote link dialog box when I click a button.
For instance, I have the following button:
<button class="btn btn-sm btn-info use_hyperlink" data-href="//files.examples.org.uk/song.mp3" type="button">Copy</button>
So in my js I've got:
$("#linklist").on("click", "button.use_hyperlink", function () {
var href = $(this).data("href")
modal = $("div.note-editor.note-frame.panel.panel-default div.modal.link-dialog")
modal.addClass("in").modal("show")
modal.find("input.note-link-url.form-control.note-form-control.note-input").val(href)
modal.find("button.note-btn.note-btn-primary.note-link-btn").prop("disabled", false).removeClass("disabled").attr("type","button")
})
Which opens the dialog, successfully pastes the href but clicking the Insert Link button submits the form that the summernote resides in.
Looking at the summernote code on line 6765 there is a function called showLinkDialog which I imagine is the one I want. However when I tried:
$(document).ready(function () {
$("textarea#summernote").summernote({height: 500});
$("#linklist").on("click", "button.use_hyperlink", function () {
var href = $(this).data("href")
$("textarea#summernote").showLinkDialog({
url: href
});
})
})
I get an Uncaught TypeError: $(...).showLinkDialog is not a function.
Try trigger clicking the button
$('.note-insert [aria-label^="Link"').trigger('click')
I have a form within popup window something like that:
<div id="dialog" title="Rezerwacja">
<asp:TextBox ID="imieTextBox" runat="server" placeholder="Imię"></asp:TextBox>
<asp:TextBox ID="nazwiskoTextBox" runat="server" placeholder="Nazwisko"></asp:TextBox>
<asp:TextBox ID="emailTextBox" runat="server" TextMode="Email" placeholder="Email"></asp:TextBox>
<asp:TextBox ID="telefonKomorkowyTextBox" runat="server" TextMode="Phone" placeholder="Telefon kom."></asp:TextBox>
<div id="plansza"></div>
<asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClick="rezerwujButton_Click" />
</div>
And JavaScript:
$(document).ready( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "puff",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( ".opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
});
So I have to behind code:
protected void rezerwujButton_Click(object sender, EventArgs e)
{
rezerwacje nowaRezerwacja = new rezerwacje();
nowaRezerwacja.imie_klienta = imieTextBox.Text;
nowaRezerwacja.nazwisko_klienta = nazwiskoTextBox.Text;
nowaRezerwacja.email_klienta = emailTextBox.Text;
nowaRezerwacja.nrtel_klienta = telefonKomorkowyTextBox.Text;
bazaDC.rezerwacjes.InsertOnSubmit(nowaRezerwacja);
bazaDC.SubmitChanges();
}
And there is the problem, submit button "rezerwujButton" does not work. It look like a unclickable or something like that... I'm clicking on it and nothing do... Not refresh page or anything...
When I going to use that form without popup window, It work but within popup not.
I tried to set usesubmitbehavior="false" but when I did it, button worked, send something but every field was blank... I mean when i tried to get something like that: imieTextBox.Text It will be blank... Always...
Any ideas?
#edit
I don't know what Do I do wrong?
Always a fields from form is blank...
Anybody can tell me how can I use correct this __PostBack? Because I have to do something wrong...
I added to button UseSubmitBehavior="fase" and in function PageLoad I got something like that:
if (Page.IsPostBack)
{
rezerwacje nowaRezerwacja = new rezerwacje();
nowaRezerwacja.imie_klienta = imieTextBox.Text;
nowaRezerwacja.nazwisko_klienta = nazwiskoTextBox.Text;
nowaRezerwacja.email_klienta = emailTextBox.Text;
nowaRezerwacja.nrtel_klienta = telefonKomorkowyTextBox.Text;
bazaDC.rezerwacjes.InsertOnSubmit(nowaRezerwacja);
bazaDC.SubmitChanges();
}
For example imieTextBox.Text is always blank... I don't know why...?
edit
Im done. I change the way to get modal window. I used popup window which not moving modal div anywhere and It working.
The reason of the "nothing happens" behaviour is the fact that jQuery-UI dialog widget moves the DOM-element, which is converted to a dialog (in your case - $("#dialog")), to body. After this, the submit button is not inside a form tag anymore, and clicking it does not cause any submission.
It will still work if the whole form is inside the dialog content:
<div id="dialog" title="Rezerwacja">
<form ...>
...
<asp:Button ID="rezerwujButton" runat="server" Text="Zarezerwuj" OnClick="rezerwujButton_Click" />
</form>
</div>
You can try putting your rezerwujButton_Click method into PageMethods
[ScriptMethod, WebMethod]
public string RezerwujCall() {
// logic here
return "ok";
}
Then in your js:
<script type="text/javascript">
function rezerwuj_clicked() {
PageMethods.RezerwujCall(function (response) { if(response == "ok"){} }, function(response){ console.log("failed"); });
}
</script>
This will require to change OnClick="rezerwujButton_Click" into OnClientClick="rezerwuj_clicked()"
I've been asked for a simple solution to add to links on a blog that would pop-up a warning before going to that link. Only if you agree do you go on to that link. The first solution works fine (and I got it here):
<script type="text/javascript">
function confirm_alert(node) {
return confirm("some message here");
}
</script>
Click Me
However, now I've been asked to have a checkbox in the pop-up that says something like "I understand" and then a button to continue. If it isn't checked or if they click outside the box (or the X close button if there is one), then it just goes back to the page they were on. If it IS checked and they click continue it goes to the URL on the link (as above).
Along with this, I need to set a browser cookie ONLY if the dialog is checked and continue hit. I've set cookie's in browser with JS before, but not attached to to an event like this, so I'm not sure how to do that either.
I've done many searches here and on the net in general and can't seem to find any examples that do this. I have found that there's no way to do this with a standard confirm dialog and would need to use jQuery and that's fine, but I still can't find an example.
Any help is much appreciated.
I haven't tested this code (I just free typed it here).
In the HTML:
<div id="agreeModal">
<input id="agree" type="checkbox" />
<button id="btnCancel">Cancel</button>
<button id="btnContinue">Continue</button>
</div>
JavaScript (in another file or in a <script> tag) :
document.addEventListener('DOMContentLoaded', function() {
var agreeUrl = '';
// Get the links on the page
var links = document.querySelectorAll('a');
links.addEventListener('click', function( event ){
event.preventDefault(); //stop it from following link
agreeUrl = this.getAttribute('href'); // get the url
document.getElementById('agreeModal').style.display='block'; //show Modal
});
var btnContinue = document.getElementById('btnContinue');
btnContinue.addEventListener('click', function( event ) {
event.preventDefault();
var cb = document.getElementById('agree');
if (cb.checked) { //if checkbox is checked goto url
location.href= agreeUrl;
}
});
var btnCancel = document.getElementById('btnCancel');
btnCancel.addEventListener('click', function( event ) {
event.preventDefault();
//hide Modal
document.getElementById('agreeModal').style.display='';
});
});
Same code in jQuery:
(function( $ ){
$(function(){
var agreeUrl='';
$('a').on('click', function( event ){
event.preventDefault(); //stop it from following link
agreeUrl = $(this).attr('href'); // get the url
$('#agreeModal').show(); //show Modal
});
$('#btnContinue').on('click', function( event ) {
event.preventDefault();
if ($('#agree').prop('checked')) { //if checkbox is checked goto url
location.href= agreeUrl;
}
});
$('#btnCancel').on('click', function( event ) {
event.preventDefault();
//hide Modal
$('#agreeModal').hide();
});
});
})( jQuery);
Hope that helps!
I've a sign up form which has submit button with value "GET INSTANT ACCESS!" :
<input type="submit" class="wf-button" name="submit" value="GET INSTANT ACCESS!">
After submit, the value gets change to 'Thank You!':
<input type="button" class="wf-button" value="Thank You!">
I need to detect the button value. If it becomes "Thanks You!" then I have to show a popup. And this value gets change by some Ajax (GetResponse form). There is no page refresh.
I've tried below code but it is only working in FireFox & not working in Chrome.
<script>
$(function() {
$(".modalbox").fancybox();
});
$(function() {
$('.wf-button').bind("DOMSubtreeModified",function(){
//if btn valu is 'Thank You! trigger popup'
$(".modalbox").trigger('click');
});
});
</script>
Live URL: http://www.idynbiz.com/web/html/gold_ira_vf/? (just to show how the button changes its value)
Can some one help how can I detect the button value and show my popup? The button change its value in real time (Ajax). There is not page refresh.
Is there any JQuery approach with bind() Or on() function to detect the value?
$(function() {
$('.btn1').on('change', function() {
alert('Do stuff...');
});
$('.lnk1').on('click', function() {
$('.btn1').val('Thank you!');
$('.btn1').trigger('change');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" class="btn1" value="SUBSCRIBE" />
Change button value
OK ,
when button is clicked and form is submitted for saving. just write these code
$(document).ready(function ()
{
$('.wf-button').click(function ()
{
var valueofbutton = $(this).attr('value');
if(valueofbutton == 'Thank You!')
{
window.open(); //// whatever you want to open in popup
}
});
});
i m sure that this will work
You can use the following function in javascript which gets called after any > kind of postback, i.e. synchronous or asynchronous.
function pageLoad()
{
if($(".wf-button").val()=="Thank You!")
{
// show your popup
}
}
Hope it works....
I've gotten an piece of Jquery code which lets the user click a link which will open an popup with information. But I don't know how to modify it so that the popup automaticly opens up when the user loads the page.
Jquery:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function ($) {
$('[data-popup-target]').click(function () {
$('html').addClass('overlay');
var activePopup = $(this).attr('data-popup-target');
$(activePopup).addClass('visible');
});
$(document).keyup(function (e) {
if (e.keyCode == 27 && $('html').hasClass('overlay')) {
clearPopup();
}
});
$('.popup-exit').click(function () {
clearPopup();
});
$('.popup-overlay').click(function () {
clearPopup();
});
function clearPopup() {
$('.popup.visible').addClass('transitioning').removeClass('visible');
$('html').removeClass('overlay');
setTimeout(function () {
$('.popup').removeClass('transitioning');
}, 200);
}
});
});//]]>
</script>
Link to activate the code:
Link
Content of popup window:
<div id="example-popup" class="popup">
<div class="popup-body"> <span class="popup-exit"></span>
<div class="popup-content">
<h2 class="popup-title">Terms and Conditions</h2>
<p>
<h5><font color="grey">Please take time to read the following...</font></h5>
</div>
</div>
</div>
<div class="popup-overlay"></div>
I've tried modifying it mysql, but it didn't work out. As I'm not an expert in Jquery.
I know it is a big ask, but the code is here. And I know some geek can easily find what I need :)
So real quick. Instead of having the user to click the link to open the popup. I want the popup to automaticly open
Reasonably simple when you trigger a click on the element you want after you register the click handler.
/* your original code stays mostly the same except for chaining methods after it*/
$('[data-popup-target]').click(function () {
$('html').addClass('overlay');
var activePopup = $(this).attr('data-popup-target');
$(activePopup).addClass('visible');
/* now click the first one */
}).first().click();
ID's must be unique in a page, so you should change the duplicates on the popup link and popup container if they are the same as shown