[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 86
  • 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
Configuration Guide and Best Practices

Read the guide to learn how to orchestrate Data ONTAP, create application-consistent backups and enable fast recovery from NetApp storage snapshots. Version 9.5 also contains performance and scalability enhancements to meet the needs of the largest enterprise environments.

 
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

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

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