We Keep Coding

Sending an ID with JavaScript - javascript

On my webpage I have this link:
<\a onclick="#" class="compose"></a>
By clicking the link, this script gets activated:
$(function(){
$('.compose').click(function() { // Button which will activate our modal
$('#popup_bestanden_edit_name').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
The script above will make this DIV visible, wich is a popup:
<div id="popup_bestanden_edit_name">
<div id="popupheading">
Naam wijzigen
</div>
<div id="popupcontent">
<p><form action="" method="post" name="naamwijzigen"><input name="naam" type="text"></form></p>
<img src="<?php echo $domein.'/images/confirm_popup/tick.png'; ?>">Ja, wijzigen
<img src="<?php echo $domein.'/images/confirm_popup/cross.png'; ?>">Nee, annuleren
</div>
The popup that opens gives people the opportunity to edit a name of a document on the website.
So when the link <\a onclick="#" class="compose"></a> is clicked, it has to send an id ($fetch_row['id']) to the popup, so I can use this in the further scripting.
Does anyone know how to do this?

Add the id to your a tag like this
<a onclick="#" class="compose" data-id="<?php echo $fetch_row['id']?>"></a>
Then fetch the id and send it to your popup with Jquery:
id = $(this).attr("data-id");
Now use this id wherever you want.

jQuery reveal plugin has many callback functions in which opened callback function that triggers 'after' the modal is opened. See docs at foundation.zurb.com
echo "<a onclick='#' class='compose' id='".$fetch_row['id']."'></a>";
$(function(){
$('.compose').click(function() {
var id = $(this).attr('id'); //getting id from clicked anchor tag
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close',//missing comma (,) added
opened: function(id) {
$("#popup_bestanden_edit_name").append("<input type='hidden' name='myid' id='myid' value='"+id+"'>");
}
});
return false;
});
});
Your id will set in myid element in popup get this from here.

add id to the anchor tag only i.e
<a id = '2' class='compose' ></a>
then you can get it like jQuery('.compose').attr('id');

now everything is working i have one more question.
This is the code i use now:
echo "<a onclick='#' class='compose' id='".$fetch_row['id']."'></a>";
$(function(){
$('.compose').click(function() {
var id = $(this).attr('id'); //getting id from clicked anchor tag
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close',//missing comma (,) added
opened: function(id) {
$("#popup_bestanden_edit_name").append("<input type='hidden' name='myid' id='myid' value='"+id+"'>");
}
});
return false;
});
});
But when the link is clicked while people are on the bottom of the page, the popup will open on the top of the page.
But people need to scroll back to the top to see this.
How can i automatically send the user back to the top where the popup is being showed?

Related

After trying to animate an element, when clicking on a button using this script:
$(document).ready(function()
{
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function()
{
// $(this).css('border', "solid 2px red");
// var divs = $("#div_one, #div_two, #div_three, #div_four, #div_five, #div_six, #div_seven, #div_eight, #div_nine, #dive_ten, #div_eleven, #div_twelve, #div_thirteen, #div_fourteen, #div_fifteen, #div_sixteen, #div_lone, #div_ltwo, #div_lthree, #div_lfour, #div_lfive, #div_lsix, #div_lseven, #div_leight, #div_lnine, #dive_lten, #div_leleven, #div_ltwelve, #div_lthirteen, #div_lfourteen, #div_lfifteen, #div_lsixteen");
// $(divs).siblings().slideToggle();
$(this).next().slideToggle();
$(this).siblings().slideToggle();
});
});
I've got some animation unwanted result. So I decided, instead of animating the next element of the clicked button, why I don't send the result into dialog bix using jQuery UI plugin. So I tried the following:
<script src="../include/jquery-1.12.1.min.js"></script>
<script src="../include/jquery-ui.min.js"></script>
<script src="../include/bootstrap.min.js" type="text/javascript"></script>
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
$(this).next().dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
//$(this).dialog("open");
});
});
And here is the html code for only the first 2 buttons, because the cod is too long:
<div class="form-group col-md-12">
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button" />
<div id="div_one" class="collapse">3rd Molar:
<?php echo $resTeeth['one'] ?>
</div>
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="otwo" name="two" alt="button" />
<div id="div_two" class="collapse">
<?php echo $resTeeth['two'] ?>
</div>
So I had this error:
jquery-1.12.1.min.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
How to fix this error, and is it possible to send the next() div element into dialog box using jQuery UI, or should I specify id for each div, and create a dialog script for each one of them ?

Your problem is, you're creating the dialog from the next div, but you're trying to open the dialog on the CURRENT div.
You can fix this pretty easy:
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
var dialog = $(this).next();
dialog.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
dialog.dialog("open");
});
});

I made the assumption you want the dialog to contain the contents of the next (following) div.
This would do that:
$(document).ready(function() {
var dialog = '<div class="mydialog" title="Basic dialog"><p class="dialogcontent">me</p></div>';
var newDiv = $(dialog);
newDiv.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$(".form-group").on('click', ".img1", function() {
var me = $(this);
newDiv.find('.dialogcontent').html(me.next('.collapse').html())
newDiv.dialog("open");
});
});
Example in action: https://jsfiddle.net/89pyhsuj/

What I want:
I want to initialize a modal Magnific Popup from a radio button on an HTML form. The popup will then display the "send" button.
Actually, I want to initialize the popup by clicking on the label of the radio input because I'll replace the radio elements with custom CSS radio buttons.
I'm using Zepto because it's lighter and I wouldn't use jQuery otherwise.
What's the problem:
If I click on a label, I do get a Magnific modal, but the radio option doesn't get selected.
If I click on the radio button itself, the option does get selected and the modal appears. But, if I dismiss the modal to choose another option, the modal appears without changing the option. (This is not usable anyway because I'll hide the stock radio buttons — as previously mentioned).
My code: (http://jsfiddle.net/Nkc5X/)
HTML:
<form action="#">
<label>
<input type="radio" name="whatside" title="Left" value="Left">
<span>Left</span>
</label>
<label>
<input type="radio" name="whatside" title="Right" value="Right">
<span>Right</span>
</label>
<div id="modal" class="white-popup-block mfp-hide">
<h2>Modal dialog</h2>
<button type="submit" value="Send">Send</button>
<a class="popup-modal-dismiss" href="#">Dismiss</a>
</div>
</form>
JavaScript:
$(function () {
$('label').magnificPopup({
type: 'inline',
items: {src: '#modal'},
preloader: false,
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
What I've tried:
I've several tried variations on my html/javascript to no avail. I've tried initializing the popup using different selectors (label and input elements, class, id).

Okay, I left this problem simmer for a while and finally found a solution.
I initialize the popup from the input element: $('input').magnificPopup, which allows me to select the option when clicking on the label.
I reset the form controls using native JavaScript, using the method described in this SO answer: $('form')[0].reset();
Working JSFiddle here: http://jsfiddle.net/Nkc5X/1/
$(document).ready(function() {
$('input').magnificPopup({
type: 'inline',
items: {src: '#modal'},
preloader: false,
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
$('form')[0].reset();
});
});

You can do it like this
$.magnificPopup.open({
items: {
src: '<div class="my-container">here is the content of the html you want to popup</div>'
},
callbacks: {//this is optional
close: function () {
//do something on exit
}
}
});

I have a dynamic div's which needed to hide when relevant delete button clicked. This divs also have dynamic id's. i want to hide relevant div where button is clicked. im only getting the first div id all the time. Im new to jQuery can someone please help.
$(document).ready(function(){
$(".reBox").click(function() {
alert($('.reBox').attr('id'));
// $(this).hide();
});
});
<div class="boxx" id="<?php echo $tot_meal; ?>">
<div class="reBox" id="<?php echo $tot_meal; ?>">
<img src="../images/error.png" width="16px" height="16px" />
</div>
</div>

As you have dynamic html elements use .on(). Try this:
$(document).ready(function(){
$(".boxx").on('click','.reBox',(function() {
$(this).hide(); //to hide reBox
$(this).parent("div.boxx").hide(); //to hide boxx element
});
});

Since you have dynamic elements, try event delegation
$(document).on('click', ".reBox", function () {
console.log(this.id);
$(this).hide();
//if you want to close boxx
// $(this).closest('.boxx').hide();
});

I want to upload image from popup but not getting proper solution.
what i wanted to do
1. On button click open popup
2. In that popup open form for browse image
3. After uploading image i want to show image in same popup and user can crop it
4. After completed cropping save image to database and folder and want to show profile pic
What i did
1.I have completed all code in core php but without using popup
for popup
2. I can open popup on button click, browse file and action goes to controller.
Code
View page
// open popup
<div class="profile-pic fl">
<div class="txtc">
<?php echo $this->tag->image(array("img/profile_pic_default.jpg","class"=>"profile_img")) ; ?>
</div>
<div class="txtc mrgt2">
<button id="openPopup" onclick="upload_action();">Upload Image</button>
</div>
</div>
//iamge upload form
<div id="up-image" style="display: none">
<div style="margin:0 auto; width:600px">
<div id="thumbs" style="padding:5px; width:600px"></div>
<div id="crop-image" style="width:600px">
<?php echo $this->tag->form(array("personaldetails/uploadImage","id"=>"cropimage",'enctype'=>"multipart/form-data"))?>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>
</div>
</div>
Script to open popup and send data
<script type="text/javascript">
$(document).ready(function() {
$edit_dialog = $("#up-image").dialog({
autoOpen:false,
title:"Upload image",
modal:true,
height: 300,
width: 600,
buttons:[
{text: "Submit", click: function() { $('form',$(this)).submit(); }},
{text: "Cancel", click: function() { $(this).dialog("close"); }}
],
create: function(event, ui)
{
$(this).parents(".ui-dialog").css("margin-left", 350);
$(this).parents(".ui-dialog").css("margin-top", 50);
}
});
//Submit action for dialog form
$("#up-image form").submit(function() {
var formData = new FormData($('form')[0]);
$.post($(this).attr('action'), $(this).serialize(),function(formData)
{
alert('done'+data);
$("#up-image").dialog('close');
},'json');
//stop default form submit action
return false;
});
//attach action to edit links
});
function upload_action()
{
$edit_dialog.dialog('open');
}
Controller action
public function uploadImageAction()
{
echo "<pre>";print_r($_FILES);echo "<pre>";exit; // not able to get request
}

You can use jcrop plugin for that:
http://deepliquid.com/projects/Jcrop/demos/crop.php
http://deepliquid.com/content/Jcrop.html
For fullfill your requirement you have to use:
AjaxUpload and JCrop together.
Ajaxupload will upload image to server and jcrop helps you to crop image.
After croppping you have to need old image and save cropped image in DB and folder.

add form in a hidden div and set position absolute or fixed
animate or fade in hidden div on-clik function
set z-index for div ordering

I asked this question before, but I don't think I explained properly for what I am trying to accomplish.
There are multiple links on my website and I want to open the content from the link in a jquery ui modal dialog widget.
I'm trying to use 'this' to reference the link that the user selects dynamically.
What am I doing wrong here?
The code I'm using is below:
comment #1
comment #2
comment #3
<div id="somediv"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#somediv").load(this.getTrigger().attr("href")).dialog({
autoOpen: false,
width: 400,
modal: true
});
$("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});
</script>

http://jsfiddle.net/qp7NP/
A couple changes: changed ID to Class and used IFrame.
comment #1<br>
comment #2<br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
<iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
$(".test").click(function () {
$("#thedialog").attr('src', $(this).attr("href"));
$("#somediv").dialog({
width: 400,
height: 450,
modal: true,
close: function () {
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
</script>
In case you want to pull in the HTML instead of IFrame, you will have to use Ajax (XMLHttpRequest), something like this: http://jsfiddle.net/qp7NP/1/

You can't have multiple elements with the same Id.
Change your links to to class="test" instead and therefore your click event to $('.test').click().
Also if you still have problems, and I remember I had some similar issues because how JQUery Dialog behaves itself with the DOM. It will literally rip your #somediv out of content and append it to the bottom of a page to display that dialog. I solved my dynamic dialog loading issues with wrapping it in another div.
<div id="somediv-wrap">
<div id="somediv">
</div>
</div>
<script>
$(document).ready(function() {
$("#somediv-wrap").dialog({
autoOpen: false,
width: 400,
height:200,
modal: true
});
$(".test").click(function(event)
{
event.preventDefault();
var link = $(this).attr('href');
$("#somediv").load(link,function(){
$( "#somediv-wrap" ).dialog( "open" );
});
});
});
</script>