Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Could you point how to a modal view obtains a main's view control value by using jQuery and then disponibilize it to a function?

Posted on 2016-11-03
13
Medium Priority
?
74 Views
Last Modified: 2016-11-09
Hi Experts

Could you point how to a modal view obtains a main's view control value by using jQuery and then disponibilize it to a function?

Main view
img006
50 is the id to be obtained in modal view.

jQuery modal code:
.on("edit", function(e, data) {

      // How to code here to obtain the "id" value ?
	var $form = $(this);

	$.each(data, function(field, value) {
		//console.log(field+ " - " +value);
		var
			avoid = ' . json_encode($options['edit']['avoid']) . ',
			$field = $form.find(\'[name="\' + field + \'"]\'),
			tag = ($field.length ? $field.prop("tagName").toLowerCase() : undefined)
		;
				if(field ==="anexo"){
					if(value !==null){
						$(".anexo").show();
						var link = "";
						$.each(value,function(id, valor){
							var anexo = valor.anexo;
							anexo = anexo.split("/");
							anexo = $(anexo).get(-1);
					
							
							//Excluir button must to send the id (obtained from main view) and the anexo value - still obtained
							link = link+ "<p><a href=\'"+valor.anexo+ "\' target=\'_blank\' class=\'anexo\' name=\'link\'>"+anexo+"</a><button type=\'button\'  class=\'call-ajax\' data-anexo=\'" + anexo + "\'>Excluir</button></p>";  
						
																;
						});
						$("#anexo").html(link);
					}else{
						$(".anexo").hide();
					}
				}

Open in new window


The above code (modal) produces:
img003

Function to be called by the "Excluir" button - here a Codeigniter controller must be called with 02 arguments id and anexo (still obtained)

  $("body").on("click", ".call-ajax", function() {
	// obtém o valor do link
	console.log("chamada ajax");
  

	data = {
	  anexo: $(this).data("anexo")
	};

	console.log(data);

	// AJAX para o controller
	$.ajax({
	  url: "reclamacao/delete_anexo",
	  data: data,
	  type: "POST"
	}).done(function(resp) {
		console.log("deleção OK");
	  // Display the resposne
	  //$("#result").append($("<li/>").html(resp));
	});
  });

Open in new window


Thanks in advance!
0
Comment
Question by:Eduardo Fuerte
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 3
  • 3
13 Comments
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41872991
But what is rendering out the id? What does the html for that view look like?

What is in data line 1?
.on("edit", function(e, data) {

Open in new window


Where does the link (Button Excluir) link to the id?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41873154
let say you've something like :

<span data-id="50" class="openModal">50</span>

$(".openModal").click(function() { // try this first to get click before trying the next line currently commented
//$(document).on("click", ".openModal", function() {
    $(".openModal.lastClicked").removeClass("lastClicked");
    $(this).addClass(".lastClicked");
});

Open in new window


So you can get the ID like this :
.on("edit", function(e, data) {

   var id = $(".openModal.lastClicked").data("id"); // try this first before the next line currently commented
   //var id = $(".openModal.lastClicked").text();
   alert( "the id is: " + id );

Open in new window

0
 

Author Comment

by:Eduardo Fuerte
ID: 41873851
Hi

What I have at modal edit:
<div class="modal-body modal-body-meeta">
	<div class="panel panel-meeta mt-10">
		<!-- Begin: Form Edit -->
		<form method="post" action="#" id="entity-form" enctype="multipart/form-data"  class="dropzone">
		
			<input type="hidden" class="id_reclamacao" name="id_reclamacao" value="">
....

Open in new window


Could it be a way to capture the id_reclamacao value?  (still not working)

.on("edit", function(e, data) {
	
		var $form = $(this);

		var id = $form.data("id_reclamacao");

Open in new window

0
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41873860
Ok but we need to see the html that generates the table in the image you showed us - where you are pointing to the number 50.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41873879
The modal has no value for "id_reclamacao" - only the main view (using datatables plugin) has a value.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41873890
do a right click on the page, close to the 50, and choose view source to post it here
0
 

Accepted Solution

by:
Eduardo Fuerte earned 0 total points
ID: 41873894
But this runs!

var id = $(this).parents(".modal").find(".id_reclamacao").val();

Open in new window

0
 

Author Comment

by:Eduardo Fuerte
ID: 41873896
Sorry, leakim971, our messages crossed!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41873906
so you mean you can close the question or do you still need help ?
yu can accept your own answer as solution
0
 

Author Comment

by:Eduardo Fuerte
ID: 41873935
Julian

The code that forms the datatable (where I point the number 50) is a Codeigniter helper -  a litle fantasmagoric.... that outputs to the view, I posted here before.  It's no longer necessary to deep on it. But if you still want to review...
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41874216
The code that forms the datatable (where I point the number 50) is a Codeigniter helper
I understand but to access values in it we need to see the HTML render of the table.

Based on this post and the code from this post
<div class="modal-body modal-body-meeta">
	<div class="panel panel-meeta mt-10">
		<!-- Begin: Form Edit -->
		<form method="post" action="#" id="entity-form" enctype="multipart/form-data"  class="dropzone">
		
			<input type="hidden" class="id_reclamacao" name="id_reclamacao" value="">

Open in new window


I am assuming that the <form> above is part of the image you showed us. What confuses me though is that you are referencing an input that is hidden - yet your image showed a value 50 - so for us to make the connection between a value shown on the screen and a hidden control is a bit of a stretch.

The solution to this problem is easy but without being able to see all the pieces we have to guess.

Anyway, glad you got sorted out.
0
 

Author Comment

by:Eduardo Fuerte
ID: 41876932
Hi @Julian

Making it clearer:

The main view is formed by the helper that configures datatables plugin and then the modals is coded:
<!-- Begin: Content -->
<section id="content" class="table-layout animated fadeIn">
    <!-- Begin: .tray-center -->
    <div class="tray tray-center">

        <!-- Begin: Listagem -->
        <div class="panel">
            <div class="panel-menu admin-form theme-primary">
                <div class="row">
                    <div class="col-sm-12">
                        <span class="fa fa-building mr10"></span>
                        <span>Reclamações</span>
                    </div>
                </div>
            </div>
            <div class="panel-body pn">
                <button class='btn btn-primary btn-gradient btn-alt item-active' onClick ="$('#datatables').tableExport({type: 'excel', escape: 'false'});">Excel</button>
                <div class="col-sm-12">
                    <?php
					// This helper mounts datatable's plugin grid => where "50" remains as id_reclamacao
                    echo datatables(
                            array(
                        'id_reclamacao' => 'ID',
                        'sise' => 'SISE',
                        'fk_seguradora' => 'Cliente Corporativo',
                        'nome_reclamante' => 'Nome Reclamante',
                        'data' => 'Data',
                        'sla' => 'SLA',
                        'created_by' => 'Analista',
                        'procedencia' => 'Status',
                        'acoes' => 'Ações',
                            ),
                            // Options dataTables
                            array(
                        'id' => 'datatables',
                        'width' => '100%',
                        'controller' => 'reclamacao',
                        'action' => 'datatables_list',
                            ),                     
                            array(
                        'like' => array(
                            'sise', 'id_reclamacao', 'fk_seguradora', 'data_search', 'sla', 'nome_reclamante', 'created_by', 'procedencia_f', 'status'
                        ),
                        'search_submit' => '.pesquisar_groups_form',
                            )
                    );
                    ?>


                   
                </div>
            </div>
        </div>
        <!-- End: Listagem -->

        <!-- Modal Edit !!!!!!!!!!!!!!!!!!!!!!! -->
		<!-- The modals code starts here -->
....
            <!-- Modal View-->
...

Open in new window


It doesn't matter that the modal  value is hidden since the value is obtained from the  main view  (that was mounted by the helper).

So what I guess is: we can "abstract" the way the id is mounted in the main view - in this case by using datatables. By using a code like that:

var id = $(this).parents(".modal").find(".id_reclamacao").val();

Open in new window


We could obtain the control value.
0
 

Author Closing Comment

by:Eduardo Fuerte
ID: 41880271
It's a easier way to obtain a main view value.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this blog post, we’ll look at how using thread_statistics can cause high memory usage.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question