• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 98
  • Last Modified:

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?

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
Eduardo Fuerte
Asked:
Eduardo Fuerte
  • 7
  • 3
  • 3
1 Solution
 
Julian HansenCommented:
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
 
leakim971PluritechnicianCommented:
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
 
Eduardo FuerteAuthor Commented:
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Julian HansenCommented:
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
 
Eduardo FuerteAuthor Commented:
The modal has no value for "id_reclamacao" - only the main view (using datatables plugin) has a value.
0
 
leakim971PluritechnicianCommented:
do a right click on the page, close to the 50, and choose view source to post it here
0
 
Eduardo FuerteAuthor Commented:
But this runs!

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

Open in new window

0
 
Eduardo FuerteAuthor Commented:
Sorry, leakim971, our messages crossed!
0
 
leakim971PluritechnicianCommented:
so you mean you can close the question or do you still need help ?
yu can accept your own answer as solution
0
 
Eduardo FuerteAuthor Commented:
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
 
Julian HansenCommented:
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
 
Eduardo FuerteAuthor Commented:
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
 
Eduardo FuerteAuthor Commented:
It's a easier way to obtain a main view value.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 7
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now